Baseline Alignment of Input and Labels in CSS Grid - css

I'm trying to build a form using a CSS grid layout. Labels appear in the left column and inputs in the right. The align-items property is set to baseline. In Chrome, the text of the labels and inputs are vertically aligned on their baseline. But in Firefox v94, the labels sit higher than the text in the inputs.
Here's a minimal reproducible example of the problem:
<!DOCTYPE html>
<html>
<head>
<style>
.login-grid {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 10px 2px;
align-items: baseline;
}
label, input {
font-size: 3em;
}
</style>
</head>
<body>
<div class="login-grid">
<label>username</label>
<input type="text">
</div>
</body>
</html>
This example is live on Codepen.
When I wrap the inputs up in a div, the text does align across columns. I'd prefer not to do that because the nesting affects sizing.
I've examined many of the other posts on alignment issues, but I've not found one relevant to CSS grid.

Firstly if you want to have a design as close as possible between different browsers I would recommend using a normalize css or a reset css.
Then working with font rendering is always a difficulty since the implementation of css property always differ a bit between browsers.
As you can see in the images below with a normalize and the same CSS code there is still differences between Chrome and Firefox :
Chrome add "gaps"
But as an alternative you can with a normalize CSS and align-items: center get an identical result between Chrome and Firefox:

Related

Sliding-rightward input box with CSS

Is there any way to make an input box span the distance between the right edge of its parent and go as far left as it needs to?
What I mean is, suppose I have
<div>
<span>a</span>
<span>b</span>
...
<input />
</div>
I'd like to make the input change width, so that if there were no spans, the input would stretch across the whole div, but if there are spans it would contract from the left? I'd be adding the spans from javascript.
Is it possible to do this in pure CSS?
Yes, technically.
To do it with CSS only, you will need to use the new flexbox model.
However, support is not great.
div {
width: 30em;
display: -webkit-flex;
display: flex;
input {
width: 100%;
flex: 1;
}
Try this demo in Chrome.
For support in other browsers that don't support the candidate recommendation, a little bit of Javascript to add percentage based widths based on the number of spans is your best bet.

How can I center an element on a Windows 8 [HTML5/JS/CSS3] using flexible layouts

I am building a Windows 8 App in HTML5 and I am trying to center my app menu right in the middle of the screen. I know there are new CSS3 to apply this functionality, by using flexible boxes, however I am not able to recreate that. Here is my HTML
<body>
<div id="playControl">
<button>Back</button>
<button>Play</button>
<button>Forward</button>
</div>
</body>
There is some information here, but looks like isn't working properly (I guess they changed the property names)
Thanks
Here's how I do that. I use a grid instead of a flexbox at all. Let's say your div is inside a div called "parent". I would use...
#parent {
display:-ms-grid;
-ms-grid-columns:1fr;
-ms-grid-rows:1fr;
height:100%;
}
And then on your div I would use...
#yourDiv {
-ms-grid-column-align: center;
-ms-grid-row-align: center;
}
Notice that you need to give the parent div a single row and column and a height of 100%. Then you need to set the alignment for the child div (the initial value is 'stretch').
Hope that helps.
Brute force example... use css styles in real implementation...
You can fill the page with a flexbox like this... (note I used the default ms-flexbox css style to get things started and overrode with inline styling to get what I wanted)
<div class="ms-flexbox" style="width: 100%; height: 100%; -ms-flex-direction: column; -ms-flex-align: center; -ms-flex-pack: center;">
<button>Back</button>
<button>Play</button>
<button>Forward</button>
</div>
or your could create a 3x3 grid and put a smaller flexbox inside the middle cell.

Aligning the bottom of an inline block with the bottom of text (excluding descenders)

How can I align the bottom of an inline block (call it 'IB') with the bottom of the text - excluding descenders like that on 'g' - in a parent element (call it 'PE')? This should be in a way which generalises whatever the size of the text - I don't want to hardcode size-specific pixel values.
Here is an example of the HTML I'd use, with the classes I'd need CSS for:
<div class="pe">
Parent text line
<span class="ib" style="display: inline-block;">
- and child text line
</span>
</div>
And here's what I'd like it to look like:
OP updated saying: "Thanks, but I've edited the question to clarify I don't want to hardcode size-specific pixel values."
In that case, I'm afraid there isn't a solution that will automatically fix different lines with different text sizes. The other solution I provided isn't even perfect across all of the browsers with some combinations of font sizes, because Chrome/Opera round inexact values differently than Firefox/IE, so even with my solution, you'd need to use some browser-specific css. The only thing similar to an universal solution would be setting vertical-align: middle; but I wouldn't trust that to work consistently.
You can add below css to ib. And change the bottom margin to control alignment.
.ib{
display: inline-block;
font-size: 10px;
vertical-align: bottom;
margin:0 0 1px 0;
}​
#Rorok_89 I know i am adding one more line of css but its justa way to do it in a different way. Your answer is perfect.
This seems to have worked for me: http://jsfiddle.net/Rorok_89/Z8TWH/
.ib{
display: inline-block;
font-size: 10px;
vertical-align: 1px;
}

simple div containing span won't size correctly

I thought I was pretty knowledgeable about CSS but this simple problem baffles me.
<div><span>sample text</span></div>
results in the div's height being smaller than the height of the span if the span has padding.
I realize that there are ways to use "float" to make the div size correctly, but floats always seem to introduce undesired side effects.
Isn't there a clean simple way to tell the div to size to fit its contents? Seems pretty basic to me. Maybe I'm missing something.
In the basic case, just use display: inline-block on the span.
Here is my test case (works in FF, Chrome, and IE 6-8):
<!DOCTYPE HTML>
<html>
<head>
<title>Span padding test</title>
</head>
<body>
<div style="background-color: yellow; border: 1px solid red;">
<span style="padding: 50px; display: inline-block;">test</span>
</div>
</body>
</html>
The reason why adding float: left to the div and span fixes this is because floating an inline element implicitly converts it to a block element. If you are unfamiliar with the nuances between divs and spans (aka the difference between block and inline elements), reading http://www.maxdesign.com.au/articles/inline/ should help.
There are a few other ways to solve this but it is hard to say which one is best without know more about the rest of the markup and styles.
Add overflow:auto to the div.

Centering 2 divs of unknown width in IE6 and IE7

OK so what would happen if I have 2 divs (one containing text, the other an image). The image always has a static width but the text varies. hence making its containing div variable.
I can make it work for all other browsers (except IE6 and IE7) by using CSS display:table. IE6 and 7 don't have that so I can't find a workable solution to center them all.
... so you know what I'm talking about...
.container{text-align:center; width:100%}
.container .centered{display:table; margin:0 auto}
<div class="container">
<div class="centered">
<div id="text">varying length text</div>
<div id="image">IMAGE</div>
</div>
</div>
Quite apart from the lack of IE support, setting display: table as you have without its children using display: table-row/table-cell results in undefined behaviour. It doesn't make sense to put block elements directly inside a table element and the browser might do anything at all.
What you are trying to do is get shrink-to-fit width behaviour without using float, which is a normal way of getting shrink-width but requires that the block in question goes to the left or right not centre. Probably a better way of saying that would be to use an inline-block:
.centered { text-align: center; }
.centered span { display: inline-block; border: dotted red 1px; }
<div class="centered">
<span id="text">varying length text</span>
</div>
<div class="centered">
<span id="image">IMAGE</span>
</div>
(You have to use a naturally-inline element like span to make it work under IE<8; div would fail. There is also -moz-inline-box if you need to target Firefox 2.)
Are you using quirksmode or standards compliant mode? In other words have you included a DOCTYPE declaration at the top of your html page?
You shouldn't need to use display:table just margin:auto should do the trick provided you are using a standards mode.

Resources