drop down meny

Tonny Kluften

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 · #2 (**permalink**) 31st December 2007, 00:57

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 · #3 (**permalink**) 31st December 2007, 02:16

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 · #4 (**permalink**) 20th January 2008, 02:54

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

HTML kode:

<!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>

Trådverktøy	Søk i denne tråden
Vis utskriftsvennlig utgave Videresend denne siden med email	Søk i denne tråden: Avansert søk
Visningsmoduser
Linjærmodus Bytt til hybridmodus Bytt til Trådmodus

Lignende tråder
Tråd	Tråd startet av	Forum	Svar	Siste innlegg
Utkast til ny meny	Ctech	Tilbakemeldinger	18	25th June 2009 12:59
drop down meny på topp	Tonny Kluften	Webutvikling	7	15th June 2009 01:12
Dynamisk meny i WP	Amaya	Wordpress	2	28th January 2009 17:19
Meny i JavaScript	KSV	Javascript/Ajax	9	1st April 2008 14:47
meny til ifarme	Stupid boy	Webutvikling	6	22nd April 2007 14:32