Title: textbox width=100% display not correctly in flex mode
Post by: aljcn on January 11, 2024, 07:09:42 AM
See next code:
<div style="width:800px;display:flex;">
<div style="margin:2px;flex-grow:1;border:1px solid red;">
<input type="text" style="width:100%;min-width:0;" />
</div>
<div style="margin:2px;flex-grow:1;border:1px solid blue;">
<input type="text" style="width:100%;min-width:0;" />
</div>
</div>
<div style="width:800px;display:flex;">
<div style="margin:2px;flex-grow:1;border:1px solid red;">
<input class="easyui-datebox" data-options="" style="width:100%;">
</div>
<div style="margin:2px;flex-grow:1;border:1px solid blue;">
<input class="easyui-datebox" data-options="" style="width:100%;">
</div>
</div>
in first row, two input each space 50% width as experted. but in second row, textbox not show correctly it seams some bug in textbox render...
Title: Re: textbox width=100% display not correctly in flex mode
Post by: jarry on January 11, 2024, 07:20:53 PM
Please call this code instead. <div style="width:800px;display:flex;">
<div style="margin:2px;flex:1;border:1px solid red;">
<input class="easyui-datebox" data-options="" style="width:100%;">
</div>
<div style="margin:2px;flex:1;border:1px solid blue;">
<input class="easyui-datebox" data-options="" style="width:100%;">
</div>
</div>
Title: Re: textbox width=100% display not correctly in flex mode
Post by: aljcn on January 12, 2024, 01:05:13 AM
still has some bug in display with container width is adjust to small such as 300px:
<div style="width:300px;display:flex;">
<div style="margin:2px;flex:1;border:1px solid red;">
<input type="text" style="width:100%;" />
</div>
<div style="margin:2px;flex:1;border:1px solid blue;">
<input type="text" style="width:100%;" />
</div>
</div>
<div style="width:300px;display:flex;">
<div style="margin:2px;flex:1;border:1px solid red;">
<input class="easyui-datebox" data-options="" style="width:100%;">
</div>
<div style="margin:2px;flex:1;border:1px solid blue;">
<input class="easyui-datebox" data-options="" style="width:100%;">
</div>
</div>
datebox width has overflow, whether it has min-width setting?
Title: Re: textbox width=100% display not correctly in flex mode
Post by: jarry on January 16, 2024, 12:58:37 AM
Please look at this code, it works fine. <div style="width:300px;display:flex;">
<div style="margin:2px;flex:1;overflow: hidden;border:1px solid red;">
<input class="easyui-datebox" data-options="" style="width:100%;">
</div>
<div style="margin:2px;flex:1;overflow: hidden;border:1px solid blue;">
<input class="easyui-datebox" data-options="" style="width:100%;">
</div>
</div>
Title: Re: textbox width=100% display not correctly in flex mode
Post by: aljcn on January 16, 2024, 05:00:57 AM
thanks jarry... best wishes
more more money~~~~ ;) ;)
|