0

Been working this for too long. Why is COLUMN02 exceeding the browser edge to the right?

Any help would be appreciated. Thank you very much!

Holy Grail Demo

The table expands off the scree to the right.

Details:

  • The goal is to leverage FLEX BOX as much as possible with no scripting. So flex-basis is used for column widths and left/right margins to move the columns on/off screen.
  • Click toggle COLUMN01 in the header to toggle COLUMN01.
  • Click the first row of COLUMN02 table to toggle COLUMN03.
  • Click a link in COLUMN03 to toggle COLUMN04.
  • COLUMN02 and the COLUMN03 widths can be resized via the resizer between them.

What am I missing to cause COLUMN02 to exceed the browser edge to the right?

Is there is a better way of moving these columns around via FLEX BOX?

Any input is greatly appreciated!

enter image description here

html,
body {
    min-height: 100vh; /* force footer to bottom of browser */
    height: 100%;/*for IE11*/
}
.col {
    overflow: hidden; /*enables scrolling for some odd reason*/
    -webkit-transition: 500ms all ease;
    -moz-transition: 500ms all ease;
    -ms-transition: 500ms all ease;
    -o-transition: 500ms all ease;
    transition: 500ms all ease;
    padding: 0;
}
main {
    overflow: hidden;
}

/* CLOSE/OPEN STATES */
.column01 {
    overflow: hidden; /* enables scrolling */
    -webkit-box-flex: 0;
    -ms-flex: 0 0 250px;
    flex: 0 0 250px;
    margin-left: -250px /*positioning does not work well with flex objects*/
}
.column01.open {
    margin-left: 0; /* open by default */
}
.column02 { /* when column03 is closed */
    min-width: 100hv; /* initial width */
    min-width: 150px; /* minimum width */
    -webkit-box-flex: 0 0 auto; /* manual resize */
    -ms-flex: 0 0 auto; /* manual resize */
    flex: 0 0 auto; /* manual resize */
}
.column02.open {/* when column03 is open */
    width: 400px; /* initial width */
}
.splitter {/* enables scrolling */
    -webkit-box-flex: 0;
    -ms-flex: 0 0 10px;
    flex: 0 0 10px;
    margin-right: -10px;
}
.splitter.open {
    margin-right: 0;
}
.column03 {
    min-width: 150px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 0;
    flex: 0 0 0;
}
.column03.open {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
.column04 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 300px;
    margin-right: -300px;
}
.column04.open {
    margin-right: 0;
}

/* OVERWRITES */
.toggle-column03 {
    cursor: pointer;
}
body {
    font-family: Calibri;
}

/* SPLITTER COLUMN */
.splitter {
    cursor: col-resize;
}
.nav-bordered>.nav-item>.nav-link.active,
.nav-bordered>.nav-item>.nav-link.active:hover,
.nav-bordered>.nav-item>.nav-link.active:focus {
    font-weight: 500;
    color: #1997c6;
    border-bottom-color: #1997c6;
}

Thanks again!

brooksrelyt
  • 3,925
  • 5
  • 31
  • 54
D4A60N
  • 187
  • 1
  • 3
  • 14
  • Your script is interfering with your stylesheet – brooksrelyt Dec 14 '18 at 21:27
  • Thanks for responding brooksrelyt. I don't understand what you mean. The scripts are just adding and removing the "open" class. Can you elaborate? Thanks. – D4A60N Dec 15 '18 at 03:41
  • Please add a *running* [mcve] in the question itself. Emphasis on *minimal* (as in: remove ***everything*** irrelevant for the question being asked from your example). Most SO users, me included, do not consider providing an answer if the answer would only help OP. Make your question useful for future visitors and it will be answered. – tao Dec 16 '18 at 01:24
  • @andrei-gheroghiu, Removed everything but the minimal code. So the question is, why does COLUMN02 extend beyond the browser's edge to the right and how to fix it? Thanks again for your time assistance. Fiddle: http://jsfiddle.net/dragontheory/37b8vkoa/ – D4A60N Dec 26 '18 at 04:57

0 Answers0