CODEWITHSUNDEEP
htmlcssflexbox
bloodycheri
bloodycheri

Reputation: 75

Add grouping tags in flex structure

I got the following input structure :

css

.form-content {
  clear: both;
  width: 100%;

  .form-flex-col-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

    .form-flex-col-content {
      flex: 1 1 32%;
      padding: 0 10px;
    }
  }
}

html

<div class="form-flex-col-container">
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
</div>

And it renders well. However, I would like to introduce a new tag to "group" my .form-flex-col-content blocks (in order to provide the angular formControl directive). Like this :

<div class="form-flex-col-container">
<span [formGroup]="myFormA">
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
</span>
<span [formGroup]="myFormB">
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
</span>
</div>

But it breaks the flex display.

Is there any tag/style I can use that would not break the flex display ?

Cheers !

Upvotes: 0

Views: 79

Answers (1)

David Thomas
David Thomas

Reputation: 253318

You can add display: contents to the <span> that wraps the content, to make it effectively transparent to the layout, though this does come with accessibility caveats, unfortunately:

*, ::before, ::after {
  box-sizing: border-box;
  font: normal 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

.form-flex-col-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  outline: 2px solid #f90;
}

.form-flex-col-container span {
  display: contents;
}

.form-flex-col-content {
  flex: 1 1 32%;
  padding-block: 10px;
  outline: 2px solid palegreen;
}
<div class="form-flex-col-container">
<span [formGroup]="myFormA">
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
</span>
<span [formGroup]="myFormB">
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
</span>
</div>

JS Fiddle demo.

These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by CSS box concepts such as replaced elements. See Appendix B: Effects of display: contents on Unusual Elements for more details.

Due to a bug in browsers, this will currently remove the element from the accessibility tree — screen readers will not look at what's inside. See the Accessibility concerns section below for more details. Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/display#box

References:

Upvotes: 1

Related Questions