We Keep Coding

Dynamically sizing elements based on row in flexbox

I am trying to dynamically change button sizes based on which row each element falls in a flexbox container, similar to this:
Internet Radio Genre example
I am using ReactJS and have created an array containing various genres, which I hope to be resized. I am mapping over the array to create each button like so:
class ButtonContainer extends React.Component {
constructor(props) {
super(props);
};
render() {
let items = this.props.data;
let anItem = items.map((item, i) => {
return (
<button className='singleButton'>{item}</button>
)
});
return (<div className='buttonContainer'>{anItem}</div>)
}
}
and the CSS:
.buttonContainer {
display:flex;
flex-flow: row wrap;
justify-content: space-around;
margin-top:1.5rem;
}
I am wondering if there is a way to select which items that fall after a specific breakpoint with JS or CSS? There may just be a totally different way to go about this that has not occurred to me also.
JSFiddle example
Thanks!

In JavaScript you can get the current location of an element in a variety of ways. One of those is element.getBoundingClientRect(). Once you can have the Y location on the page for the element, <button> elements in this case, you can determine where the row breaks are.
In the code below, the row breaks are determined when the Y location value changes by more than slopY from one element being changed to the next. We know that we start at the top row and proceed right to left, top to bottom. It will also work for left to right display. Only the top to bottom traversal matters. The key is that we know we handle all buttons in the first row prior to encountering any in the second row, etc.
The code applies a different class to the elements (<buttons>) in each row. In addition, for testing, it changes the height and applies a different background color to the buttons in each row.
The buttons are not automatically maintained with the correct class (or the size and color applied for testing) when the layout changes. Thus, you will need to re-run applyRowClassesMultipleTimes() if the buttons change layout (e.g. the container they are in is resized). This can be dealt with by adding an appropriate event handler.
In briefly trying, I did not get ReactJS to run with your code in a Stack Overflow snippet. Thus, for the snippet below, I just copied the DOM that your code generates in the JSFiddle you linked.
The code below is also available as a JSFiddle, which includes your ReactJS code.
function applyRowClasses(buttonSelector,rowClassBase){
//The selector passed as the first argument should select all elements for which
// it is desired to have the class applied.
//The second argument is the text portion of the class to be applied. The row
// number (0 at the top) will be appended to that text for the class of each row.
// (e.g. 'row' will result in classes 'row0', 'row1', 'row2', etc.)
var children = document.querySelectorAll(buttonSelector);
var replaceRowRegExp = new RegExp('\\s*' + rowClassBase + '\\d+(\\b|$)','g');
var child;
var testColor = ['red','orange','yellow','green','blue','purple','crimson'
,'cyan','lightgreen','lightblue','Fuchsia'];
var row = -1;
var rowY = 0;
var slopY = 5;
var newHeight = 120;
var newHeightDelta = -10;
for(var i=0,numChildren=children.length;i<numChildren;i++) {
child = children[i];
var rect = child.getBoundingClientRect();
if(rect.top > rowY+slopY){
//New row
row++;
rowY = rect.top;
newHeight += newHeightDelta;
}
var childClass = child.className;
//Remove any old row class. Need to do this because we would need to re-apply
// these classes when the window size changes, or if the layout changes
// in response to the changes we are making here.
childClass = childClass.replace(replaceRowRegExp,'');
childClass += ' ' + rowClassBase + row;
child.className = childClass;
//For testing change background color and height
child.style.backgroundColor = testColor[(row % testColor.length)];
child.style.height = newHeight + 'px';
}
}
function applyRowClassesMultipleTimes(buttonSelector,rowClassBase,count){
//Our changes may affect the button layout. Change
// multiple times giving the browser a chance to re-draw.
// We could calculate what our changes will be, but it's just as
// easy to iterate a few times.
if(count<=1){
return;
}
applyRowClasses(buttonSelector,rowClassBase);
count--;
setTimeout(applyRowClassesMultipleTimes,0,buttonSelector,rowClassBase,count);
}
applyRowClassesMultipleTimes('#root button','row',4);
#root {
display:flex;
color:#444;
}
.buttonContainer {
display:flex;
flex-flow: row wrap;
justify-content: space-around;
margin-top:1.5rem;
}
<body>
<div xmlns="http://www.w3.org/1999/xhtml" id="root"><div data-reactroot=""><div>Popular Genres</div><div class="buttonContainer"><button class="singleButton">Jazz</button><button class="singleButton">Top 40</button><button class="singleButton">Country</button><button class="singleButton">Blues</button><button class="singleButton">Easy Listening</button><button class="singleButton">Rock</button><button class="singleButton">Classical</button><button class="singleButton">Chillout</button><button class="singleButton">80s</button><button class="singleButton">Oldies</button><button class="singleButton">Dance</button><button class="singleButton">Ambient</button><button class="singleButton">Reggae</button><button class="singleButton">Trance</button><button class="singleButton">Hip Hop</button><button class="singleButton">Smooth Jazz</button><button class="singleButton">70s</button><button class="singleButton">House</button><button class="singleButton">Lounge</button><button class="singleButton">Drum and Bass</button><button class="singleButton">Metal</button><button class="singleButton">Meditation</button><button class="singleButton">Heavy Metal</button><button class="singleButton">60s</button><button class="singleButton">Techno</button><button class="singleButton">Pop</button><button class="singleButton">Soul</button><button class="singleButton">90s</button><button class="singleButton">Psytrance</button><button class="singleButton">Latin</button><button class="singleButton">Funk</button><button class="singleButton">Rap</button><button class="singleButton">Bollywood</button><button class="singleButton">50s</button><button class="singleButton">Hindi</button><button class="singleButton">Rockabilly</button><button class="singleButton">Minimal</button><button class="singleButton">Greek</button><button class="singleButton">Comedy</button><button class="singleButton">Alternative</button><button class="singleButton">Reggaeton</button><button class="singleButton">New Age</button><button class="singleButton">Salsa</button><button class="singleButton">Bluegrass</button><button class="singleButton">edm</button><button class="singleButton">Manele</button><button class="singleButton">Indie</button><button class="singleButton">Japanese</button><button class="singleButton">Dancehall</button><button class="singleButton">Classic Rock</button><button class="singleButton">Disco</button><button class="singleButton">Dubstep</button><button class="singleButton">Folk</button><button class="singleButton">goth</button><button class="singleButton">Punk</button><button class="singleButton">Garage</button><button class="singleButton">New Wave</button></div></div></div>
</body>
The following is what the buttons look like without applying the color and sizes:
#root {
display:flex;
color:#444;
}
.buttonContainer {
display:flex;
flex-flow: row wrap;
justify-content: space-around;
margin-top:1.5rem;
}
<body>
<div xmlns="http://www.w3.org/1999/xhtml" id="root"><div data-reactroot=""><div>Popular Genres</div><div class="buttonContainer"><button class="singleButton">Jazz</button><button class="singleButton">Top 40</button><button class="singleButton">Country</button><button class="singleButton">Blues</button><button class="singleButton">Easy Listening</button><button class="singleButton">Rock</button><button class="singleButton">Classical</button><button class="singleButton">Chillout</button><button class="singleButton">80s</button><button class="singleButton">Oldies</button><button class="singleButton">Dance</button><button class="singleButton">Ambient</button><button class="singleButton">Reggae</button><button class="singleButton">Trance</button><button class="singleButton">Hip Hop</button><button class="singleButton">Smooth Jazz</button><button class="singleButton">70s</button><button class="singleButton">House</button><button class="singleButton">Lounge</button><button class="singleButton">Drum and Bass</button><button class="singleButton">Metal</button><button class="singleButton">Meditation</button><button class="singleButton">Heavy Metal</button><button class="singleButton">60s</button><button class="singleButton">Techno</button><button class="singleButton">Pop</button><button class="singleButton">Soul</button><button class="singleButton">90s</button><button class="singleButton">Psytrance</button><button class="singleButton">Latin</button><button class="singleButton">Funk</button><button class="singleButton">Rap</button><button class="singleButton">Bollywood</button><button class="singleButton">50s</button><button class="singleButton">Hindi</button><button class="singleButton">Rockabilly</button><button class="singleButton">Minimal</button><button class="singleButton">Greek</button><button class="singleButton">Comedy</button><button class="singleButton">Alternative</button><button class="singleButton">Reggaeton</button><button class="singleButton">New Age</button><button class="singleButton">Salsa</button><button class="singleButton">Bluegrass</button><button class="singleButton">edm</button><button class="singleButton">Manele</button><button class="singleButton">Indie</button><button class="singleButton">Japanese</button><button class="singleButton">Dancehall</button><button class="singleButton">Classic Rock</button><button class="singleButton">Disco</button><button class="singleButton">Dubstep</button><button class="singleButton">Folk</button><button class="singleButton">goth</button><button class="singleButton">Punk</button><button class="singleButton">Garage</button><button class="singleButton">New Wave</button></div></div></div>
</body>

Targeting :first-letter of :after content pseudoelement

I have a pseudoelement :after content defined in CSS.
div:after {
content:'This is the sentence.';
}
Can anyone please advise me how to target the first character of the content and change its style. Jquery is OK but I'm trying to do it with first* pseudoelement.

The only time :first-letter could possibly match the first letter of an :after pseudo-element is if the pseudo-element is inline, and there is no other content preceding the pseudo-element (at least in the usual LTR writing mode anyway). Furthermore, pseudo-elements cannot contain their own pseudo-elements, so you couldn't do :after:first-letter either.
If your div element has content, then you won't be able to do this using an :after pseudo-element. You will need to use an actual child element instead. You can easily generate one using jQuery's .append() method, but if you want to target :first-letter of that element, you will need to display it as either block or inline-block instead of inline:
$('div').append('<span class="after">This is the sentence.</span>');
div > .after {
display: inline-block;
}
div > .after:first-letter {
color: red;
}

You won't be able to do anything like div::after::first-letter for the time being, but you can achieve the same end-results relatively easily by merely creating the content you wish to manipulate, and injecting it into your DOM where the div::after pseudo elements would have been placed had they been used:
(function () {
var aftr = document.createElement( "div" ),
divs = document.querySelectorAll( "div" );
aftr.className = "after";
aftr.textContent = "This is the sentence.";
for ( var i = 0; i < divs.length; i++ ) {
divs.item(i).appendChild( aftr.cloneNode( true ) );
}
}());
With these elements now in place, you can move on to styling them:
.after:last-child::first-letter {
color: red;
padding: .5em 1em;
border: 1px solid red;
}
Fiddle: http://jsfiddle.net/jonathansampson/7gmbvewh/
One thing that immediately makes me uncomfortable is the distance between the markup and the text you want displayed within these elements. You could place the text within the markup as a data attribute:
<div data-after="After content">Original Content</div>
And then use that (if it exists) in the final loop:
for ( var i = 0; i < divs.length; i++ ) {
var clone = aftr.cloneNode( true ),
after = divs.item(i).dataset.after;
if ( after ) {
clone.textContent = after;
}
divs.item(i).appendChild( clone );
}
Fiddle: http://jsfiddle.net/jonathansampson/7gmbvewh/2/

If this is a feature question, then the answer is:
Unfortunatelly you can't target and manipulate with pseudo-elements.
But there are workarounds (don't use :after, but actual elements), read the comments under your question.

How to create new div when the content is overflowing past the fixed height of the div?

CSS
.page{
width: 275px;
hight: 380px;
overflow: auto;
}
HTML
<div class="page">dynamic text</div>
How to create a new div when the dynamic text is overflowing past the fixed height of the div?
Example:
<div class="page">Some dynamic texts will appear here</div>
When the dynamic text is overflowing past the fixed height of the div, the content above will be appear like this.
<div class="page">Some dynamic</div>
<div class="page">texts will</div>
<div class="page">appear here</div>
I've tried using wordwrap function in PHP wordwrap($dynamic_text, 600, '</div><div class="page">'); it's can running, but it had a problem when the character was copied from Ms.Words.
So, by detecting the overflowing text, cut it, and then paste it into the new div element is the better solustion, i guess. But, I don't know how to do this solution using JQuery or Javascript.
Any ideas? Thanks in advance!

You can do it, and it's way more than just a couple lines of code. It took a very experienced developer a couple days. Sorry, can't share the code.
Javascript: Put the whole content into the div. You may keep it hidden or out of the DOM for a while. Traverse the div's children. Find the one whose top+scrollHeight exceeds the div's height. Traverse it recursively. Eventually, you will either find an indivisible element, e.g., an image, that doesn't fit, or a position within a text node to split the text at. Remove that part and all further elements from the div. Add them to a new one.
There are a lot of details to address, so it's not simple. But doable.

I just had something similar working today while I was searching for an answer but there doesn't seem to be anything straight forward.
Although I am using Array.reduce() you should be able to do this with Array.forEach() or any other iterating code you like.
words.reduce(function(acc, value)
This is done by calculating if the element will overflow if we add another word to it before we actually render it. The hacky thing here is to add another block element inside of it with visibility: hidden.
element.innerHTML = '<div style="visibility: hidden; height: 100%; width=100%">' + textToBeAdded + '</div>';
That way the block element still takes its parents dimensions and the parent element can be checked for overflow.
The way to check for overflow is to compare the element's scrolling height to its height:
if (element.scrollHeight > element.offsetHeight)
If it overflows we leave it as is and create a new element and put the current value (word) in the iteration. Then we attach it to the same DOM tree as the previous element (as its parent's child... like having a new brother 😜)
var newPageEl = document.createElement('div');
newPageEl.classList = 'page';
newPageEl.textContent = word;
parentElement.appendChild(newPageEl);
Hope this makes sense.
var page = document.getElementsByClassName('page')[0];
if (page.scrollHeight > page.offsetHeight) {
// is overflowing
fixOverflow(page);
}
function fixOverflow(element) {
var words = element.textContent.split(' ');
// delete previous text content
element.textContent = '';
words.reduce(function(acc, value) {
// store current element's text
var currentElementText = element.textContent.toString().trim();
var textToBeAdded = currentElementText + ' ' + value;
element.innerHTML = '<div style="visibility: hidden; height: 100%; width=100%">' + textToBeAdded + '</div>';
if (element.scrollHeight > element.offsetHeight) {
// is overflowing with the new word
element.innerHTML = "";
// leave the last page element as is
element.textContent = currentElementText;
// create another element with the new value to be added
// ** IMPORTANT replace the memory of the previous element variable
element = createPageElement(value);
// add it to the same DOM tree as the previous page element
page.parentElement.appendChild(element); // could also be document.getElementById('page-container').appendChild(element);
} else {
// if not overflowing add another word
element.innerHTML = currentElementText + ' ' + value;
}
}, "");
}
function createPageElement(text) {
// create element with class page
var newPageEl = document.createElement('div');
newPageEl.classList = 'page';
newPageEl.textContent = text;
return newPageEl;
}

CSS: Suppressing negative margins of child elements

I have a parent element (e.g. a div) which surrounds some dynamic content. I would like the parent div to fully contain the child elements in as many circumstances as possible.
One problem is child elements with negative margin settings, which cause the child element to be displayed outside of the parent element (and also cause the parent element not to be of the desired size).
So
Is there any css trick that can be applied to the parent in order to suppress the negative margins in the child elements (e.g. without having to modify the styles on the child).
Failing that, is there anyway to detect via javascript whether a particular element has overflowing content? (and in which direction and to what degree the content is overflowing?)

Did you try to put a class to the parent like:
.parentDiv > * {
margin:0 !important;
}
To have the parent with the desired height, you need to set some css too:
.parentDiv{
overflow:hidden;
position:relative;
background:#DFE;
padding:5px;
}

There is a javascript method of handling this, but it's certainly not as clean as #Mic's CSS solution. I haven't completely tested this, and you may need to add some support for various padding/margin adjustments, but it would get somebody started if a JS-solution was the only option. Using prototype.js (jquery would be similar, but plain javascript will be very.. stretchy):
function checkOverflow (child) {
child = $(child);
if (child.descendants().any()) {
child.getElementsBySelector("> *").each(function(e) {
checkOverflow(e);
});
}
var parent = child.up();
var child_left = child.cumulativeOffset()['left'], child_top = child.cumulativeOffset()['top'];
var child_height = child.getDimensions()['height'], child_width = child.getDimensions()['width'];
var parent_left = parent.cumulativeOffset()['left'], parent_top = parent.cumulativeOffset()['top'];
var parent_height = parent.getDimensions()['height'], parent_width = parent.getDimensions()['width'];
if (child_top < parent_top) {
if (child_left < parent_left) {
// adjust element style here
} else if (child_left > parent_left + parent_width) {
// adjust element style here
}
} else if (child_top > parent_top + parent_height) {
if (child_left < parent_left) {
// adjust element style here
} else if (child_left > parent_left + parent_width) {
// adjust element style here
}
}
}
My general feeling, though, is that you should only do this if it can't be explicitly done through CSS.

Need to find height of hidden div on page (set to display:none)

I need to measure the offsetHeight of a div that is inside of a hidden element.
<div id="parent" style="display: none;">
<div id="child">Lorem Ipsum dolor sit amet.</div>
</div>
The parent div must be set to "display:none". I have no control over that. I realize that the offsetHeight of the child div is going to be 0. I need to find a workaround.
Something I've toyed with is when the page loads, I copy the childnodes of parent, inject in a div on the page that is set to "visiblity:hidden". Then I measure the height of those elements, and remove the nodes when done.
Any other thoughts?
Update:
What I wound up having to do was this:
Using YUI 2, on page load, I found all elements of that given classname that were either set to display:none, or whose height and width was 0 (that's one way of measuring whether an element exists, or a parent is set to display:none). I then set that element to display:block. I then checked it's parent for the same thing and showed the parents until it finds a visible parent. Once highest display:none ancestor is set to display:block, I can measure my element.
Once all elements are measured I reset all of the elements back to display:none.

You need to make element's parent visible for that one very short moment while you're getting element's dimensions. In a generic solution, all ancestors are usually traversed and are made visible. Then their display values are set back to original ones.
There are performance concerns of course.
We considered this approach in Prototype.js implementation but ended up with getWidth and getHeight making only actual element visible, without traversing ancestors.
The problem with alternative solutions - such as taking element out of "hidden" parent - is that certain styles might no longer apply to an element once it's out of its "regular" hierarchy. If you have a structure like this:
<div class="foo" style="display:none;">
<div class="bar">...</div>
</div>
and these rules:
.bar { width: 10em; }
.foo .bar { width: 15em; }
then taking element out of its parent will actually result in wrong dimensions.

If you use style.display = "none", the element will have 0 width and height,
but using the style.visibility = "hidden" instead, the element will have the width and height calculated by the browser (as normally).

A workaround is to set the height to 0
.hidden {
height: 0;
overflow: hidden;
}
Then to get the elements scrollHeight.
document.querySelector('.hidden').scrollHeight
The scrollHeight will correctly give you the height though the element does not appear. I don't think it affects element flow either.
Example: https://jsfiddle.net/de3vk8p4/7/
Reference: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements#How_big_is_the_content.3F

You could clone the element, absolutely position it at -10000,-10000, measure the clone and destroy it.

Made a pure js solution with no Jquery and with no cloning (which I guess is faster)
var getHeight = function(el) {
var el_style = window.getComputedStyle(el),
el_display = el_style.display,
el_position = el_style.position,
el_visibility = el_style.visibility,
el_max_height = el_style.maxHeight.replace('px', '').replace('%', ''),
wanted_height = 0;
// if its not hidden we just return normal height
if(el_display !== 'none' && el_max_height !== '0') {
return el.offsetHeight;
}
// the element is hidden so:
// making the el block so we can meassure its height but still be hidden
el.style.position = 'absolute';
el.style.visibility = 'hidden';
el.style.display = 'block';
wanted_height = el.offsetHeight;
// reverting to the original values
el.style.display = el_display;
el.style.position = el_position;
el.style.visibility = el_visibility;
return wanted_height;
}
here is the demo
https://jsfiddle.net/xuumzf9k/1/
Please let me know if you can find any improvements to this (as I use this in my main projects)

So here's working jQuery solution based on lod3n's answer and with help of 999's comment:
var getHiddenElementHeight = function(element){
var tempId = 'tmp-'+Math.floor(Math.random()*99999);//generating unique id just in case
$(element).clone()
.css('position','absolute')
.css('height','auto').css('width','1000px')
//inject right into parent element so all the css applies (yes, i know, except the :first-child and other pseudo stuff..
.appendTo($(element).parent())
.css('left','-10000em')
.addClass(tempId).show()
h = $('.'+tempId).height()
$('.'+tempId).remove()
return h;
}
Enjoy!

A helper function ---
function getElementHeight(el) {
var clone = el.cloneNode(true);
var width = el.getBoundingClientRect().width;
clone.style.cssText = 'position: fixed; top: 0; left: 0; overflow: auto; visibility: hidden; pointer-events: none; height: unset; max-height: unset; width: ' + width + 'px';
document.body.append(clone);
var height = clone.getBoundingClientRect().height + 'px';
clone.remove();
return height;
}
Creates a clone, appends it to the DOM (hidden), takes the height, then removes it.
Position of fixed and the top/left are in case your app allows scrolling at the body-level - it attempts to prevent a scrollbar rave party - can remove if you handle scrolling in children elements.
Overflow, height, and max-height settings to attempt to 'reset' height settings and let it be it's natural height on the clone.
Visibility for the obvious and pointer-events as a 'just in case' the rendering of the element takes a while and don't want to interrupt user-input.
An example having an 'accordion-like' animated open/close allowing for dynamic heights.
function getElementHeight(el) {
var clone = el.cloneNode(true);
clone.style.cssText = 'position: fixed; top: 0; left: 0; overflow: auto; visibility: hidden; pointer-events: none; height: unset; max-height: unset';
document.body.append(clone);
var height = clone.getBoundingClientRect().height + 'px';
clone.remove();
return height;
}
var expanded = false;
var timeout;
function toggle() {
var el = document.getElementById('example');
expanded = !expanded;
if (expanded) {
el.style.maxHeight = getElementHeight(el);
// Remove max-height setting to allow dynamic height after it's shown
clearTimeout(timeout);
var openTimeout = timeout = setTimeout(function() {
el.style.maxHeight = 'unset';
clearTimeout(openTimeout);
}, 1000); // Match transition
} else {
// Set max height to current height for something to animate from
el.style.maxHeight = getElementHeight(el);
// Let DOM element update max-height, then set to 0 for animated close
clearTimeout(timeout);
var closeTimeout = timeout = setTimeout(function() {
el.style.maxHeight = 0;
clearTimeout(closeTimeout);
}, 1);
}
}
#example {
overflow: hidden;
max-height: 0;
transition: max-height 1s;
}
<button onclick="toggle()">Toggle</button>
<div id="example">
<textarea>Resize me</textarea>
</div>

In the JS please use 'scrollHeight'
Example Code
Assume that this div is hidden in DOM
<div class="test-div">
//Some contents
<div>
Javascript to find this div height
const testHeight = document.querySelector('.test-div');
testHeight.scrollHeight

Use z-index to hide element under non-transparent element, show it, and get height.

Until the element is rendered, it has no height. Even if you clone the parent object and display it somewhere that can't be seen by the user, there's not guarantee that the clone will have the same height as the final size of the hidden object.
There are many things that can affect the height that wouldn't necessarily be rendered in the clone - anything in the DOM and its interaction with the CSS rules could cause a change in rendering any other element of the DOM. Short of cloning the entire document (and even that's not fool-proof) you have no way of determining the height of the hidden object.
If you must know the height before it's displayed to the user, you'll have to "hack" it by displaying it for as short of a time as possible then hiding it again. Most likely, the user will see this hiccup and not be pleased by the result.

So, you cannot even change the display:none; to height:0; overflow:hidden; ? Maybe you could override that in your own stylesheet like so:
div#parent { display: block !important; height:0; overflow:hidden; }
And then as you are using YUI (assuming YUI 2) you could use this:
var region = YAHOO.util.Dom.getRegion('child');
To get the dimensions and offset of the child.

Try to use:
#parent{ display:block !important; visibility:hidden; position:absolute}

What I wound up having to do was this:
Using YUI 2, on page load, I found all elements of that given classname that were either set to display:none, or whose height and width was 0 (that's one way of measuring whether an element exists, or a parent is set to display:none). I then set that element to display:block. I then checked it's parent for the same thing and showed the parents until it finds a visible parent. Once highest display:none ancestor is set to display:block, I can measure my element.
Once all elements are measured I reset all of the elements back to display:none.

Did you try this ?
setTimeout('alert($(".Var").height());',200);