We Keep Coding

Collapsible Sidebar Without Visible Reflow on Content Inside

I have a 3 column layout where I want the left and right columns to be collapsible. I want the following:
A smooth slide
Sidebars that have a percentage width
No visible reflow on the sidebar content
No white-space: nowrap;, as this will mess with the display of the sidebar content.
Allow for complex content inside the sidebar, not just simple text in a <p> tag as in the codepen example below.
No hardcoded pixel widths - I know you can add a width on an inner div together with overflow:hidden on the parent, but I don't want to hardcode a large width.
I need the sidebar widths to be relative to the immediate parent (and not the viewport), in case the 3-column layout needs to be within a section of a page (in fact in my scenario that's the case).
Note that the I've tried transitioning on the width property in this codepen, but you can see the visible reflow of content inside the sidebar. Here's a .gif of it:
Ideally I'd like to do this without using JavaScript for the animation, but I'm open to it if there are no other good solutions.

One way to do this I would say is to give a % based width to your pabel-content.
Add these two properties to the class like this
.panel-content {
min-width: 300px;
}
This should remove the wrapping while animation.

Scroll element inside div that's scrollable into view

I have a little bit of a problem I'm a beginner programmer and writing my first web app, I came across a little bit of a problem.
I have a parent div with a height of 300px and inside that div I have 20 child divs and every single one of them has different id attribute and one div gets a special class that changes his appearance. I want that div always be seen by user so they don't have to scroll to find it.
I tried:
const renderStandings = (team,teamID) =>{
let cssClass = "team-standing";
if(team.team.id === teamID){
cssClass = "team-standing favouriteTeam";
}
HTML markup
const markup = `
<div class="${cssClass}" data-teamID="${team.team.id}">
<div class="team-position"><p>${team.position}</p></div>
<div class="team-crest"><img src="src/img/logos/${team.team.id}.svg"></div>
<div class="team-name"><p>${team.team.name}</p></div>
<div class="team-gamesplayed"><p>${team.playedGames}</p></div>
<div class="team-goaldiffrence"><p>${team.goalDifference}</p></div>
<div class="team-points"><p>${team.points}</p></div>
</div>
`;
document.querySelector('.league-standings').insertAdjacentHTML('beforeend',markup);
Scroll into view
if(document.querySelector('.favouriteTeam')){
var el = document.querySelector('.favouriteTeam');
el.scrollIntoView({
behavior: 'auto',
block: 'center',
inline: 'center'
});
}
}
}
That scrolls that div into the view exactly how I wanted it to, but it also scrolls the whole website to the parent div and I don't want that.
QUESTION
So the question is how do I scroll that div into view without scrolling the whole website. Preferably I would love to have answer in vanilla JS because that's what I'm practicing at the moment, and I don't plan to learn any frameworks until I'm comfortable with JS.
Illustrated result of what I want to achieve:
This is now and it scrolls the whole website
This is how I want it to be
[2]: https://i.stack.imgur.com/Ldg3N.jpg

Inside my problem the answer was to use (scrollTop). Since every child div had 50px height I added atribute postition that gave me the position of element that I wanted to center (1-20), thanks to that I could calculate value of scrollTop for the element to be exacly in the center of scrollable div. Since 7 of them is already visible i started at 8th position.
if(document.querySelector('.favouriteTeam').getAttribute('data-teamposition')>7){
document.querySelector('.league-standings').scrollTop = 200 + ( 50 * (document.querySelector('.favouriteTeam').getAttribute('data-teamposition') - 8 ));
}

Resizable divs within a container w/o Jquery

Ok - So I am kind of struggling with this. I am trying to achieve something pretty straight forward I think. I need 3 resizable divs within a fixed width container div without using Jquery. The resize needs to occur for all divs only horizontally as they all have the parent divs height. Here is the layout
<div id="container">
<div id="m1">M1</div>
<div id="m2">M2</div>
<div id="m3">M3</div>
</div>
My object here is to wrap this into a ReactJS component and therefore not wanting to muddy the waters with Jquery. Any help/direction would be most appreciated. If someone can mock up something like this in React, that would be awesome too! :)
Not sure whether this can be a CSS only solution but I am open to ideas
Thanks

Your question isn't exactly clear to me, if your container div is fixed width (as in a constant value) then your child divs should not resize dynamically no matter what the width of anything beyond the container is.
The only other way I could interpret your question, is that you need some sort of grid system, where you can drag to resize the width of the child divs within the confines of the container. In that case, I might be wrong but I don't think the solution is that simple, you might want to take a look at this package: https://github.com/STRML/react-grid-layout
More specifically, their simplest implementation allows you to define a fixed width container (1200 in this case) like so:
<ReactGridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}>
<div key={'a'}>a</div>
<div key={'b'}>b</div>
<div key={'c'}>c</div>
</ReactGridLayout>

If you want to fix the parent div's size and then have the inner divs automatically resize based on the parent div you can use the flex box layout which you can find here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
In your case you can set the styling of the first div to:
.container {
display: flex;
}
And for the children (in your case identified by m1, m2, and m3) you need to set the css property flex-grow to how big do you want it to be relative to the others. Say, if you want m1 and m2 to have the same size and m3 to be twice as big, you would do the following:
#m1, #m2 {
flex-grow: 1;
}
#m3 {
flex-grow: 2;
}
Depending on what you want to do, you might want to consider renaming the ids/classes.
In case you are looking to get the exact size of the parent of a div you can do this as following:
render() {
return <div ref="node"></div>
}
componentDidMount() {
const parentWidth = this.refs['node'].parentNode.clientWidth;
// Do whatever you need here (like setting state of the react component)
}

Divs too wide when hiding/showing

I have two divs that contain two other divs each. One containing DIV's display is set to none. I have a button that toggles the containing DIVs so I can alternately hide/show the containing div and thus the two divs inside. The inside DIVs are set the 49% width, floated left/right. Problem I have is the fist time the visible DIV is hidden and the hidden one displayed the inside two divs are way too wide. If I resize the width of the browser just a tiny bit with my mouse they are the desired size and any time I toggle the visibility from here on out all is fine. If I reload the page it is wrong on the first toggle. Works the same in IE 10 and Chrome so don't think a browser issue.
The inner two divs both contain high charts that are generated and rendered to the inner divs I want them to be side by side and almost (99%) the width of my page.
Here is snipped of my DIVs to be hidden and shown that contain the inner DIVs with highcharts
<div id="highChartsNG" style="width:99%;display:none;">
<div id="FillRateHigh" style="border:2px solid black;width:49%;float:left;"></div>
<div id="WaitTimeHigh"style="border:2px solid black;width:49%;float:right;"></div>
</div>
<div id="LowChartsPEAK" style="width:99%">
<div id="FillRateLow" style="border:2px solid black;width:49%;float:left;"></div>
<div id="WaitTimeLow"style="border:2px solid black;width:49%;float:right;" ></div>
</div>
This is a snippet of the javascript function I call on a button click to toggle on/off on the display of two containing DIVs
document.getElementById("highChartsNG").style.display = "none";
document.getElementById("LowChartsPEAK").style.display = "block";
Fiddle showing problem, see comment of mine below on how to reproduce http://jsfiddle.net/rplace/UTTz4/1/

Okay, after hours of searching I finally found the problem (I think). I was determined to find the solution =).
The problem is multiple-fold.
The first problem was the display:none; property on the second chartcontainer. For some reason the widths calculated for the charts and their containers were incorrect for the hidden div. So I removed the property from the HTML, and instead hid it dynamically with document.getElementById("LowChartsPEAK").style.display = "none"; in the JS right after the chart rendering functions. If you do this, your SVG's will fit your containers already, although the last one has a slight shift.
Apparently HighChart doesn't like percentage-based parent containers. When you go to your updated fiddle , run the fiddle with both:
<div id="wrapper" style="width: 800px;">
<div id="wrapper" style="width: 100%;">
Open the console and check the results (container name - SVG width - container width). When the wrapper is given a pixel width, all container widths are equal (as it should be). Now check the wrapper with percentage width: your last SVG will be about 6 to 20 pixels smaller. The only solution I have found for eliminating that small shift in the last container, is that somewhere a top container must have a pixel-width.
EDIT: pt's and em's also work. It's only % that causes problems

If you are hiding DIV, you should be aware that browser won't calculate %-based widths with display:none. Then if browser won;t calculate DIV, then also Highcharts are not able to do it ;)
Check this FAQ - when showing chart update his size or call reflow().

jsPlumb handling elements in a scrollable div container

I am using jsPlumb to connect a bunch of divs (much like a flow chart). All of the divs are contained in one parent div which is scrollable. Sort of like the code below, but with more divs inside the container div.
<div style="height:500px;width:500px;overflow:auto" id="container">
<div id="node1"></div>
<div id="node2"></div>
<div id="node3"></div>
<div id="node4"></div>
<div id="node5"></div>
</div>
My problem is that if I scroll the div, the connecting lines generated by jsPlumb just stay in place and don't scroll with the divs that they are supposed to be connected to. I've tried using jsPlumb.repaint() but still no luck. It appears jsPlumb is not taking into account the scroll offset of the caontainer div. Is there some way to fix this? I really want to avoid having to move the divs being connected out of the container div into the body since this would entail some very annoying css/html recoding.

It turns out that simply using jsPlumb.repaintEverything(); redraws the lines in the correct positions. jsPlumb.repaint() seems to be for repainting the lines for a specific element. For example, jsPlumb.repaint('div_id_goes_here');

Your question/answer helped me. Let me extend it with the code I used:
$('#container').scroll(
function(){
jsPlumb.repaintEverything();
}
)
This will cause the connections to be repainted as you scroll the container. On IE, it has a little delay depending on the scenario (child nodes move and then the connections move).