28172 sujets

CSS et mise en forme, CSS3

[Résolu] Comment fixer les <select> à 280px ?

Bonjour,

Ces codes fonctionnent très bien.
Au passage encore merci à andry.aime pour son intervention efficace sur mon dernier post.

Néanmoins, me voici avec un autre mini-souci :
Comment fixer le select à une taille fixe (ici= 280px"),
même si l'(ou les) option du select parent débordent de cette largeur de 280px,
du fait de leur ligne de texte trop grande ?

D'avance, un grand merci.


Voici un bout de code entre head et /head :

// categorie00
function gocategorie00() {
	document.getElementById("loader00").style.display = "inline";
	getXhr();
	// On définit ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function() {
		// On ne fait quelquechose que si l'on a tout reçu et que le serveur est OK
		if (xhr.readyState == 4 && xhr.status == 200) {
			leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options à la liste
			document.getElementById('td01').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","php/ajaxcategorie01.php",true);
	// Ne ps oublier ç pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Ne ps oublier de poster les arguments
	// ici l'id de cat00
	sel = document.getElementById('categorie00');
	idcategorie00 = sel.options[sel.selectedIndex].value;
	xhr.send("parent="+idcategorie00);
	document.getElementById("tr01").style.display = "";
	for (hidden=2; hidden<6; hidden++) {
		document.getElementById("tr0"+hidden).style.display = "none";
	}
	document.getElementById("loader00").style.display = "none";
}


Voici le code HTML : 

    <table id="tableoptions" border="0" cellspacing="0" style="vertical-align:middle;">
    	<tr>
        <td width="150"></td>
        <td width="310"></td>
        </tr>
        <tr>
        <td colspan="2" style="padding:7px;" bgcolor="#0E72B5" class="blanc bold">Prix en ligne instantané</td>
        </tr>
        <tr>
        <td colspan="2" style="padding:7px;">
        Afin d'établir un devis,<br>veuillez choisir parmi toutes les options suivantes :</td>
        </tr>
        <tr id="tr00">
        <td style="padding:7px;">Document</td>
        <td style="padding-left:5px;" id="td00">
        	<select name="categorie00" id="categorie00" style="width:280px;" onChange="gocategorie00();">
            <option value="none">Choisissez, svp !</option>
            <?php
				require_once("php/connexionMysql.inc.php");
				$query = mysql_query("SELECT * FROM shop_categorie00 ORDER BY libelle");
				while ($back = mysql_fetch_assoc($query)) {
					echo "\t\t\t\t<option value='".$back['id']."' >".$back['libelle']."</option>\n";		
				}
			?>
            </select>
            <span id="loader00" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
        </td>
        </tr>
        <tr id="tr01" style="display:none;">
        <td style="padding:7px;">Descriptif</td>
        <td style="padding-left:5px;" id="td01">
        	<select name="categorie01" id="categorie01" style="width:280px;">
                <option value="none">Choisissez, svp !</option>
                <span id="loader01" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
            </select>
        </td>
        </tr>
        <tr id="tr02" style="display:none;">
        <td style="padding:7px;">Format</td>
        <td style="padding-left:5px;" id="td02">
        	<select name="categorie02" id="categorie02" style="width:280px;">
                <option value="none">Choisissez, svp !</option>
                <span id="loader02" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
            </select>
        </td>
        </tr>
        <tr id="tr03" style="display:none;">
        <td style="padding:7px;">Papier</td>
        <td style="padding-left:5px;" id="td03">
        	<select name="categorie03" id="categorie03" style="width:280px;">
                <option value="none">Choisissez, svp !</option>
                <span id="loader03" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
            </select>
        </td>
        </tr>
        <tr id="tr04" style="display:none;">
        <td style="padding:7px;">Prix d'impression</td>
        <td style="padding-left:5px;" id="td04"><span class="c14 bold"><?php echo $pvht."€ HT"; ?></span><span class="c10"><?php echo "( ".$pvht."€ TTC)"; ?></span></td>
        </tr>
        <tr id="tr05" style="display:none;">
        <td style="padding:7px;">&nbsp;</td>
        <td style="padding-left:5px;" id="td05"><a href="panier.php">Ajouter au panier</a></td>
        </tr>
    </table>


Pour info, voici "ajaxcategorie01.php":

<?php
	require_once("connexionMysql.inc.php");
	echo "<select name='categorie01' id='categorie01' onchange='gocategorie01()'>";
	if (isset($_REQUEST['parent'])) {
		$query = mysql_query("SELECT * FROM shop_categorie01".
			" WHERE parent=".$_REQUEST['parent'].
			" ORDER BY id");
		while ($back = mysql_fetch_assoc($query)) {
			echo "<option value='".$back['id']."' >".$back['libelle']."</option>";	
		}
	}
	echo "</select>";
?>

Modifié par jytest (18 Nov 2011 - 13:39)
Salut,

La fixation de la largeur de l'élément select s'effectue de la même façon que celle de tout élément susceptible de recevoir des dimensions : en CSS.

Soit dit en passant, sous IE jusqu'à la version 7, le contenu des éléments option est rogné s'il dépasse la largeur de l'élément select, le cadre contenant les options refusant de s'adapter à la largeur nécessaire à l'affichage de ces dernières.
Merci pour ta réponse.
J'ai déjà testé avec les <option> dépendant des <select> en les mettant à cette width !
Mais cela ne fonctionne pas, ni sous IE, ni sous les autres (firefox, chrome, safari...) !
Modifié par jytest (18 Nov 2011 - 13:38)
Sujet clos
Aller à