I tried to style a fieldset element with display: flex and display: inline-flex.
However, it didn't work: flex behaved like block, and inline-flex behaved like inline-block.
This happens both on Firefox and Chrome, but strangely it works on IE.
Is it a bug? I couldn't find that fieldset should have any special behavior, neither in HTML5 nor in CSS Flexible Box Layout specs.
fieldset, div {
display: flex;
border: 1px solid;
}
<fieldset>
<p>foo</p>
<p>bar</p>
</fieldset>
<div>
<p>foo</p>
<p>bar</p>
</div>
According to Bug 984869 - display: flex doesn't work for button elements,
<button> is not implementable (by browsers) in pure CSS, so they are a
bit of a black box, from the perspective of CSS. This means that they
don't necessarily react in the same way that e.g. a <div> would.
This isn't specific to flexbox -- e.g. we don't render scrollbars if
you put overflow:scroll on a button, and we don't render it as a
table if you put display:table on it.
Stepping back even further, this isn't specific to <button>. Consider
<fieldset> and <table> which also have special rendering behavior:
data:text/html,<fieldset style="display:flex"><div>abc</div><div>def</div>
In these cases, Chrome agrees with us and disregards the flex
display mode. (as revealed by the fact that "abc" and "def" end up
being stacked vertically). The fact that they happen to do what you're
expecting on <button style="display:flex"> is likely just due to an
implementation detail.
In Gecko's button implementation, we hardcode <button> (and
<fieldset>, and <table>) as having a specific frame class (and hence,
a specific way of laying out the child elements), regardless of the
display property.
If you want to reliably have the children reliably arranged in a
particular layout mode in a cross-browser fashion, your best bet is to
use a wrapper-div inside the button, just as you would need to inside
of a <table> or a <fieldset>.
Therefore, that bug was marked as "resolved invalid".
There is also Bug 1047590 - display: flex; doesn't work in <fieldset>, currently "unconfirmed".
Good news: Firefox 46+ implements Flexbox for <fieldset>. See bug 1230207.
I find out this might be a bug on Chrome and Firefox where legend and fieldset are replaced elements.
Bugs Reported:
Bug Chrome (fixed since v86)
Bug Firefox (fixed since v46)
A possible Workaround:
A possible workaround would be using <div role="group"> in HTML, and applying in CSS div[role='group'] as selector.
UPDATE
In Chrome version 83 button can work with the display: inline-grid/grid/inline-flex/flex, you can see the demo below:
button {
display: inline-flex;
height: 2rem;
align-items: flex-end;
width: 4rem;
-webkit-appearance: none;
justify-content: flex-end;
}
<!--
The align-items keyword should fail in Chrome 81 or earlier, but work in Chrome 83 or later. To see the error, the button needs styles that make it more of an extrinsic container. In other words, it needs a height or width set.
-->
<button>Hi</button>
<input type="button" value="Hi">
Please star the Chrome bug to increase bug priority
This is a bug in Chrome. Please add a star to this issue to increase it's priority to be fixed:
https://bugs.chromium.org/p/chromium/issues/detail?id=375693
In the mean time, I created these three Code Pen examples to show how to work around the issue. They are built using CSS Grid for the examples but the same techniques can be used for flexbox.
Using aria-labelledby instead of legend
This is the more propper way to deal with the problem. The downside is that you have to deal with generating unique IDs applied to every fake legend element.
https://codepen.io/daniel-tonon/pen/vaaGzZ
<style>
.flex-container {
display: flex;
}
</style>
<fieldset aria-labelledby="fake-legend">
<div class="flex-container">
<div class="flex-child" id="fake-legend">
I am as good accessibilty wise as a real legend
</div>
...
</div>
</fieldset>
Using role="group" and aria-labelledby instead of fieldset and legend
If you need the flex-container to be able to stretch to the height of a sibling element and then also pass that stretch onto its children, you will need to use role="group" instead of <fieldset>
https://codepen.io/daniel-tonon/pen/BayRjGz
<style>
.flex-container {
display: flex;
}
</style>
<div role="group" class="flex-container" aria-labelledby="fake-legend">
<div class="flex-child" id="fake-legend">
I am as good accessibilty wise as a real legend
</div>
...
</div>
Creating a fake duplicate legend for styling purposes
This is a far more hacky way to do it. It is still just as accessible but you don't have to deal with IDs when doing it this way. The main down side is that there is going to be duplicate content between the real legend element and the fake legend element.
https://codepen.io/daniel-tonon/pen/zLLqjY
<style>
.screen-reader-only {
position: absolute;
opacity: 0;
pointer-events: none;
}
.flex-container {
display: flex;
}
</style>
<fieldset>
<legend class="screen-reader-only">
I am a real screen-reader accessible legend element
</legend>
<div class="flex-container">
<div class="flex-child" aria-hidden="true">
I am a fake legend purely for styling purposes
</div>
...
</div>
</fieldset>
Legend MUST be a direct decendent
When you are first trying to fix this yourself, you will probably try doing this:
<!-- DO NOT DO THIS! -->
<fieldset>
<div class="flex-container">
<legend class="flex-child">
Broken semantics legend text
</legend>
...
</div>
</fieldset>
You will discover it works, and then you will probably move on without giving it a second thought.
The problem is that putting a div wrapper between the fieldset and the legend breaks the relationship between the two elements. This breaks the semantics of fieldset/legend.
So by doing this, you have defeated the whole purpose of using fieldset/legend in the first place.
Also, there isn't much point in using a fieldset if you don't give that fieldset a legend.
In my experience, I've found that neither <fieldset>, nor <button>, nor <textarea> can properly use display:flex or inherited properties.
As others have already mentioned, bugs have been reported. If you want to use flexbox to control ordering (e.g. order:2), then you'd need to wrap the element in a div. If you want flexbox to control actual layout and dimensions, then you may want to consider using a div, instead of the input control (Which stinks, I know).
<div role="group">
<p>foo</p>
<p>bar</p>
</div>
<div>
<p>foo</p>
<p>bar</p>
</div>
Might need to use role-group because firefox, chrome and i think safari have a bug with fieldsets apparently. Then the selector in the CSS would simply be
div[role='group'], div {
display: flex;
border: 1px solid;
}
Edit: Here are some issues that other people are experiencing as well.
Issue 375693
Issue 262679
you can put additional div in <fieldset> with the following props:
flex-inner-wrapper {
display: inherit;
flex-flow: inherit;
justify-content: inherit;
align-items: inherit;
}
To answer the original question: yes, it is a bug, but it wasn't well-defined at the time the question was asked.
Now the rendering for fieldset is better defined: https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements
In Firefox and Safari, flexbox on fieldset now works. It doesn't yet in Chromium. (See https://bugs.chromium.org/p/chromium/issues/detail?id=375693 )
Also see https://blog.whatwg.org/the-state-of-fieldset-interoperability for improvements made in the specification in 2018.
I am trying to add span tags so that I can add a red asterisk beside the email address text to show that it is required. However, Everytime I add a span tag it drops the asterisk down to the next line like so:
Here is the section of code I am using for that column:
<div class="col-md-6">
<h4>Email Address <span style="color:red;">*</span></h4>
<p><input class="form-control" required name="contactEmail" id="contactEmail" type="email" /></p>
</div>
Can anyone help me with putting the asterisk on the same line as "email address"?
I suspect it is a style in your "col-md-6" class. Please post the contents of that class and we can help you. I tried your code snippet in Chrome, FireFox and sigh Internet Explorer and they all worked without that class.
Just add
display: inline;
to your "col-md-6" class.
You need to ensure that the <span> tag is display:inline-block. It seems that it has been set to block at an earlier point in your code.
span {
display: inline-block;
}
Based on this fiddle, http://jsfiddle.net/s9U26/ it looks like it should work, so you aren't showing something.
You likely have this setting somewhere:
span{
display: block;
}
Which causes the effect you see, change it to
span{
display: inline;
}
On the front page of my site I want to put a brief description of what the site offers with next to that a brief description. So I decided to use an article tag for the former and a section for the latter. I though a display: inline-block would do the trick to place them next to eachother but alas that does not seem to be the case. (any better suggestions on how to do this would be welcome, I am a bit disappointed that CSS3 didn't add a clean, cross platform approach as far as I can tell)
<body>
<style>
#description{
display: inline-block;
margin-right: 410px;
}
#register{
display: inline-block;
width:400px;
}
</style>
<section>
<article id="description">
lorem ipsum est
</article>
<section id="register">
registrationform
</section>
</section>
</body>
Your code should work, at least if your container (or the window) is wide enough:
http://jsfiddle.net/9V8qP/
I have been given some html that look like this (I have no control over the html):
<p>Some text</p>
<strike>
<p>This is some text</p>
</strike>
<p>More text</p>
The text shows as strikeout in both IE and Chrome, but not in Firefox. I have added display:inline-block to the <p> tag which fixes Firefox but then breaks IE and Chrome.
Is there a solution to this which will work in all three browsers and does not involve changing the html?
I believe your issue is due to nesting a block element (<p>) inside of an inline element (<strike>).
This CSS gets the line-through working in the nested <p>:
strike p { /* only applies to <p> tags that are children of a <strike> tag */
padding: 0; // remove default spacing from <p> tag
text-decoration: line-through; // fixes missing line-through
}
Note: Only tested in Firefox 3.6.x
Use CSS.
Tailored to your specific HTML example:
strike p
{
text-decoration: line-through;
}
JSFiddle (verified to work in IE9, Chrome 10, FF4): http://jsfiddle.net/hcYVv/1/
That tag is not universally supported. Use the following CSS
.strikethrough { text-decoration: line-through;}
and then accordingly change your html to
<p class="strikethrough">This is some text</p>
This is super simple and I'm completely baffled by this behavior. I want my search results to display in a nice grid of blocks of 2 in a row. But instead it shows up crooked where the div with more text pushes others down with it's content. How can I fix this?
Here's a simplified example that shows the problem in FF and Chrome:
<html>
<body>
<style>
.search_result
{
border: thin solid;
width: 250px;
height:200px;
display: inline-block;
}
</style>
<div style='width:508px'>
<div class='search_result'>
Meerkats demonstrate altruistic behavior within their colonies; one or more meerkats stand sentry while others are foraging or playing, to warn them of approaching dangers ...
</div>
<div class='search_result'>
one or more meerkats stand sentry
</div>
<div class='search_result'>
meerkats
</div>
</div>
</body>
</html>
On .search_result, add vertical-align: top.
Live Demo