Making things disappear. With complications

HTML & CSS
1

So I’m trying to solve the old CSS problem of not being able to go upward.

I have an array of objects, not controlled by me, that are generated from a list. They take the general form:

<div class="holder">
<div class="itemrecord">
   (My ability to write my own code starts here.)
   <input type="hidden" name="showrecord" value="0">
   <input type="text" name="recordname" value="recordvalue"> (etc etc)
   (My ability to write my own code ends here.)
</div>
(repeat "itemrecord" divs for each record.)
</div>

The idea is that if ‘showrecord’ has a value of 0, the item should be visible, if not, it shouldnt. Simple enough. However. These records are designed to be displayed in two columns; IE each shown record should be 50% (or to be precise, calc(50% - 10px)) of the holder (The holder’s width is dynamic). This proves to be a problem when trying to hide elements, because the width insofar as i can tell has to be specified on the itemrecord element; and CSS (until CSS4 anyway) can’t read downwards to see the value of the hidden input.

The itemrecord element is generated outside of my control, and I cannot modify that element’s HTML.

Is there a decent solution i’m missing here?

2

So you’re showing/hiding elements based on the value of showrecord. Will those values be recorded later even if not shown?

If they won’t be recorded, just don’t generate them and let the width be set by the elements that are supposed to be there.

3

The values are stored and will exist in the DOM regardless, between pageloads etc etc. (And no, I have no control over filtering the results of whatever mechanism is pulling them).

The value of showrecord can be modified by the user during runtime (through another interface on the same page, where showrecord is a checkbox). showrecord will either contain the value “0” or “on”.

All records will be in the DOM, but the only way I can think to do it is to fix the width of itemrecord to 50%-10px, and then hide the contents of the element - which will leave a large open space where an element should be.

4

You could do it with some JS. This really quick and dirty JQuery works. It’s assuming one hidden field per grouping.

$('.itemrecord').each(function () {
   if  ($(this).children(':hidden').val() == 1){
  $(this).hide(); 
   }
});

A sample in action. Change the value of the hidden fields to see them show/hide.

1 Like
5

Does this CodePen help?

You can change the value of the hidden fields and the appropriate records will be displayed in two columns when CodePen automatically reloads the page.

Can you insert JavaScript and CSS elsewhere or will these have to be included within the HTML for each item record?

You will need to work ouit how to update the records shown after a user modifies the value of a hidden field “during runtime”.

1 Like
6

Assuming you are not tied to the 2 columns being horizontally sequential or aligned perfectly you could use css columns to accomplish this without JS.

e.g. Rough example.

It’s probably not what you were after though :slight_smile:

What you really need is this but only Safari TP supports it. :wink:

7

The only way I could see to do something like this without JS was to use an adaptive approach so that pixel measurements can be used to stretch the inputs. The problem with percent in flexbox or grid is that the child percentage cannot stretch the parent when the parents width is dependent on its child content (so unless you give the parent a percentage width then the child element cannot have a percentage width).

I’m 99% certain this will be of no use but I thought I’d document it anyway as some clever cloggs may see a solution that I missed :slight_smile:

At small screen it goes to one column but could be changed of course.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.