jQuery UI / CSS Expert Wanted

Anyone know more about jQuery UI and CSS than me? (BTW that wouldn’t be hard).

I would like to ask you a question that could assist the development of the Cart Builder.

A bit, I’m rusty and also doing many things right now. But happy to try and help!

OK … I will give you the summary.

I have a jQuery UI as shown below.

I want to have the top (where the check box is) to be fixed and only have the lower section scroll.

I have tried the following code:

  <div id="dlgEEPROMClashes" class="dlgEEPROMClashes" title="EEPROM Use and Clashes" style="font-size: 13px; overflow: hidden;">
    <div>
      <div>
      <input type="checkbox" id="chkHideWhales" class="chkHideWhales" onclick="generateClashesTable();" checked="false"/>Show whales (> 256 bytes)
      </div>
      <div id="dlgBottom" style="overflow-y:auto;">
      <span id="htmlEEPROMClashes" class="htmlEEPROMClashes">...</span>
      </div>
    </div>
    <input type="hidden" id="tblClashesSelected" class="tblClashesSelected" />
  </div>

You can see I tried to wrap the top and bottom in separate divs, with the lower having an overflow of ‘auto’. I have also had to set the overflow to hidden on the outer div (the dialogue itself) otherwise I always get a scroll bar for the entire dialogue. But … the inner div doesn’t actually scroll :frowning:

To help visualise where I am now, you can see my WIP at Cart Builder

Maybe putting the checkbox as fixed position or potentially absolute positioning it?

Diagnosing scrolling is one of many commonly known css annoyances. I’m sure you’ve gone around reading some tutorials and stuff. I’ll try to take a look at it when I get a moment.

Update:

Looks like it doesn’t scroll because the height is not set. There is nothing to scroll because the content is being fully “unrolled”.

  <div id="dlgBottom" style="overflow-y:auto; height: 600px;">

Is a quick fix but you’ll probably want to set its height by other measures, maybe percentages maybe set by parent dependences. But you’ve got to restrict the height otherwise it’s got nothing to force the div into scrolling.

Absolute positioning is one thing I looked at but it would have the items scrolling behind it. Guess I could have a fixed panel and have the lower half scroll under it.

Awesome, thanks @bateske … it worked! I did have to calculate the hide dynamically but that was easy.

1 Like