HockChai Lim HockChai Lim - 4 months ago 31
HTML Question

html input readonly cut of the trailing text

The value of my readonly input element is being cut off. Is there a way to correct this without changing the font type or font size? https://jsfiddle.net/hockchailim/tkg7a4c8/

<style>
input[readonly] {
border: none;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
width: auto;
}
</style>
<input readonly="readonly" type="text" value="mmm.mmmm-mmmm@test.com">

Answer

Change width to 100%

$(document).ready(function() {
    var count = $("#readonly").val().length;
    $("#readonly").css("width","calc("+ count +" * 0.85em)");
});
input[readonly] {
    background-color: transparent;
    border: none;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 3px 0 3px 0;
    padding: 2px;
    
}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<input id="readonly" readonly="readonly" type="text" value="mmm.mmmm-mmmm@test.com">