内联输入并设置其宽度以适应 CSS 或 jQuery 中的内容

Posted 2023-05-08

【中文标题】内联输入并设置其宽度以适应 CSS 或 jQuery 中的内容

【英文标题】：inline an input and set its width to fit the content in CSS or jQuery

【发布时间】：2021-06-22 04:51:53

【问题描述】：

我正在使用 jQuery QueryBuilder 插件。我在 Bootstrap 3 中有如下输入：

我希望它根据屏幕的宽度来适应内容，在大型显示器上，输入的宽度不会扩大。我尝试了一些 css 技巧，但无法成功。

我设置

input 
  min-width: 100%;
  max-width: 100%;

以及包含input的div

.rule-value-container 
  width: 100%;
  display: inline-block;

现在input 适合内容，但它位于单独的行中。我也尝试了 display: inline-block !important; 与父母 div 但没有工作。

任何建议请我在我的代码中缺少什么？谢谢。

$(document).ready(function()  


$('#queryBuilder').queryBuilder(
    
    filters: [ 
      id: 'name',
      label: 'Name',
      type: 'string',
      operators: ['equal','contains'] 
    ]
 );   
 
 
);

.rule-value-container 
  width: 100%;
  display: inline-block;


input 
  min-width: 100%;
  max-width: 100%;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/css/query-builder.default.min.css">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/js/query-builder.standalone.min.js"></script>
<script src="https://querybuilder.js.org/node_modules/sql-parser-mistic/browser/sql-parser.min.js"></script>


<div id="queryBuilder"></div>

【参考方案1】：

最简单的技巧是使用 css calc() 方法来应用标准分辨率的宽度。接下来使用媒体查询来调整您想要支持的分辨率的宽度百分比。

.rule-value-container 
  width: calc(100% - 42%); /*Can use either % value or px */
  display: inline-block;


@media screen and (min-width: 1400px) 
   .rule-value-container 
    width: calc(100% - <new % value>);
  

更新：添加jquery脚本来调整宽度。

$(document).ready(function()  
   $('#queryBuilder').queryBuilder(
       filters: [ 
        id: 'name',
         label: 'Name',
         type: 'string',
         operators: ['equal','contains'] 
       
      ]
   );   
);

 // Alternate option
$(document).on("change","select.form-control",function() 
  let containerWidth = $('.rule-container').width();
  let ddOne = $(this).parent('.rule-filter-container').width();
  let that = this;
  setTimeout(function() 
    let ddTwo = $(that).parent('.rule-filter-container').siblings('.rule-operator-container').width();
    let delBtnWidth = $('.btn-danger').width();
    let totalWidth = (containerWidth - (ddOne + ddTwo + delBtnWidth)) - 45;
    $(that).parent('.rule-filter-container').siblings('.rule-value-container').width(totalWidth+'px');
  , 50);
);

.rule-value-container 
  display: inline-block;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/css/query-builder.default.min.css">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/js/query-builder.standalone.min.js"></script>
<script src="https://querybuilder.js.org/node_modules/sql-parser-mistic/browser/sql-parser.min.js"></script>


<div id="queryBuilder"></div>

【讨论】：

感谢您的回答，但您的解决方案不起作用。输入宽度未根据屏幕尺寸扩展。输入和删除按钮之间还有很多空白

您需要根据您想要支持的分辨率添加多个媒体查询。您的目标屏幕尺寸是多少？

大小无关紧要。每当用户使用不同的显示器尺寸时，我希望宽度适合内容

@DevTN 使用 Jquery 脚本更新代码，根据容器宽度调整宽度