javascript - Span element height issue -


i trying customize file input control. did

<div class="ui-select form-input" style="display:inline-block; margin-right:5px; margin-bottom:-8px;width:400px;">     <span class="input-group-btn">         <label class="btn btn-info btn-file" for="multiple_input_group">             <div class="input required">                 <input id="multiple_input_group" type="file" multiple name="files" ng-files="getthefiles($files)">             </div> browse         </label>     </span>     <span class="file-input-label" ng-model="filename"></span> </div> 

this

<span class="file-input-label" ng-model="filename"></span> 

displays file name upon selection . expands height , ui gets out of proportions if file name large enough

enter image description here

i tried giving width did not work .

.file-input-label {     padding: 0px 10px;     display: table-cell;     vertical-align: middle;     border: 1px solid #ddd;     border-radius: 4px;     height:20px } 

how work ?

since know height of container (.file-input-label), don't need displayed table-cell. set block (or inline-block) instead. align verticaly, use paddings (or line-height).


Comments

Popular posts from this blog

java - Static nested class instance -

c# - Bluetooth LE CanUpdate Characteristic property -

JavaScript - Replace variable from string in all occurrences -