0

I have a rather complicated layout.

Layout

At the top and bottom are fixed header/footer.

The central display is broken up into two panels:

  • the left panel is hideable (may be visible, may not); if it is visible then it has a fixed width. It has a scroll within it if needed.
  • the right panel is always visible and has a variable width. It is scrolled by the window's scroll bar.

The right panel then consists of two parts that each fill the width of the panel - a set of tabs, of various heights (the visible tab should start at the top of the right panel, as the controlling buttons for those tabs are in the header), and directly below that a 'summary' box of unknown height, which comes immediately after the visible tab, no matter which tab we are looking at and how high it is.

Each of these panels/tabs/boxes consist of an outer div, and various internal divs as needed for the content.

The tabs are made by an outer div containing four inner divs, one after the other.

I can change the HTML and css as needed.

See https://jsfiddle.net/jvw8j62t/ (with thanks to JavaSpyder who provided the basic JSFiddle that I adapted for this demo)

I have tried various methods for the left and right panel, and the best one seems to be https://stackoverflow.com/a/4676510 but I would be happy to use a different method.

I then use jquery to hide/show the left panel (using display:none) and fix the right panel's left margin accordingly, though I am happy to use a different system for that.

However the tabs have to be made visible/invisible using visibility: visible and visibility: hidden (not display:none), because the contents of the tabs do not size correctly when using display:none. I cannot easily change this as there are three different libraries from three different sources having this issue.

This means that the different tabs' tops are then positioned incorrectly, because of the visibility css - they follow after each other, per https://stackoverflow.com/a/133064/1910690.

If I try different ways to make the top of the all the tabs fall at the top of the right panel then the summary box is positioned wrong and I can't align it to below the visible tab (changing position when you switch to a tab of a different height); or the right panel's scrolling is messed up; or the bottom of the tab disappears behind the footer; or one of several other problems.

Can anyone suggest a solution to the whole layout?

TylerH
  • 20,799
  • 66
  • 75
  • 101
James Carlyle-Clarke
  • 830
  • 1
  • 12
  • 19
  • Hi James, To help answer your question, an example of the html/css you are using might be necessary. https://jsfiddle.net/ (or something similar) might help you display what precisely you are seeing. – Mkapin May 12 '16 at 19:10
  • rather than trying visibility did you try animation and trying to get the items into position from outside the viewport – Dhaval Chheda May 12 '16 at 19:11
  • @MKapin, yeah, I should have done that but it was 4am! JavaSpyder made a JSFiddle that I've adapted to show the problem, and I've edited the question accordingly. It's at https://jsfiddle.net/jvw8j62t/ – James Carlyle-Clarke May 13 '16 at 04:18
  • @Dhaval, I assume you are talking about eg putting the tabs off the screen, or hidden behind something? If so, I'm not sure how that affects the positioning of the visible tab. Could you clarify? That said, I'm going to go play with it as it occurs to me that I can remove the invisible tabs using `position:absolute` leaving the visible tab and the summary positioned as they should be... I think! – James Carlyle-Clarke May 13 '16 at 04:23

2 Answers2

0

Is this the kind of thing you're looking for?

I used a flex container to create the left and right sections - the header and footer were easy enough with a fixed position. I used flex-shrink:0 on the left section so its width would be fixed, while leaving the right able to change to the screen width.

I'm not sure I did the tabs the way you specified, but feel free to correct if it isn't right. If you click on a tab, it will toggle visibility:hidden , but of course this leaves an empty gap. You said "the tabs have to be made visible/invisible using visibility: visible and visibility: hidden (not display:none), because the contents of the tabs do not size correctly when using display:none." Is this something we can also take a look at, or perhaps post in another question and link it here? If we could fix this problem, it could simplify this layout issue.

The left section is really another fixed position div with overflow:auto to give it the scrollbars. The height is handled by jquery.

Finally, clicking "Toggle Left Panel" will toggle the fixed position div and the width of the left section from 0 or 200.

swinn
  • 869
  • 1
  • 16
  • 46
  • Hi JavaSpyder, thank you so much for your JSFiddle and your reply. I've added to your fiddle to show the problem I'm experiencing - https://jsfiddle.net/jvw8j62t/ - where you can see that there's a gap between the top of the summary and the bottom of the tab, and the top of the tab and the top of the scrolling area. I need to get that so there is no gap. – James Carlyle-Clarke May 13 '16 at 04:17
  • Unfortunately the visibility vs display issue arises from three different libraries from three different sources (two of which I have no control over). Basically some of the elements on the page are set up at load time and if the tabs aren't present on the page (even if they are not visible) then it goes horribly wrong. – James Carlyle-Clarke May 13 '16 at 04:21
  • You're very welcome @JamesCarlyle-Clarke. Having read your recent answer to your own question I assume you don't require any more help on this issue? I did notice that in your fiddle, there is now a horizontal scroll bar which appears due to the hidden tabs being too long. I fixed this [here](https://jsfiddle.net/JavaSpyder/fq43Lhez/). – swinn May 13 '16 at 13:48
  • Yes, you are right, good catch - although in my production code I didn't have that problem, I did on the JSFiddle - and now that's fixed and there for anyone else who is searching for this solution. Thanks again. – James Carlyle-Clarke May 16 '16 at 03:02
  • 1
    forgot to say, yes, the original question is answered. Thanks again. – James Carlyle-Clarke May 16 '16 at 03:11
0

With thanks to @JavaSpyder for his JSFiddle, and @Dhaval Chheda for the comment that inspired me...

I realised that I could use position:absolute on the tabs - NOT to position the visible tab correctly, but rather to REMOVE the invisible tabs from the layout of the page, leaving the visible tab and the summary ONLY in the layout of the page - and the result is as wanted.

See JavaSpyder's https://jsfiddle.net/JavaSpyder/fq43Lhez/ which also fixes an issue with the width of the right panel (my original solution is at https://jsfiddle.net/jvw8j62t/ ).

Again, thanks to JavaSpyder and Dhaval Chheda - could not have done it without you.

James Carlyle-Clarke
  • 830
  • 1
  • 12
  • 19