Как получить тег опции больше, чем ввод - PullRequest
Новая
       10

Как получить тег опции больше, чем ввод

0 голосов
/ 30 августа 2018

У меня есть вопрос по поводу тега option внутри тега datalist.

Я создаю интерфейс для некоторых пользователей, и мне нужно сделать так, чтобы параметр был больше, чем ввод.

Я использую Firefox, согласно политике компании. И мне нужно получить что-то вроде 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.

Спасибо всем и извините за мой английский.

...