I have four cards that are visible on top of the page. The height of the card changes according to the text inside it. The cards resize when the window is resized as well. I want to make sure that all the cards in a row have the same height.
Stackblitz demo: https://stackblitz.com/edit/angular-xv3syn
What I'm trying to do is to get the max-height among the cards, and set the same height for other cards. What is the best way to achieve this?
Add this in you column item
.col-md-6{
display:grid;
}
you can do this with CSS property display: flex;.
i just change column size now you can see all have same size, you can get this thing by assign appropriate size to each column
Related
I'm experimenting with making a nicer grid/list container. I'll have a bunch of objects to be displayed in a container, and I want to see them either in list view (where each item takes up 100% of the width and, say, 70px height) or grid view (where each item takes up, say, 100px width and 100px height). I made them all display: inline-block too, since they'll automatically position themselves appropriately (assuming the container div is the same width as one list item, which it is).
I want to make a smooth transition between them, so I made a fiddle to experiment. This does a good job in animating the size changes for each div, but there's a jarring height transition whenever a row of objects gets either too big or too small for its current row and adds/removes an object. My question is; is there a simple way to animate the objects to their end positions? For example, the sixth object which is at the bottom of the list view would reposition itself to the bottom right of the container in grid view.
I would like to float a set of divs to make a fluid layout. And I would love to do it with pure CSS and no js if possible for performance/complexity reasons.
Currently, we have 3 divs per row and the surrounding element stretches vertically to accommodate the the tallest div. But of course when I make the page narrower or wider, I always have 3 divs per row.
With floated divs that don't have row containers, it looks great as long as all the divs have the same height. But if the 2nd div in a 2-div row is shorter than the first, then the next row's 1st div gets 'stuck' to the right of that 1st taller div, leaving the first spot in the 2nd row empty.
A solution might be to bring back row divs and use javascript to shuffle item divs between them, but that might be complicated and error-prone. But maybe that's the only possibility.
The one thing I can't do is use fixed height for the item divs, because that would require setting the fixed height large enough for the largest possible item div, which would leave a bunch of empty space for every other div.
I guess another possibility might be using fixed height, then use js to adjust those heights to eliminate extra space.
Make the display:inline-block and remove the float. Height will become optional as well, they'd just align to the tallest one.
If possible try switching to flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox has great visuals to illustrate how various flex styles work.
For example, you could use flex-wrap: wrap; to handle the case when the page becomes too narrow, and use align-items: stretch so they all have the same height
I have Kendo UI Grid witch one locked column, which has dynamic width and height. The Grid's container is resizing in CSS and I'm using kendo.resize($("#grid")) to fit Grid to it and everything works perfecly.
I have also a function triggered on window resize event which is adjusting the columns widths. Colums should occupy whole grid without showing bottom scrollbar if it's possible, but they also have minimum height. So I calculate the columns widths and set it to them, but when I have horizontal scrollbar in the unlocked colums container, the locked container do not match to it.
Normally locked columns shows white area in bottom if there is horizontal scrollbar but when I set the columns widths explicitly it woluld not.
I've reproduced my issue in this fiddle (it's a little simpler than I describe but idea is the same): http://dojo.telerik.com/ADaqe
When i open it grid should looks ok, but when you'll decrease width of right iframe and horizonal scrollbar will show - white area is not shown and just try to scroll the grid to the bottom and see what happen:
Any help would be appreciated.
There is private grid function ._adjustLockedHorizontalScrollBar() which doing exacly what I needed:
$(window).on('resize', function () {
that._adjustLockedHorizontalScrollBar();
...
});
Here is updated fiddle: http://dojo.telerik.com/ADaqe/4
If you only want to use CSS to fix this, adding padding-bottom: 100% to the table inside the locked column worked for me.
.k-grid-content-locked {
height: 100% !important; // overrides inline style
table {
padding-bottom: 100%;
}
}
Tested in Chrome 75.0.3770.100, IE 11.76517134.0, Android 8 and iOS 12.2
Hope this helps
I have a container div which contains other divs(list items).
The size of this container div should equal heights of 30 items.
If there are more than 30 items in container div, it should stay the same size, but show vertical scrollbar.
Question:
Is there a way to style this container div by CSS so that only after more than 30 list items will be added, the scroll would appear?
Or I have to "hardcode" the height of the container div in CSS which would be list_item*30. Or other possibility: use JavaScript to dynamically change height of
container on initialization depending on list item height. Are these are the only correct
ways to do this?
Thank you.
If every item in the list has the same height "hardcoding" might be the easier way to do this. Just set a height of item_height*30 to the div and have overflow:auto.
Mention CSS height to parent div and overflow-y to scroll.
here i take two divs height for parent div.
Example Here
enter code here
http://jsfiddle.net/2C7qH/
This looks like one of those things that should have a simple answer, however I could not find any solution for it...
I have a table that contains several select elements, which have some text labels in front, on the same line.
I want to maximize the width of the select until the end of the td element.
I cannot use fixed widths.
If I use width=100% then the select will push the label out on a different line. By default, the select width is equal to the width of the longest option.
Here is how the default works: http://goo.gl/KiSGcK
Ideally, this should work with select2 also, where the default width is set to the width of the first option.
I have tried wrapping the select and/or the label in divs, setting different css options (float, display inline, etc) with no success. Any ideas?
Try to set float: left; for your label and table also. Then set them with width in percent that total is 100%. Like this label(width:40%) and table(width:60% except the border).
Finally found a solution: use overflow: hidden.
Here it is: http://goo.gl/mXNRZN