【问题标题】:Textbox ignoring width attribute, but works in Jsfiddle文本框忽略宽度属性,但适用于 Jsfiddle
【发布时间】:2015-04-05 12:31:57
【问题描述】:

我所有的代码都在这个 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;

}

它在那里完美运行。我从上一个问题的答案中得到了这个想法,该问题向我指出了一篇关于如何让文本框在父 DIV 标记中的标签后获得额外宽度的帖子。文章在-How to make text input box to occupy all the remaining width within parent block?

无论如何,我必须实现一个新的小部分,以使我的确切代码能够工作,即表格的“行”部分。

在该 JSFiddle 中一切正常,但是当在我的服务器的空白测试页面上实现时,文本框不会调整大小。

【问题讨论】:

  • 您能发布一个指向您的服务器页面的链接吗?我刚刚在my own server 上重新创建了它,它工作正常。
  • 我不能。它是客户端的,由 VPN 保护。这太奇怪了。莫非是他的配置?
  • 我从来不知道服务器配置能够在不出现在 DOM 中的情况下影响 HTML/CSS 的呈现。拉起浏览器的调试器,一般是cmd/ctrl+alt+j,看看文档有没有异常。
  • 我什么也没看到。我想我应该联系房东。
  • 我联系了房东。原来有什么东西把它搞砸了。我不知道怎么做。但无论他们做了什么,都将其固定在测试页面上。但是,我有一个新问题。有大量的 CSS 是我做错的,并且其中的某些东西会导致完全相同的事情……文本框上的宽度不会调整大小。我有什么办法让它工作,或者弄清楚为什么除了我没有编写的大量 CSS 之外它没有?

标签: css textbox attributes width css-tables


【解决方案1】:

当客户不想为修复 CSS 的时间付费时,我不得不使用这个纯技巧。 (注意 - 这不是我的代码,我受雇来解决一个问题并发现了 CSS 问题。)

我所做的是编写更正 CSS 并将其放置为最后一次读取并添加一个 !important 以覆盖其他 CSS 代码。

这绝不是正确的一团,但它在紧要关头对我有用。

【讨论】:

  • 看,我想过做这样的事情。问题是所有的 CSS 都包含在一个 .php 文件中……它也包含在内。以前的开发人员通过包含在 CSS 之外拥有庞大的网络。在所有这一切中,我不知道是什么让我的代码不起作用。我将其范围缩小到由于某种原因无法在文本框上设置宽度属性。
  • 如果您可以访问该文件,或者在页面加载后使用一些 JavaScript 来“调整”它,您是否可以不只是添加 CSS 文件并将其最后链接到头文件中
  • 这正是我最终所做的。我将 CSS 添加到包含文件中,但它仍然不起作用。出于某种原因,它运行良好,但只有在我完全退出 chrome 并重新打开之后。去搞清楚。谢谢你的时间。
猜你喜欢
  • 1970-01-01
  • 2011-03-19
  • 1970-01-01
  • 2011-03-19
  • 1970-01-01
  • 1970-01-01
  • 2014-09-28
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多