drop down meny

Tonny Kluften · 31 Des 2007

Jeg har en drop down meny som viser 19 av 25 valg, for å se de siste 6 må man scrolle. jeg kan ikke finne ut hvor man setter størrelsen på den drop down boksen slik at alle valg vises på en gang. Er det noen standard her? Et enkelt svar eller en spesiell kode jeg må forandre ?

Helge · 31 Des 2007

legg ut koden og cssen, så skal jeg kikke på det... tror ikke det er noe standardsvar i og med at alle dropdownmenyer er forskjellige

Tonny Kluften · 31 Des 2007

Hmm. Ser ut til at det ikke finnes noen enkel løsning, det er browseren som bestemmer hvor mange som vises.

"If by drop down you mean the standard "select" html element, then there is nothing you can do about it.
Every browser renders it differently, (depending on position of the element) IE7 is showing ca. 30 items, FF2 ca. 20. You can set it's size attribut to higher number which will cause drop down to be rendered as listbox with the visible number of items you specified as size, but that way you loose drop down behavior and you probably don't want that.
AFAIK your only option would be to find custom coded script which uses either flash or javascript/dhtml to render it's own, customized dropdown."

MC2 · 20 Jan 2008

Letteste er å bruke jquery, og det er noen som har gjort dette før (jQuery Select box)

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery Select box</title>
<style type="text/css">
div.selectbox-wrapper {
  position:absolute;
  width:400px;
  background-color:white;
  border:1px solid #ccc;
  margin:0px;
  margin-top:-10px;
  padding:0px;
  font-size:0.8em;
  text-align:left;
  max-height:8000px; /* rediger denne */
  overflow:auto;
}
div.selectbox-wrapper ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
}
div.selectbox-wrapper ul li.selected { 
  background-color: #EAF2FB;
}
div.selectbox-wrapper ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  cursor:pointer;
}

label {
    display: block;
}
.selectbox /* look&fell of  select box*/
{
  margin: 0px 5px 10px 0px;
  padding-left:2px;
  font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size:0.8em;
  width : 10em; 
  display : block;
  text-align:left; 
  background: url('bg_select.png') right;
  /*height:18px;*/
  cursor: pointer;
  border:1px solid #D1E4F6;
  color:#333;
}

select {
	background: url('bg_select.png') right;
}

</style>
<script type="text/javascript" src="http://www.brainfault.com/demo/selectbox/jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="http://www.brainfault.com/demo/selectbox/jquery.selectbox-0.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#myselectbox').selectbox();
});
</script>
</head>

<body>
<form id="forms" method="get">

<label for="field1">Field 1 : </label>
<input type="text" name="field1" id="field1" tabindex="1" /><br/>
<label for="myselectbox">Field 2 : </label>
<select id="myselectbox" name="myselectbox" tabindex="2">
	<option value="1">option 1</option>
	<option value="2" selected="selected">option 2</option>
	<option value="3">option 3</option>
	<option value="4">option 4</option>
	<option value="3">option 3</option>
	<option value="4">option 4</option>
	<option value="3">option 3</option>
	<option value="4">option 4</option>
	<option value="3">option 3</option>
	<option value="4">option 4</option>
	<option value="3">option 3</option>
	<option value="4">option 4</option>
	<option value="3">option 3</option>
	<option value="4">option 4</option>
	<option value="3">option 3</option>
	<option value="4">option 4</option>
	<option value="3">option 3</option>
	<option value="4">option 4</option>
	<option value="3">option 3</option>
	<option value="4">option 4</option>
	<option value="3">option 3</option>
	<option value="4">option 4</option>
	<option value="3">option 3</option>
	<option value="4">option 4</option>
	<option value="3">option 3</option>
	<option value="4">option 4</option>
	<option value="3">option 3</option>
	<option value="4">option 4</option>
	<option value="3">option 3</option>
	<option value="4">option 4</option>
	<option value="3">option 3</option>
	<option value="4">option 4</option>
	<option value="3">option 3</option>
	<option value="4">option 4</option>
	<option value="3">option 3</option>
	<option value="4">option 4</option>
	<option value="3">option 3</option>
	<option value="4">option 4</option>
	

</select>
<input type="submit" />
</form>
</body>
</html>

drop down meny

Tonny Kluften

Administrator

Helge

Profesjonell Googlesøker

Tonny Kluften

Administrator

MC2

New Member