CSS order property does not work when applied to a fieldset element in Chrome

Asked Nov 27 '17 at 10:08

Active Nov 27 '17 at 11:47

Viewed 97 times

The HTML fieldset tag is not working in display flex, order property. But it works with a div tag.

.fset {
  display: flex;
}

.fset .first {
  order: 2;
  -webkit-order: 2;
}

.fset .second {
  order: 1;
  -webkit-order: 1;
}

<fieldset class="fset">
  <div class="first">
    <p>first</p>
  </div>
  <div class="second">
    <p>second</p>
  </div>
</fieldset>

edited Nov 27 '17 at 11:47

Michael Benjamin

307,417
93
525
644

asked Nov 27 '17 at 10:08

tamilselvancst

It works in the live demo in your question when I test it. Are you testing using an obsolete browser that does not support Flexbox properly? – Quentin Nov 27 '17 at 10:10
@Quentin, I am using chrome browser, but it's not working. If working means which browser. – tamilselvancst Nov 27 '17 at 10:12
Fieldset cannot be flex containers : https://stackoverflow.com/questions/28078681/why-cant-fieldset-be-flex-containers . But you can get it working by adding divs inside it and applying flex property to div instead. – Shruti Agarwal Nov 27 '17 at 10:14
This looks like a Chrome-specific bug. I can reproduce the problem in Chrome 62, but not in Safari 11, or in Firefox 57 – Quentin Nov 27 '17 at 10:15
@ShrutiAgarwal I can't add any div tag. Any other alter solutions. – tamilselvancst Nov 27 '17 at 10:16
@Quentin, Thanks. Any alter solution. Without javascript. – tamilselvancst Nov 27 '17 at 10:18
@Quentin It is a bug...check dupe link – Asons Nov 27 '17 at 12:20
@tamilselvan No, you can't apply `display: flex` on some elements (see dupe link), so you need to add an extra wrapper between the inner `div` and the `fieldset`. – Asons Nov 27 '17 at 12:23
@LGSon, Ok thanks. I will do. – tamilselvancst Nov 27 '17 at 12:24
You're welcome ... and it is a simple fix: https://jsfiddle.net/tmx0wydc/ – Asons Nov 27 '17 at 12:25
@LGSon, I understand, am working in Magento so I can't add extra div. This is my problem. – tamilselvancst Nov 27 '17 at 12:27
Ok...you can use `float` to swap order: https://jsfiddle.net/tmx0wydc/1/ – Asons Nov 27 '17 at 12:48
@LGSon, Yes. but I need result is one by one order. Is this possible on float right. I have used width: 100%. It's not working. – tamilselvancst Nov 27 '17 at 12:59
It depends if you can give them a width... https://jsfiddle.net/tmx0wydc/2/ – Asons Nov 27 '17 at 14:01
@LGSon Thanks, My requirement is one by one bottom. my sample https://jsfiddle.net/tamilselvancst/n4Ly5w9b/3/ – tamilselvancst Nov 27 '17 at 14:22

CSS order property does not work when applied to a fieldset element in Chrome

0 Answers0