CSS Gurus in here

PaulStat · 28 Mar 2017 at 21:48

I've been playing with Bootstrap/CSS/JQuery to create a layout similar to the Java Swing BorderLayout. What I also wanted was for the north, south, east, west sections to be collapsible.

I think I'm almost there. Here's the fiddle https://jsfiddle.net/vgsausm7/21/ you'll need to pull the central divide to the left to expand the preview area so that it doesn't stack

Issues I have

1. The North/South transitions aren't nice and smooth like the West transition. What am I doing wrong here?

2. What's up with the East button, I can't click it but I can't spot any difference between this and the other buttons which are clickable

DodgeeRascal · 28 Mar 2017 at 22:10

Disclaimer: Not a CSS Guru but maybe I can help with No.2

The North button is basically on-top of the East button

.top {

top: 0px;
right: 0px;
/* bottom: 0px; */
left: 50%;
position: absolute;

}

removing the bottom: 0px; fixes it for me in Chrome

.

Dup · 29 Mar 2017 at 00:12

1) You cannot animate display:none with CSS alone, hence why it closes instantly. Check out the answers here:

http://stackoverflow.com/questions/13037637/css3-animation-and-display-none

2) As above

gord · 29 Mar 2017 at 10:24

You can also add overflow: hidden; to your html, body, .sidebar, #content selector to stop the scrollbars popping up briefly.

PaulStat · 3 Apr 2017 at 09:52

Thanks guys got it working in the end