草庐IT

javascript - 更改 html 文本框的高度时，页面的其余部分变得拥挤

coder 2023-08-07 原文

我的表单中的某些字段可以是多行的，例如，包括“评论”字段。注意注释全部OK后字段上的间距。

因为用户可以输入多行文本，所以我在页面中添加了以下代码，以便它可以适当调整字段的大小。基本上只需处理文本框上的“OnKeyUp”事件以调整其大小，使其显示高度等于滚动高度。

    function AutoExpandTextbox(txtbox) {
        txtbox.style.height = "1px";
        txtbox.style.height = (4 + txtbox.scrollHeight) + "px";
        ResizeFormGroup(txtbox);
    }
    ....
    <div class="form-group">
        <asp:Label runat="server" AssociatedControlID="commentsTextBox" CssClass="col-lg-2 col-md-2 col-sm-3 col-xs-12 control-label">Comments</asp:Label>
        <div class="col-lg-10 col-md-10 col-sm-9 col-xs-12">
            <asp:TextBox ID="commentsTextBox" onkeyup="javascript: AutoExpandTextbox(this);"  class="form-control input-sm input-full-width" runat="server" MaxLength="255" TextMode="MultiLine"  />

但即使该字段按我想要的方式调整大小，页面上此之后的字段也会挤在一起。这就像浏览器在当前更改后没有保持边距和填充......

由于这种拥挤，我在该事件监听器中添加了一行，它不仅会调整文本框的大小，还会调整包含它的表单组。在 IE 上，这解决了间距问题。但是在 Chrome 上，调整字段大小后的表单仍然像这样变得拥挤。

问题:有没有办法告诉 Bootstrap 或 DOM 适本地更新页面的其余部分？我错过了什么吗？

更新 - 我创建了a PEN to show you this .我尽可能少地放置我的 css(基本上是 css asp.net 给我的)、html 和 javascript，同时仍然重复问题。当你进入这支笔时，开始在注释字段中输入内容，看看字段的垂直间距会发生什么变化。确保在该评论字段中键入多行文本。

最佳答案

这是一个简单的“clearfix”问题，因为您已经 float 了包含表单字段的列。如果不清除这些字段上的 float ，父行将不会尊重 float 子项的高度。

有多种方法可以实现 clearfix。使用您的 Bootstrap 代码，您可以简单地将 .clearfix 类添加到具有 float 子项的父行，以利用 Bootstrap clearfix 方法。或者您也可以在这些行上使用 overflow: auto; 或以其他方式实现您自己的 clearfix 类。

        function AutoExpandTextbox(txtbox) {
            txtbox.style.height = "1px";
            txtbox.style.height = (4 + txtbox.scrollHeight) + "px";
        }
.col-sm-2, .col-sm-10 {
  float: left;
}
.form-group {
  margin-bottom: 25px;
  padding-bottom:25px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div >
    <div class="form-group clearfix">
      <label class="control-label col-sm-2" for="comments">Comments:</label>
      <div class="col-sm-10">
        <textarea class="form-control" id="comments" onkeyup="AutoExpandTextbox(this)"></textarea>
      </div>
    </div>
    <div class="form-group clearfix">
      <label class="control-label col-sm-2" for="field1">Field1:</label>
      <div class="col-sm-10"> 
        <input class="form-control" id="field1" />
      </div>
    </div>
    <div class="form-group clearfix">
      <label class="control-label col-sm-2" for="field2">Field2:</label>
      <div class="col-sm-10"> 
        <input type="password" class="form-control" id="field2">
      </div>
    </div>
    <div class="form-group clearfix"> 
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>
  </div>
</form>

关于javascript - 更改 html 文本框的高度时，页面的其余部分变得拥挤，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44161374/

javascript拥挤34classgthtmlcssasp.nettwitter-bootstrap

有关javascript - 更改 html 文本框的高度时，页面的其余部分变得拥挤的更多相关文章

  1. ruby-on-rails - Ruby on Rails 迁移，将表更改为 MyISAM - 2

    如何正确创建Rails迁移，以便将表更改为MySQL中的MyISAM？目前是InnoDB。运行原始执行语句会更改表，但它不会更新db/schema.rb，因此当在测试环境中重新创建表时，它会返回到InnoDB并且我的全文搜索失败。我如何着手更改/添加迁移，以便将现有表修改为MyISAM并更新schema.rb，以便我的数据库和相应的测试数据库得到相应更新？ 最佳答案 我没有找到执行此操作的好方法。您可以像有人建议的那样更改您的schema.rb，然后运行:rakedb:schema:load，但是，这将覆盖您的数据。我的做法是(假设

  2. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  4. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  5. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  6. ruby - Capistrano 3 在任务中更改 ssh_options - 2

    我尝试使用不同的ssh_options在同一阶段运行capistranov.3任务。我的production.rb说:set:stage,:productionset:user,'deploy'set:ssh_options,{user:'deploy'}通过此配置，capistrano与用户deploy连接，这对于其余的任务是正确的。但是我需要将它连接到服务器中配置良好的an_other_user以完成一项特定任务。然后我的食谱说:...taskswithoriginaluser...task:my_task_with_an_other_userdoset:user,'an_othe

  7. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  8. ruby - 更改 ActiveRecord 中对象的类 - 2

    假设我有一个FireNinja我的数据库中的对象，使用单表继承存储。后来才知道他真的是WaterNinja.将他更改为不同的子类的最干净的方法是什么？更好的是，我很想创建一个新的WaterNinja对象并替换旧的FireNinja在数据库中，保留ID。编辑我知道如何创建新的WaterNinja来self现有FireNinja的对象，我也知道我可以删除旧的并保存新的。我想做的是改变现有项目的类别。我是通过创建一个新对象并执行一些ActiveRecord魔法来替换行，还是通过对对象本身做一些疯狂的事情，或者甚至通过删除它并使用相同的ID重新插入来做到这一点，这是问题的一部分。

  9. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  10. python - 如何读取 MIDI 文件、更改其乐器并将其写回？ - 2

    我想解析一个已经存在的.mid文件，改变它的乐器，例如从“acousticgrandpiano”到“violin”，然后将它保存回去或作为另一个.mid文件。根据我在文档中看到的内容，该乐器通过program_change或patch_change指令进行了更改，但我找不到任何在已经存在的MIDI文件中执行此操作的库.他们似乎都只支持从头开始创建的MIDI文件。 最佳答案 MIDIpackage会为您完成此操作，但具体方法取决于midi文件的原始内容。一个MIDI文件由一个或多个音轨组成，每个音轨是十六个channel中任何一个上的

随机推荐