Textbox ignoring width attribute, but works in Jsfiddle

Question

All of my code is here in this JSFiddle - http://jsfiddle.net/ugngp7ft/1/

HTML:

<div class="text_container_border">
    <div class="row">
        <label class="input_label">#1&nbsp;Name&nbsp;and&nbsp;Phone&nbsp;Number:</label>
            <span class="input_span">
                <input type="text" class="hidden_textfield" value=""/>
            </span>
        </div>
    <div class="row">
        <label class="input_label">#2&nbsp;Name&nbsp;and&nbsp;Phone&nbsp;Number:</label>
        <span class="input_span">
            <input type="text" class="hidden_textfield" value=""/>
        </span>
    </div>
    <div class="row">
        <label class="input_label">#3&nbsp;Name&nbsp;and&nbsp;Phone&nbsp;Number:</label>
        <span class="input_span">
            <input type="text" class="hidden_textfield" value=""/>
        </span>
    </div>
    <div class="row">
        <label class="input_label">#4&nbsp;Name&nbsp;and&nbsp;Phone&nbsp;Number:</label>
        <span class="input_span">
            <input type="text" class="hidden_textfield" value=""/>
        </span>
    </div>
</div>

CSS:

.row {

    display: table-row;

}

.input_label {

    display: table-cell;
    margin: 0px;
    padding: 0px;
}

.input_span {

    display: table-cell;
    width: 100%;
    padding: 0px 10px;

}

.hidden_textfield {

    width: 100%;
    border: none;
    outline: none;
    background-color: transparent;
    font-family: inherit;
    font-size: inherit;

}

.text_container_border {

    display: table;
    width: 100%;
    border: 1px solid #b2b2b2;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;

}

.notes {

    border: 1px solid #b2b2b2;
    height:80px;
    width: 100%;
    overflow: auto;
    resize: none;

}

It works perfectly there. I got the idea from an answer of a previous question who pointed me to a post on how to get text-boxes to take the extra width after a label in a parent DIV tag. The article is at - How to make text input box to occupy all the remaining width within parent block?

Anyways, I had to implement a new little piece in order to get my exact code to work, that being the "row" part of the table.

Everything works perfectly in that JSFiddle, but when implemented on a blank test page in my server, the text-boxes are not resized.

Could you post a link to your server page? I just recreated it on [my own server](http://dev.stevedv.com/test.html) and it works fine. — Steve, Apr 05 '15 at 12:37
I can't. It's a client's and it is secured by VPN. That is so strange. Could it be his configuration? — Allenph, Apr 05 '15 at 12:42
I've never known a server configuration to be able to effect the rendering of HTML/CSS without appearing in the DOM. Pull up your browser's debugger, usually cmd/ctrl+alt+j, and see if there's anything unusual in the document. — Steve, Apr 05 '15 at 12:48
I contacted the host. It turns out there WAS something messing it up. I don't know how. But whatever they did fixed it on the test page. However, I have a new problem . There is a TON of CSS that I didn't right, and something in there is something that causes the same exact thing...the width doesn't resize on the textbox. Is there any way for me to make it work, orfigure out why it isn't besides going through mountains of CSS that I didn't write? — Allenph, Apr 05 '15 at 13:22

score 0 · Answer 1 · answered Apr 05 '15 at 14:48

0

This is a pure hack that I have had to use when the client did not want to pay for the time to fix CSS. (note - it was not my code, I was hired to address an issue and uncovered the CSS problem.)

What I did was write correcting CSS and placed it so it was the last read and added an !important to override the other CSS code.

This is by no means the correct wad but it worked for me in a pinch.

answered Apr 05 '15 at 14:48

Mark Hart

334
1
3
12

See, I thought about doing something like that. The problem is that all of the CSS is included through a .php file...which is also included. The previous developer has a huge network off CSS through including. In all of that, I have no idea what's making my code not work. I've narrowed it down to the fact that the width attribute can't be set on the textbox for some reason. – Allenph Apr 05 '15 at 15:01
Could you not just add CSS file and link it last in the header file, if you have access to that file or maybe use some JavaScript to "adjust" it after the page loads – Mark Hart Apr 05 '15 at 15:29
That's exactly what I ended up doing. I added the CSS to the include file, and it still didn't work. For some reason it worked perfectly, but only after I completely exited chrome and reopened. Go figure. Thanks for the time. – Allenph Apr 05 '15 at 15:32

Textbox ignoring width attribute, but works in Jsfiddle

1 Answers1