フレックスボックスグリッドのコンボボックスの配置方法

Question

DHTMLX Comboを非常に単純なFlexBoxグリッド内に配置することは難しいです。それはそれに割り当てられた幅を拡張するようです。

フィドールhere。

I.e.次の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> 

＆hellip;次の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; 
} 

＆hellip;私が使用してコンボを作成する場合：

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

を私は次のような状況を取得する：画面が広くなるよう

また、コンボの幅が更新されません。

私の目標は、Combo要素の長さを、その下のinput要素の長さと同じにすることです。 「Combo要素の長さ」とは、input要素の長さがで、のドロップダウンリストボタンの長さの両方を意味します。

Answer 1

あなたの問題は、max-width:12emの場合、フォントサイズが考慮されます。
両方の要素が異なるfont-sizeを持っているため、異なるmax-widthの値になります。 pxまたは同じfont-sizeとの両方の要素を作成し、それらが同じ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>