文本区域滚动条的问题？ [关闭]答案

【问题标题】：Issue with Text area scroll bar? [closed]文本区域滚动条的问题？ [关闭]
【发布时间】：2014-08-02 10:07:14
【问题描述】：

我在我的应用程序中使用 jQuery mobile 1.4.2。文本区域滚动条存在问题，即滚动条可见。我们如何启用滚动条视图。我需要与以下链接类似的带有滚动条的文本区域。

而我的代码如下，

HTML：

 <div data-role="page" id="privacy_details">
     <div data-theme="a" data-role="header">
         <h3>
             Privacy Policy
         </h3>
     </div>
     
     <div data-role="content">
         <div data-role="fieldcontain">
             <textarea class="txtarea" style="resize: none;">
data
data
data
data
data
data
data
data
data
data
data
data
data
data
             </textarea>
             
             <a href="#" data-rel="back" data-role="button" data-theme="c" target="_blank">OK</a>
         </div>
     </div>
 </div>

CSS：

 .txtarea { height:300px;  max-height: 300px; }

我的截图如下，

【问题讨论】：

保持高度100并检查
我尝试了 100px 的高度。它不起作用
在你的身高之后应用!important
.txtarea { height:300px !important; max-height: 300px; } 有什么东西覆盖了你的身高
很抱歉，即使 !important 不起作用

标签： jquery html css jquery-ui jquery-mobile

【解决方案1】：

嘿，您的内联样式将被覆盖。您需要在您的 textarea 中添加一个类或 id 并在您的 css 文件中设置它的样式。

.txtarea { 

max-height:100px !important;
height:100px !important; 
overflow:scroll !important;

}

你需要添加overflow:scroll !important属性

【讨论】：

您是否将类 txtarea 添加到您的 textarea 中？
在我的测试站点上它工作正常，尝试在第 4189 行的 jquery.mobile-1.4.2.css 中删除它： textarea.ui-input-text.ui-textinput-autogrow { 溢出：隐; }

【解决方案2】：

为textarea设置一个固定的height，然后添加data-autogrow="false"以防止其自动增长。

CSS

textarea {
  height: 150px; /* any value you want */
}

HTML

<textarea data-autogrow="false">

   <!-- text -->

</textarea>

Demo

【讨论】：