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
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
Post a Comment