如何使选项标签大于输入

时间:2018-08-30 00:42:40

标签: html twitter-bootstrap-3 html-datalist

我对数据列表标签内的选项标签有疑问。

我正在为某些用户创建一个界面,我需要选择大于输入的选项。

根据公司政策,我正在使用Firefox。 在这种情况下,我需要安装类似Chrome的产品: Chrome:

enter image description here

如您所见,在Firefox中,它保持输入的大小。 Firefox:

enter image description here

我更喜欢Firefox的样式,允许我滚动选项。但是如果它更大,那就更好了。我看不到全名。

这是我的代码,我添加了两个不在项目中的选项以查看其外观: 我的数据列表代码:

/*
function buscaFuncionarios(idImput, idDatalist) {
	    
	    var input  = document.getElementById(idImput);
		var list   = document.getElementById(idDatalist);
		var lDados = <?php echo json_encode(!is_null($this->session->flashdata('funcionarios'))); ?>;

		if (input.readOnly == false && list.children.length == 0) {	

			if (lDados) {	
			
				var funcionarios1 = <?php echo json_encode($this->session->flashdata('funcionarios')); ?>;

				for (var indice in funcionarios1) {
					var option = document.createElement('option');
				   option.label = funcionarios1[indice]["Codigo"] + " - " + funcionarios1[indice]["Nome"];
				   option.value = funcionarios1[indice]["Codigo"];											
				   list.appendChild(option);
				}

		    }

		}

	};
*/
.stylish-input-group .input-group-addon{
    background: white !important; 
    padding: 0px 0px 0px 0px;
}
.stylish-input-group .form-control{
	border-right:0; 
	box-shadow:0 0 0; 
	border-color:#ccc;
}
.stylish-input-group button{
    border:0;
    background:transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-sm-2">
  <div class="input-group stylish-input-group">
    <input type="text" class="form-control" name='post_func2' id="post_func2" maxLength="6" list="list_func_2" onclick="//buscaFuncionarios('post_func2', 'list_func_2');" onfocus="this.select();">
    <datalist id="list_func_2" open="open">
    <option value = '1'>1-Test</option>
    <option value = '2'>2-Test</option>
    </datalist>
		<span class="input-group-addon">
		  <button type="button" id="post_btn_func2" onclick="printaRelatorioFuncionario('post_func2')">
			  <span class="glyphicon glyphicon-search"></span>
      </button>  
    </span>
  </div>
</div>

注意:我正在使用codeigniter和bootstrap。

谢谢大家,对不起我的英语。

0 个答案:

没有答案