KPC
Kevin Powell - Community•4mo ago
MC23

Problem with flex wrap

I'm having a flex container that wraps differently from what I expected. I'd like the single selects to go next to the dates, but since the first div with dates wraps itself, the selects go in a new row. 
<div class="flex gap-10">
  <!--# DATE RANGES -->
  <div formGroupName="dates" class="flex gap-10"> 
    <app-kendo-date-filter>...</app-kendo-date-filter>
    <app-kendo-date-filter>...</app-kendo-date-filter>
    <app-kendo-date-filter>...</app-kendo-date-filter>
    <app-kendo-date-filter>...</app-kendo-date-filter>
  </div>
  <!--# SINGLE SELECT -->
  <div formGroupName="singleSelect" class="flex gap-10">
    <mat-form-field>...</mat-form-field>
    <mat-form-field>...</mat-form-field>
    <mat-form-field>...</mat-form-field>
    <mat-form-field>...</mat-form-field>
    <mat-form-field>...</mat-form-field>
  </div>
</div>
<div class="flex gap-10">
  <!--# DATE RANGES -->
  <div formGroupName="dates" class="flex gap-10"> 
    <app-kendo-date-filter>...</app-kendo-date-filter>
    <app-kendo-date-filter>...</app-kendo-date-filter>
    <app-kendo-date-filter>...</app-kendo-date-filter>
    <app-kendo-date-filter>...</app-kendo-date-filter>
  </div>
  <!--# SINGLE SELECT -->
  <div formGroupName="singleSelect" class="flex gap-10">
    <mat-form-field>...</mat-form-field>
    <mat-form-field>...</mat-form-field>
    <mat-form-field>...</mat-form-field>
    <mat-form-field>...</mat-form-field>
    <mat-form-field>...</mat-form-field>
  </div>
</div>
.gap-10 {
  gap: 10px;
}
.flex {
  display: flex;
  flex-flow: row wrap;
}
.gap-10 {
  gap: 10px;
}
.flex {
  display: flex;
  flex-flow: row wrap;
}
No description
4 Replies
MC23
MC23OP•4mo ago
I need two different divs because Angular needs to know to which formGroup it must refer
lanszelot
lanszelot•4mo ago
Hello, I do not understand what you want. The code did not show anything. And the image too Please do an image with GIMP or PS . what is your expectation
lanszelot
lanszelot•4mo ago
MC23
MC23OP•4mo ago
Yes. nut in the case where the dates are going in a new line themselves Sorry for late reply, but as I said in my username mention/ping me on reply because I don't use Discord that much :s

Did you find this page helpful?