如何对齐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网格中的组合框

回答

相关问题