Jump to content
brunoais

Adaptar o tamanho do select ao conteúdo

Recommended Posts

brunoais

Eu tenho este código aqui:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<script type="text/javascript" src="js/classListSubstitute.js"></script>
<script type="text/javascript"></script>

	<script type="text/javascript">


var multipleSelects = 
	function () {

		var uniqueId = -1;

		return function theMultipleSelects (targetPlace, showDeleteButton){
				uniqueId++;


				this.targetPlace = targetPlace;
				this.container = document.createElement('p');
				this.container.classList.add('inputLine');

				this.targetPlace.appendChild(this.container);

				this.labelsNames = ['Company', 'Profession'];
				this.idsAndNames = ['select_company', 'select_work'];
				this.options = 	[
								 {'value': 'this', 'text': 'My company'}, 
								 {'value': 'Other', 'text': 'Other company'} //the last one has no comma!
								]
				// Here you tell where is the information about the dates
				// Each position in the main array shows where date, month, year (by this order) for each date that exists.


				this.selects = new Array (this.labelsNames.length);
				this.multipleSelects = new Array (this.labelsNames.length);
				this.labels = new Array (this.labelsNames.length);


				for(var i = 0; i < this.labels.length; i++){
					this.labels[i] = document.createElement('label');
					this.labels[i].innerHTML = this.labelsNames[i] + ':';
					this.labels[i].setAttribute("for", this.idsAndNames[i]+ '' + uniqueId);

					this.selects[i] = document.createElement('select');
					this.selects[i].setAttribute("id", this.idsAndNames[i] + '' + uniqueId);
					this.selects[i].setAttribute("name", this.idsAndNames[i] + '[]');

					this.multipleSelects[i] = document.createElement('select');
					this.multipleSelects[i].setAttribute("id", 'multiple_' + this.idsAndNames[i] + '' + uniqueId);
					this.multipleSelects[i].setAttribute("name", 'multiple_' + this.idsAndNames[i] + '[]');
					this.multipleSelects[i].setAttribute("multiple", 'multiple');
					this.multipleSelects[i].classList.add('variableMultipleSelect');
					//this.multipleSelects[i].setAttribute("size", '3');

					// Create the special empty space to force the user to choose one option
					var option = document.createElement('option');
					option.value = '';
					option.innerHTML = '';
					option.disabled = "disabled";
					option.selected = "selected";
					this.selects[i].appendChild(option);

					// Create all options in the main select
					for( var j = 0; j < this.options.length; j++){
						option = document.createElement('option');
						option.value = this.options[j].value;
						option.innerHTML = this.options[j].text;
						this.selects[i].appendChild(option);
					}

					// Create the way to copy all the user selects to the multiple select

					// First a listener
					var copyOption = 
						function (select, multiple) {
							var removeFromSelect = 
								function (e){
									e.target.parentNode.remove(e.target.parentNode.selectedIndex);
								}
							return function (e){
								var newOption = select.options[select.selectedIndex].cloneNode(true);
								newOption.addEventListener('click', removeFromSelect, false);
								multiple.add(newOption, null);
							}
						}(this.selects[i], this.multipleSelects[i]);

					this.selects[i].addEventListener('change', copyOption, false);


					this.container.appendChild(this.labels[i]);
					this.container.appendChild(this.selects[i]);
				}
				this.container.appendChild(document.createElement('br'));
				for(var i = 0; i < this.multipleSelects.length; i++){
					this.container.appendChild(this.multipleSelects[i]);
				}


		}
	};

</script>


<script type="text/javascript">

	window.onload = function (){

		multipleSelects = multipleSelects();

		new multipleSelects(document.getElementById('multipleSelectbox'), true);

		document.getElementById('newMultipleSelectInputLine').addEventListener('click',
				function (){
					 new multipleSelects(document.getElementById('multipleSelectbox'), true);
				}
			, false);
	}

</script>

<style type="text/css">
	.wrongValue {
		border-color: red;
	}

	select.variableMultipleSelect{
		min-height:40px;
		max-height:100px;
		overflow:scroll; /* Make it always scrollable */
	}
</style>
</head>

<body>

<form method="post" action="" enctype="multipart/form-data">
	<div id="multipleSelectbox">
	</div>
	<div>
		<img src="img/plus.png" id="newMultipleSelectInputLine" title="adicionar linha">
	</div>
</form>

</body>

</html>

O que ele faz é simples. O js controla e mantém as referencias para cada um dos nodes do HTML que cria. O que ele cria é um select box e um selectbox multiple. O CSS dá ordem para o selectbox ter o tamanho correspondente.

O meu objetivo é simples. Como é que eu consigo obter o comportamento que obtenho no selectbox multiple segundo a especificação do HTML5 de modo a comportar-se exatamente igual a como se comporta no firefox 3.6.16 usando exclusivamente CSS?

Ou seja: Eu tenho um certo comportamento no firefox 3.6.16 quero que se comporte da mesma maneira no firefox 4 e tudo tem que ser controlado em CSS.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.