I want to make Bootstrap cards the same height, there should be a max height, the height of the card should not exceed that limit. And the height of the other cards depends on the card which contains more content.
Here is a working sandbox demo
There are two alternative approaches to solving this issue.
You can specify min-height instead of max-height if the cards' data is static (the data won't come from an API) ( https://prnt.sc/mJMl3FSLTNM1 ).
If the data for the cards is dynamic (data from an API), you can use height: 100% for .col.mb-3. ( https://prnt.sc/FW4BqAmnkgJK )
You can do it in following way.
Have a common CSS class on every card.
Set max-height on it.
Set the overflow property for text. So in case it becomes long it will overflow.
Related
Why should you not use max-height to restrict the size of an image?
Both max-width and max-height can be used to restrict the size of en element.
This WC article suggests using max-width to fit the image in its container.
https://www.w3.org/WAI/WCAG21/Techniques/css/C37
Is there any reason not to use max-height to restrict size of an image should you have a web applicatin with vertical content flow?
https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
max-height vs. max-width : the case for setting max-width
Setting both max-height and max-width can change the aspect ratio of the image, which is often not desired
Setting max-width can be used to ensure that the image "fit" horizontally. In most cases this is preferable, as people are used to scrolling web pages vertically, but not so much horizontally.
With that being said, it is up to you to determine which to use based on your requirements
Yes. Some pages have content placed horizontally :)
We have created Cards which can be resized and moved around by the user. In some of these Cards, we want to embed a Datagrid which is supposed to "fill" the available space (e.g. a card-block).
I am able to control the width, but haven't found a way to control the height in my scenario. Here, the Datagrid grows way outside my Card, even pushing down the card-footer.
Here is a StackBlitz example which shows the behavior.
BTW, the trick with "height: 100%" doesn't seem to work in my scenario.
Any help would be appreciated.
As mentioned in my comment, to use height: 100% you need the parent to have a defined height. Except in your case, it's all dynamic up to the card itself, so you have to propagate that height: 100% down to the datagrid. I updated your plunker with this, and it works fine now: https://stackblitz.com/edit/fit-datagrid-in-card
See https://drafts.csswg.org/css2/visudet.html#propdef-height for the height explanation:
<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the used height is calculated as if 'auto' was specified. A percentage height on the root element is relative to the initial containing block.
You are correct that setting the height to a percentage does not seem to restrict it to the card-block itself, but setting to absolute pixels does.
I see in your Stackblitz that you tried to set the height to 300px, but that is still beyond the size of the hosting element. The card itself is set to 400px x 400px, but once rendered, the card-block (where the datagrid is placed) is only 398px x 281px.
Please have a look at this Stackblitz where I set the height of the datagrid to 240px.
In this following code i can't understand the function of max-width?and my instructor have written:"It sets max-width:1170px, because when you add the left and right padding with the max-width, you get 1200px which is our large device breakpoint." I hope u can reply on me.Thanks in advance
The max-width property defines the maximum width of an element. This means that if the width is calculated dynamically, it will never exceed the max-width value, but it could be any value smaller.
In your instructors example, the max-width + the side padding will add up to the screen width. This ensures the maximum width of the element never exceeds the width of the screen.
Hope that helps.
max-width
The max-width property in CSS is used to set the maximum width of a specified element. The max-width property overrides the width property, but min-width will always override max-width whether followed before or after width in your declaration
Using max-width instead of width in this situation will improve the browser's handling of small windows.
This is important when making a site usable on mobile.
By the way, max-width is supported by all major browsers including IE7+ so you shouldn't be afraid of using it.
I have never heard of this intrinsic value before until I come across this page on MDN.
From what I know intrinsic means natural. So how does this work out in CSS. I thought that auto would have been natural. I've searched around a bit but can't find anything on it.
What does it do different than auto?
The example I saw was max-width: intrinsic;
It looks like the intrinsic value is part of the newer CSS3 sizing module:
http://dev.w3.org/csswg/css-sizing/
I have not used it yet but perhaps the reference will provide you with more information.
Based on a quick review, this module would make it easier to specify how content fills the width and height of a parent containing block.
At the moment, JavaScript functions are often used to compute widths and heights of container blocks based on % values for variable child elements content.
It allows you to set the width of an element to stretch wide enough to accommodate its children. So, if a div element contained a wide image and some text, the div would stretch wide enough to accommodate the image, and the text would begin breaking at that threshold.
Definitely experimental and not widely supported: http://caniuse.com/intrinsic-width
Intrinsic sizing determines sizes based on the contents of an element,
without regard for its context.
http://dev.w3.org/csswg/css-sizing/#intrinsic-sizing
I have found that in iOS8, flexbox children may not always try to contain all their children and instead max their height to the available viewport.
min-height: min-intrinsic fixes that problem.
I am working on a web page that used a fixed width layout, centered in the browser. The width of the centered container is set in pixels.
On a couple of pages, there is a large data table inside the content container. In Firefox the table overflows the fixed width container. IE is more complex and will expand the container around the table, and because of some layout issues the container uses overflow:scroll just for IE.
I need to find out if I can use a fixed width on the container, but also allow it to expand to wrap the large data table. I also need to avoid a solution where I would be modifying the HTML... I can't for example use an ID to only target those containers on pages with large tables. I need a pure CSS solution.
My feeling is that this is impossible, and I am going to HAVE to put an ID on those specific containers that need to be larger than the standard. I'm asking here because I really need a second opinion.
Just a note: I have also experimented with min/max-width, without success.
If min-width and overflow don't work, you're going to need css hacks.
If the problem with min-width is that the container is a block-level element and expands to page width, try using a variant of display:inline on that container, so it doesn't stretch. (Or maybe margin.)