Geek asks and answers

CSS cannot be applied to form element via javascript if doctype is set

I have a text box like this:

<input id="patId1" type="text" name="patId1" value="">

when the page loads, a script is called that sets the width of the text field. This code is as follows:

document.getElementById("patId1").style.width = document.getElementById("patId2").offsetWidth;

where, patId2 is a drop-down list (select tag). Basically, I am trying to set the width of the text box in the same way as the width of the dropdown.

Now, if DOCTYPE is installed, then the above script does not work. But if it is not installed, the width applies.

Any help.

+5
source share
3 answers

offsetWidth Number. CSS width . ( 0) . quirks CSS px .

document.getElementById("patId1").style.width = document.getElementById("patId2").offsetWidth + 'px'
+4

"px" offsetWidth . JSFiddle: http://jsfiddle.net/whizkid747/ysj2t/1/: document.getElementById("patId1").style.width = document.getElementById("patId2").offsetWidth + "px";

0

, @cychan:

'select' ,

:

<div id="select-wrapper-01" style="width: 180px; overflow: hidden;">
    <select style="width: auto;" name="abc" id="10">
        <option value="-1">Any</option>
        <option value="123">123</option>
    </select>
</div>

enter image description here

: " ? - 180px!"

width overflow div.

javascript div, :

var actualWidth = document.getElementById("patId2").offsetWidth;
document.getElementById("select-wrapper-01").style.width = actualWidth + 'px';

enter image description here

jsfiddle. , .

http://jsfiddle.net/acegyver/eTEuk/

You can try playing with select options, make them longer or shorter, and see how dynamic it will be select.

Give a loan where the loan should be. As I said, I changed the code from an existing @cychan post. I have an implementation that works for your question.

0
source

More articles:


All Articles