时间戳

首页 > 解决方案 > inline an input and set its width to fit the content in CSS or jQuery

javascript - inline an input and set its width to fit the content in CSS or jQuery

问题描述

I am using jQuery QueryBuilder plugin. I have an input in Bootstrap 3 as below : enter image description here

I want it to fit the content based on the width of the screen, on large monitors the input doesn't enlarge in width. I tried some css tricks but couldn't make it work.

I set

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

and the div containing the input

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

now the input fits the content but it's in separate line. I tried display: inline-block !important; as well with parents div but didn't work.

Any suggestions please what I am missing in my code ? Thank you.

$(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>

标签： javascripthtmljquerycsstwitter-bootstrap

解决方案

最简单的技巧是使用 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>

推荐阅读