2015-04-05 19 views
0

我所有的代碼工作在這裏提出這個的jsfiddle - http://jsfiddle.net/ugngp7ft/1/文本框忽略width屬性,但在的jsfiddle

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; 

} 

它完全有。我從前一個問題的答案中得到了這個想法,他向我指出了一篇關於如何讓文本框在父DIV標籤中的標籤之後採用額外寬度的帖子。這篇文章是在 - How to make text input box to occupy all the remaining width within parent block?

無論如何,我不得不實施一個新的小件,以獲得我的確切代碼工作,即成爲表的「行」部分。

在JSFiddle中一切正常,但在我的服務器的空白測試頁上實現時,文本框不會調整大小。

+0

你能發佈一個鏈接到你的服務器頁面嗎?我剛剛在[我自己的服務器](http://dev.stevedv.com/test.html)上重新創建了它,並且它工作正常。 – 2015-04-05 12:37:20

+0

我不行。這是一個客戶端,它受VPN保護。這太奇怪了。這可能是他的配置嗎? – Allenph 2015-04-05 12:42:19

+0

我從來不知道服務器配置能夠在沒有出現在DOM中的情況下對HTML/CSS進行渲染。拉起瀏覽器的調試器,通常是cmd/ctrl + alt + j,看看文檔中是否有不尋常的東西。 – 2015-04-05 12:48:26

回答

0

這是一個純粹的黑客,當客戶不想花時間修復CSS時,我不得不使用它。 (注意 - 這不是我的代碼,我被聘請解決一個問題,並發現了CSS問題。)

我所做的是寫入更正CSS並放置它,以便它是最後一次讀取並添加!另一個CSS代碼。

這絕不是正確的一團,但它對我的工作很有幫助。

+0

看,我想過做那樣的事情。問題是,所有的CSS都包含在一個.php文件中......這也包括在內。之前的開發者通過包含CSS來關閉CSS。在所有這些,我不知道是什麼讓我的代碼無法正常工作。 我已經縮小到由於某些原因無法在文本框上設置width屬性的事實。 – Allenph 2015-04-05 15:01:40

+0

如果你可以訪問該文件或者在頁面加載後使用一些JavaScript來「調整」它,那麼你能不能簡單地添加CSS文件並將它最後鏈接到頭文件中: – 2015-04-05 15:29:15

+0

這正是我最終做的。我將CSS添加到包含文件中,但仍然無法使用。由於某種原因,它完美的工作,但只有在我完全退出鉻並重新打開後。去搞清楚。謝謝你的時間。 – Allenph 2015-04-05 15:32:11