Develop Reference

is there a way to iterate through array, listing each item in fixed-height container until all available space taken?

Using Vue, I have a div container with fixed height, overflow: hidden, I want to iterate through javascript array, adding each item to the div, and stop when the bottom of the div space is reached. Would also need it to be responsive.
<div class="container">
<div class="header">Header</div>
<div class="body" v-for="item in items">
<div>{{ item.data }}</div>
</div>
<div class="footer">Footer</div>
</div>
.container {
display: flex;
height: 100%;
flex-direction: column;
}
.header {
height: 100px;
}
.footer {
height: 100px;
}
.body {
flex: 1;
overflow: hidden;
}
Maybe you would need to retrieve the height of the container in pixels and divide by font height of your item.data perhaps? In any case the number of items displayed would need to change whenever window is resized in order to make it responsive.

You could do it like you are doing it, and use element.offsetHeight to know when you've gone too far
You could set CSS property max-height to set a max height (you might also want to set the overflow-y property)
You could use a SELECT and set the size attribute on that

Hide divs simultaneously depending on the largest size

I have two divs. Inside each div, there are two divs:
<div class="hide">
<div>
Variable size
</div>
<div>
Text1 (also variable size)
</div>
</div>
<div class="hide">
<div>
Different variable size
</div>
<div>
Text2 (also variable size)
</div>
</div>
If the screen is too small, I want the texts to disappear:
To do it, I used
.hide {
display: flex;
height: 100px;
flex-wrap: wrap;
overflow: hidden;
}
However, if the 1st text is too big, but the second is not, I have something like that:
And I'd like them to be hidden simultaneously.
Is there a way (no jQuery) to do it? Preferably with CSS or SASS, but JS (I use Angular) would also be acceptable.

Use display flex like this
.hide { height: 100px; display: flex; flex-wrap: wrap; overflow: hidden; }

CSS display:grid overflow issue

I am creating a simple web app using angularjs for managing some kind of tickets. Tickets should be displayed in grid (.ticket-container). I am using CSS display: grid and rows and columns are dynamically set based on config file. Setting of the grid columns and rows is done using this code:
vm.getGridStyleDefinition = function () {
return {
"grid-template-rows": "repeat(" + vm.numberOfRows + ", 1fr)",
"grid-template-columns": "repeat(" + vm.numberOfColumns + ", 1fr)"
}
};
The simplified structure of the page is:
HTML
<div class="container">
<div class="flex1">
<div class="ticket-container">
<ticket></ticket>
<ticket></ticket>
<ticket></ticket>
...
</div>
</div>
<div class="menu-bar"></div>
</div>
CSS
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.flex1 {
flex: 1;
align-items: stretch;
display: flex;
}
.ticket-container {
display: grid;
width: 100vw;
grid-template-rows: repeat(5,1fr); // dynamically set
grid-template-columns: repeat(3,1fr); // dynamically set
padding: 1vh;
grid-gap: 1%;
}
.menu-bar {
background-color: blue;
}
My problem is that fractions in grid (1fr), for rows, are not calculated based on the container height, but reather on the content inside the cells. I want to force the content inside the cells to take the space that is available and not to overflow, or to force the grid to squeeze the content.
Here is codepen for this issue: link
If there is another approach to create grid that its cells will not overflow, please suggest.
Thanks in advance

Get screen size to choose matching header picture

Hej,
I had a JavaScript solution for checking the screen size and choosing a matching picture. But I lost this unfortunately.
My Problem: I want to choose a header picture (CSS responsive not possible) regarding to the screen size. Visitor with 1920x1080 will see a picture matching to this size. For usual sizes I will build special header pictures.
When Visitor has JavaScript disabled he should see a standard picture.
Mobile device has it´s own header.
Can anyone please help out…Thanks :)
Best Regards
Madeleine

You have a lot of ways to check the screen size:
If you are using jQuery you can use the screen object in the following way:
screen.width;
You can also get the size of the window or the document using:
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
Here is a cross browser solution with pure JavaScript:
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
Regarding responsive images without using Media Querys, Flexbox is a great Solution:
body { margin: 0; background: #333; }
header {
padding: .5vw;
font-size: 0;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-ms-flex-direction: column;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: flex;
}
header div {
-webkit-box-flex: auto;
-ms-flex: auto;
flex: auto;
width: 200px;
margin: .5vw;
}
header div img {
width: 100%;
height: auto;
}
<header>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-2.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-4.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-5.jpg" alt></div>
</header>
Resize this Codepen to see a Flexbox Responsive Header
If you header image is set as a background image you can set:
background-size: contain
background-size: cover
Hope this can help you.

If you are Using jQuery, you can check the Screen size (when the document structure is ready) and display acoordingly your wanted image:
$(document).ready(function() {
if ($(window).width() < 960) {
$('selector').css({'background-image':'url(images/small-
image.jpg)'});
}
else {
$('selector').css({'background-image':'url(images/big-image.jpg)'});
}
});

Make Buttons stay inline-block when toggled

I've got 3 categories acting as buttons for a toggle function. The categories are
displayed inline-block and have a width of 30% each.
When you click on one of them a paragraph appears underneath, however that causes the other two categories to be displayed underneath that paragraph. I need them to stay in one line though.
Here's the fiddle so you can see what I mean. When you click on 'Test1' the 'Test2' is moved underneath the paragraph but I need it to stay where it is.
Any suggestions how to achieve this?
Edit
I've got the html structure like this as it makes the layout work for mobile devices where the categories are stacked.

I've changed your HTML structure, see this fiddle
HTML:
<div class="Categories">
<p id="Category1">Test1</p>
<p id="Category2">Test2</p>
</div>
CSS:
.Categories p {
width:33%;
display:inline-block;
}
JS :
$('#Category1').click(function(){
$('.moreCategory1').toggle();
});
$('#Category2').click(function(){
$('.moreCategory2').toggle();
});

This problem is easily solved by using a flex container. Not only it solves your problem, it is also easy to change for mobile in responsive web design and it is semantically correct.
HTML:
<div class="categories">
<p id="Category1">Test1</p>
<p id="Category2">Test2</p>
<p id="Category3">Test3</p>
</div>
<div id="more1" class="moreCategory">
<p>Content 1</p>
</div>
<div id="more2" class="moreCategory">
<p>Content 2</p>
</div>
<div id="more3" class="moreCategory">
<p>Content 3</p>
</div>
CSS:
.categories {
display: flex;
width: 100%; /*Not necessary. Make sure its large enough to be clear*/
flex-direction: row;
}
.categories p {
width: 30%;
margin: 2px;
padding: 3px;
text-align: center;
background-color: #000;
color: #fff;
}
.moreCategory {
display: none;
}
For Mobile:
#media (min-width: 600px) {
.categories {
flex-direction: column;
}
.categories p {
width: 100%;
}
}
JQuery:
$('#Category1').click(function() {
if ($('#more1').is(":hidden")) $('#more1').toggle();
if (!$('#more2').is(":hidden")) $('#more2').toggle();
if (!$('#more3').is(":hidden")) $('#more3').toggle();
});
$('#Category2').click(function() {
if (!$('#more1').is(":hidden")) $('#more1').toggle();
if ($('#more2').is(":hidden")) $('#more2').toggle();
if (!$('#more3').is(":hidden")) $('#more3').toggle();
});
$('#Category3').click(function() {
if ($('#more1').is(":hidden")) $('#more1').toggle();
if (!$('#more2').is(":hidden")) $('#more2').toggle();
if (!$('#more3').is(":hidden")) $('#more3').toggle();
});
This should solve your problem. JS Fiddle.
EDIT :
If you really want the heading tabs together, but also applicable for mobile you can hide the selecting controller from my for, i.e., the topmost main div.
Hide the header tags for large screens and the same css applies. For mobiles, hide the control div and show the headers and moreContent divs without any JQuery controls. A simple if statement should do the trick(check for screen size or user agent).