how to align combo box in a flexbox grid

Question

I am finding it hard to align the DHTMLX Combo inside a very simple FlexBox grid. It seems to extend the width allocated to it.

Fiddle here.

I.e. given the following HTML:

<div class='flex-row'>
  <label>select:</label>
  <div id="combo_id"></div>
</div>

<div class='flex-row'>
  <label>name:</label>
  <input type='text' />
</div>

… and the following CSS:

 .flex-row {
   display: flex;
   justify-content: flex-start;
 }

 .flex-row > label {
   width: 20%;
   max-width: 4em;
 }

 .flex-row > *:nth-child(2) {
   border: 1px solid red;
   width: 50%;
   max-width: 12em;
 }

… when I create the combo using:

const combo = new dhtmlXCombo({
   parent: "combo_id",
   name: "alfa2",
   items: [], // no items, this is just a SSCCE
   readonly: false
 });

I get the following situation:

Moreover, as the screen widens, the combo's width does not update.

My goal is to make the length of the Combo element identical to the length of the input element underneath it. By "length of the Combo element" I mean both the length of its input element and the length of the drop down list button.

What do you want to achive? To make select and name the same width? or what? — Taldakus, Sep 06 '17 at 21:55
Looks like the `DHTMLX Combo` sets its own width. The constructor definition has a width parameter that takes a number in pixels. Inspecting that object shows that it's setting the style at the element level, which your styles won't override. — MikeTheReader, Sep 06 '17 at 22:03
@MikeTheReader so perhaps it would be feasible for me to read (using Javascript) the width of the element below it and then set myself the width of the combo elements ? Or is this going too far ? — Marcus Junius Brutus, Sep 06 '17 at 22:08
@MarcusJuniusBrutus - Go with Sag1v's answer. I was making it too complex. — MikeTheReader, Sep 06 '17 at 22:11
i guess they are using javascript to calculate the `width` , but the problem is that the initial value is "wrong". don't mess with their calculation in order to keep it dynamic, just fix your `css` rules, i've updated my answer with better explanation. — Sagiv b.g, Sep 06 '17 at 22:15

Sagiv b.g · Accepted Answer · 2017-09-06T22:18:49.683

Your problem is with the max-width:12em it takes the font size in consideration.
Both elements has different font-size hence they get different max-width value.
Change max-width to another value type like px or make both element with the same font-size and they will get the same width

     const combo = new dhtmlXCombo({
       parent: "combo_id",
       name: "alfa2",
       items: [], // no items, this is just a SSCCE
       readonly: false
     });

     .flex-row {
       display: flex;
       justify-content: flex-start;
     }
     
     .flex-row > label {
       width: 20%;
       max-width: 4em;
     }
     
     .flex-row > *:nth-child(2) {
       border: 1px solid red;
       width: 50%;
       max-width: 12em;
       font-size:12px;
     }

<link href="https://cdn.dhtmlx.com/5.0/dhtmlx.css" rel="stylesheet"/>
<script src="https://cdn.dhtmlx.com/5.0/dhtmlx.js"></script>
<link href="https://cdn.dhtmlx.com/5.0/skins/skyblue/dhtmlx.css" rel="stylesheet"/>
<div class='flex-row'>
  <label>select:</label>
  <div id="combo_id"></div>
</div>

<div class='flex-row'>
  <label>name:</label>
  <input type='text' />
</div>

Nice answer. A simple switch from `max-width: 12em` to `max-width: 12rem` solves the problem. — Michael Benjamin, Sep 06 '17 at 22:22
A unit of either `px` or rem` solves the issue, however the combo control isn't responsive when the screen size is reduced. To see that in the code snippet of this answer you'd have to open it in full page and shrink the screen width. Apparently the combo is setting the widths of its constituents only once, when constructed, using JavaScript. — Marcus Junius Brutus, Sep 07 '17 at 13:50
@MarcusJuniusBrutus of course, this is the excepted behavior when you are doing js calculation on page load. — Sagiv b.g, Sep 07 '17 at 13:52

how to align combo box in a flexbox grid

1 Answers1