Search code examples
javascripthtmlcssflexboxdhtmlx

how to align combo box in a flexbox grid

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:

enter image description here

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.

Solution

  • 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>