This question already has answers here:
Bootstrap 4 square grid
(2 answers)
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 4 years ago.
I'm building some global button classes for a CSS framework, and I'm wondering if there's any way to set an element's width to be the same as the height without hard-coding it.
Here's an example of how it would work:
HTML
<button class="button square-button">OK</button>
<div class="container">
<button class="button large-button square-button">OK</button>
</div>
CSS
.button {
height: 50px;
padding: 0 20px;
}
.square-button {
width: (always-same-as-height);
padding: 0; // Disable padding so it becomes a square
}
...
.container {
height: 100px
.button {
height: inherit;
}
}
In some scenarios I want to be able to set the height depending on the container height, and have all the buttons with the square-button class dynamically resize to that height while still staying a perfect square shape.
Is this possible using only CSS?
You can make use of CSS variables modules to achieve that. However, the browser support for CSS variables is not so good. So, proceed with caution by first checking if the browser versions you wish to support have implemented CSS modules or not.
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
Example:
https://codepen.io/229075284/pen/aboQVXZ
.outer{
background-color: pink;
}
.outer::after{
content:'';
background-color: red;
display: inline-block;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 0;
/* display: table; */
}
.inner{
background-color: blue;
height: 300px;
}
<div class="outer">
<div class="inner"></div>
</div>
When I set display of outer::after to inline-block,the outer will have some extra space marked as pink, even if set font-size and line-height to 0. However, when I set display to table,the extra space disappears.
So I am wondering why the extra space appears?
I checked your codepen. It is a combination of both display: inline-block and content: "" on the ::after pseudo element. You are basically telling the browser that right after the outer element you want to reserve an element's place in the DOM.
You could see that if you remove the content: "" although you are using inline-block the extra pseudo div after the .outer element would disappear. That is because although you stated a certain display mode you practically have no content in this element and the browser ignores your element because it has no fixed size in pixels and no actual content within it.
The reason .outer is growing is that its height is set to auto in default, if you would give it a fixed height in pixels it might not show the spare div.
Your question has nothing to do with line-height or `overflow'.
Me personally I prefer not to use pseudo-classes like ::after and ::before in production. I prefer using regular divs and have my code more readable and understandable by other developers, anyway I hope I helped out. Feel free to discuss further if you have more questions.
This question already has answers here:
Invert rounded corner in CSS?
(10 answers)
Closed 3 years ago.
I am trying to make the following design layout in css/html, but I can't get the inverted border-radius style encircled in blue (BOTTOM-LEFT).
So far, i am using the following css properties in my div:
border-radius: 0 0 0 3rem;
The result is the following:
I have tried to make a margin-top:-3rem of the next div which works but destroys the div height structure for full screen ui and make me change all the weight percentages which is not elegant. Also, I found these tricks from stackoverflow but I don't know how can I get the result based on their code and also it's not simple at all.
Looking for suggestions and easy tricks to achieve this.
Pardon the inline styling but you just need to work with position, z-index and negative margin-bottom
<div style="border-bottom-left-radius: 50px; margin-bottom: -50px; position:relative; z-index: 1; height:150px; background-color: blue;"></div>
<div style="border-bottom-left-radius: 50px; position:relative; z-index: 0; height:150px; background-color: red;"></div>
if you want to make design like the example, just add padding to your div. And it will solve your problem.
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 5 years ago.
I'm using max-width: 100% to contain textarea. But it doesn't seem to work inside a flex item. Is there a property I can specify on textarea to ensure that the max will be respected?
textarea {
display: block;
margin-bottom: 1em;
max-width: 100%;
box-sizing: border-box;
overflow: auto;
}
See codepen. Flex classes from from flexboxes.
You specify that the text area should be 4,000 columns wide in the codepen, which is what's causing the issue.
Since the parent is a flex container, it will grow to accommodate the children elements.
Easiest fixes are to:
set a max width in px, vw, or another appropriate unit for your textarea.
use width instead of max-width, and specify a max-width on the parent container, instead
override the default min-width: auto of the parent element, setting it to any other value, i.e. 0, or 250
reduce the columns to something more reasonable, like 250 - or omit them and use width instead
This question already has answers here:
How can I transition height: 0; to height: auto; using CSS?
(41 answers)
Closed 7 years ago.
I have a DIV with a default fixed height and an overflow:hidden property to hide content that is to broad to be contained inside it.
div
{
height:50px;
overflow:hidden;
}
I would like to autoexpand this DIV hovering it with mouse but I have the problem that CSS transition works only with a fixed height and not with an auto height.
Here a JsFiddle that illustrate two cases.
I know that reason is that for some reason browrse does not know "how many px are auto height" but is there exist a workaround (maybe using max-height property...) to avoid need of jQuery?
When you give height: auto in the animation, it doesn't know what to do. As it cannot calculate the height on the fly. So, initialize the height using jQuery this way:
$(function () {
$(".auto_height").each(function () {
$(this).data("height", $(this).height());
});
});
And in CSS, give:
height: attr(data-height);
I have a DIV with position absolute that contains an INPUT field, i need this input to be centered vertically and horizontally inside the div which i have accomplished with display:block and text align, the problem is that the width property is not working the same way for IE (10 and below), the parent div have the proper width in chrome and firefox but a totally different one in IE10,9 and 8.
Just in case this information is relevant, the parent div is inside another div with position relative. I know it sounds like a question from back to the future but i was really surprised to notice that that im still having this issue after normalizer, etc.
Here's the code
HTML and CSS
<div>
<input type="text" />
</div>
div {
position:absolute;
background: blue;
width: 180px;
padding:8px 0;
display:block;
}
input {
border-radius: 5px;
margin: 0;
height: 20px;
position: relative;
display: block;
margin: 0 auto;
}
The problem is caused by the em units.
If you compare IE and Chrome you will see that the green bar in the menu is more to the left in IE than Chrome. That is because there is a pixel difference here and there in the font-size.
They are calculated differently. I think IE approximates differently.
Maybe instead of trying to make the 2 browsers look the same, you could make it look good on both browsers. Users will not know.
Use either a CSS file that gets added in IE browsers, or detect the browser with javascript and add classes on body (similar to modernizr), or use CSS hacks.