如何對齊flexbox網格中的組合框

我發現很難將DHTMLX Combo對齊成一個非常簡單的FlexBox網格。它似乎擴大了分配給它的寬度。如何對齊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 
});

我得到以下情況：

此外，由於屏幕的擴大，組合的寬度並沒有更新。

我的目標是使組合元素的長度與它下面的input元素的長度相同。通過「組合元素的長度」，我的意思是它的長度爲input元素和下拉列表按鈕的長度。

來源

2017-09-06 Marcus Junius Brutus

你想才達到什麼？要選擇和命名相同的寬度？或者是什麼？ – Taldakus

@Taldakus問題已更新。 –

看起來'DHTMLX Combo'設置了自己的寬度。構造函數的定義有一個寬度參數，它以像素爲單位。檢查該對象表明它將元素級別的樣式設置爲您的樣式不會覆蓋的樣式。 – MikeTheReader

你的問題是與max-width:12em它需要考慮的字體大小。
這兩個元素有不同的font-size，因此他們得到不同的max-width值。
更改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>

來源

2017-09-06 22:07:28

很好的答案。從'max-width：12em'到'max-width：12rem'的簡單切換解決了這個問題。 –

「px」或rem'的單位解決了問題，但是當屏幕尺寸縮小時，組合控件無法響應。要在這個答案的代碼片段中看到，你必須在整頁中打開它並縮小屏幕寬度。顯然，組合使用JavaScript時，其構成的寬度僅設置一次。 –

@MarcusJuniusBrutus當然，這是當您在頁面加載時進行js計算時的例外行爲。 –

如何對齊flexbox網格中的組合框

回答

相關問題