odd behaviour hidden attribute/property Topic is solved

[thosrtanner]

Whilst I realise the documentation on the hidden attribute on MDN is confusing to say the least, and my reading of it may be different to other peoples, (for instance it appears to say it is both designed for the situation I want and should not be used in the situation I want). the actual attribute seems to behave oddly

I have a list of items, some of which I don't want to appear depending on the user ticking a 'show all' box. Collapsed doesn't work for this, as this merely blanks out the item, giving you a list with blank spaces in it.

So I tried with setting the hidden attribute. Which indeed makes the item disappear as I wanted. Except - when I clear the hidden attribute, the item doesn't reappear. I have to remove it and re-add it for that to happen. It's not a huge effort to work around, and it looks like what I wanted.

Except the scroll bar still assumes all the hidden items are there, and the scrolling can behave very strangely. Not just jerkily, which I could understand. For instance scrolling down can actually cause the display to re-show some items it had previously scrolled out.

Am I doing something wrong, or is this one of those areas of the system that is a bit of a Cinderella?

[Moonchild]

Without actual details and code, it's impossible to tell what you are doing (and therefore to tell what you are doing is correct or to suggest alternatives)

[thosrtanner]

The code is like this:

Code: Select all

function update_visible_group_list()
{
  const view_all = document.getElementById("viewAllViewSelected").selectedIndex == 0;
  //The first item in the collection is a listcol. We don't want to fiddle
  //with that.
  let item = document.getElementById("group-list-rss").firstChild.nextSibling;
  while (item != null)
  {
    item.hidden = ! (view_all || item.childNodes[0].getAttribute("checked") == "true");
    //browser issue - need to redisplay if we've unhidden
    //item.parentNode.insertBefore(item, item.nextSibling);
    item = item.nextSibling;
  }
}

where the xul is like

Code: Select all

      <radiogroup id="viewAllViewSelected" orient="horizontal">
        <radio label="&inforss.group.view.all;"
               selected="true"
               onclick="viewAllViewSelected(true)"/>
        <radio label="&inforss.group.view.selected;"
               onclick="viewAllViewSelected(false)"/>
      </radiogroup>

      <hbox flex="1">
      <listbox id="group-list-rss"
               flex="1"
               style="overflow:auto; border-width:1px; border-style: solid; min-height: 70px">
        <listcols>
          <listcol flex="0"/>
          <listcol flex="1"/>
        </listcols>
        <!-- arbitrarily repeated, generated by code -->
        <listitem>
          <listcell ...>
          <listcell ...>
        </listitem>
      </listbox>
      </hbox>

[Moonchild]

You're iterating over listitem elements. These elements neither have a collapse nor hidden attribute/property because hiding/collapsing individual listitems was never an intended behavior. The fact that it even does anything to begin with is a layout quirk. Having list items hidden would not just mess up scrolling, but also navigation/selection since the items would actually still be there.

If you want a filtered view, then you will have to filter the actual items to display, and repopulate the list.

[thosrtanner]

Ah, OK, thanks