Avatar billede kurtpedersen Nybegynder
30. august 2003 - 03:29 Der er 14 kommentarer

Kombinationsboks - hvorfor ingen scroll?

Hejsa - jeg har i en formular en kombinationsboks:

<select name="navn" multiple>
<option value=1>1
<option value=2>2
<option value=3>3
</select>

mit problem er et designproblem : Jeg vil gerne have at kombinationsboksen kun fylder en enkelt linie, medmindre man klikker på pilen til højre (scroll).

Jeg har forsøgt at bruge size="1" - så fylder den ganske rigtigt kun en enkelt linie - men så skal man sidde og bladre en enkelt linie ad gangen.

Nogen, der har en løsning?

For at illustrere har jeg her et lille stykke design. Kombinationsboksen i design 1 skal have samme design som design 2. Design 3 viser, hvad der sker med size=1.

http://www.tv-girls.dk/Tina/atest/kombinationsboks.asp

Koden er her :

<html>
<head>
<title>Test af kombinationsbokse</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<Body>Dette er en test på kombinationspokse<br>
<br>
Design 1 er en kombinationsboks
<form method="post" action="kombinationsboks.asp" >
<select name="valg1" Multiple>
<option Value="1">Artikel</option>
<option Value="2">Artikel - Tina</option>
<option Value="3">Artikel - Faktuel</option>
<option Value="4">Artikel - Instruktiv</option>
</select>
<br><br>
Design 2 er en dropdown
<br>
<select name="valg2">
<option Value="1">Artikel</option>
<option Value="2">Artikel - Tina</option>
<option Value="3">Artikel - Faktuel</option>
<option Value="4">Artikel - Instruktiv</option>
</select>
<br><br>
Design 3 er en kombinationsboks med size = 1
<br><br>
<select name="valg3" Multiple size="1">
<option Value="1">Artikel</option>
<option Value="2">Artikel - Tina</option>
<option Value="3">Artikel - Faktuel</option>
<option Value="4">Artikel - Instruktiv</option>
</select>
<br><br>
<input type="hidden" name="foerstegang" value="N">
<input type="submit" value="Vælg" Name="Vælg">
</form>

<%

IF Request.form("foerstegang") = "N" THEN
  Response.write "Der blev valgt følgende valg1 : " & Request.form("valg1")
  Response.write "Der blev valgt følgende valg2 : " & Request.form("valg2")
  Response.write "Der blev valgt følgende valg3 : " & Request.form("valg3")
END IF
%>
 
</body>
</html>
Avatar billede bearhugx Nybegynder
30. august 2003 - 03:35 #1
så vidt jeg husker kan du ikke få en dropdown-boks, hvor du kan vælge multiple ... Så snart du trykker på en valgmulighed vil dropdown-boksen jo kollapse igen...
Avatar billede kurtpedersen Nybegynder
30. august 2003 - 03:41 #2
jep det ved jeg godt, derfor bruger jeg kombinationsboks. Dropdown var bare for at illustrere, hvordan mit design tiltænkes - hvis det ellers kan lade sig gøre. Jeg vil helst ikke skulle bruge mere end en enkelt linie design-plads (og heller ikke skulle vælge fra en længere liste ved kun at kunne se en enkelt linie (som i eksempel 3).
Avatar billede grunken Nybegynder
30. august 2003 - 04:11 #3
så kunne man jo prøve at omgå den lidt ;)

har lige lavet det her eks.

http://www.grunken.dk/exp/394462.html
Avatar billede bearhugx Nybegynder
30. august 2003 - 04:15 #4
grunken --> ved du godt at man maksimalt får lov til at vælge element "1" og "2" ... så snart man flytter musen ned mod "3", så er der ikke længere mouseOver på select-boksen, og den liste, der kom frem forsvinder igen... :-/

Kigger lige i IE :-)
Avatar billede kurtpedersen Nybegynder
30. august 2003 - 04:16 #5
hej grunken. Jeg grinte lidt, da jeg fik den afprøvet. Jeg er spændt på, hvad kravstilleren siger til den løsning. Den løser problemet - selvom jeg havde håbet på et mere stationært design - men din kreativitet har fortjent pointene. Især hvis du kan give mig koden. Jeg går udfra, at man man registrere mere end en enkelt værdi i feltet.
Avatar billede bearhugx Nybegynder
30. august 2003 - 04:20 #6
kurtpedersen --> Vis kilde... Der er hele koden -- i form af en banan()

grunken >> jeg sammenstemmer med kurt... din kode skal i hvert fald have karakter for kreativitet ... Bemærk dog at den stadigvæk rykker layoutet/designet betydeligt, når man flytter musen henover og den anden liste kommer frem ... Det kan ses ved at føre noget "bla bla" tekst rundt om de to select's

og så bør man stadig bemærke at løsningen ikke virker i Mozilla
Avatar billede grunken Nybegynder
30. august 2003 - 04:21 #7
bearhugx, nu har jeg osse kun lige testet i ie, og der virkede det fint!

lad os lige prøve mozilla ;p

du har sikkert ret, men det er jo osse sent ;)
Avatar billede kurtpedersen Nybegynder
30. august 2003 - 04:24 #8
vis kilde fungerer ikke hos mig - ved ikke om det har med opsætning at gøre?
Avatar billede bearhugx Nybegynder
30. august 2003 - 04:28 #9
underligt -- men du får så lige grunkens kode herfra :
<script LANGUAGE=javascript>
function banan(){

a = document.getElementById('sel1')
b = document.getElementById('sel2')

if (a.style.display == "inline") {
a.style.display = "none";
b.style.display = "inline";
}else{
a.style.display = "inline";
b.style.display = "none";
}
}
</SCRIPT>


<div ID="sel1" NAME="Reg1" STYLE="display:inline;width:100px;" onmouseover="banan();">
<select SIZE="1" style="width:100px;">
<option VALUE="1">1</option>
</select>
</div>

<div ID="sel2" STYLE="display: none;position:absolute;" onmouseout="banan();">
<form>
  <select style="width:100px;" multiple>

  <option VALUE="1">1</option>
  <option VALUE="2">2</option>
  <option VALUE="3">3</option>
  <option VALUE="4">4</option>
  <option VALUE="5">5</option>
  <option VALUE="6">6</option>

  <option VALUE="7">7</option>
  <option VALUE="8">8</option>
  <option VALUE="9">9</option>
  <option VALUE="10">10</option>
</select>
</div>
Avatar billede grunken Nybegynder
30. august 2003 - 04:31 #10
hehe, du er hurtig bear ;p

kurt efter lidt test i gecko-browsere, så vil jeg ikke anbefale dig at bruge den løsning...

hold spørgsmålet åbent lidt, og der kommer nok en med en lys idé

og når du nu har problemer med din vis kilde ;), så vil jeg anbefale dig at tømme dine temporary internet-files, det løser den!
Avatar billede grunken Nybegynder
30. august 2003 - 04:48 #11
og det her er så lidt bedre i mozilla, og nu daffer jeg til køjs ;)

<SCRIPT LANGUAGE=javascript>
function banan(){

a = document.getElementById('sel1')
b = document.getElementById('sel2')

if (a.style.display == "inline") {
a.style.display = "none";
b.style.display = "inline";
}else{
a.style.display = "inline";
b.style.display = "none";
}
}
</SCRIPT>


<DIV ID="sel1" NAME="Reg1" STYLE="display:inline;width:100px;" onmouseover="banan();">
<SELECT SIZE="1" style="width:100px;">
<OPTION VALUE="1">1</OPTION>
</SELECT>
</DIV>

<DIV ID="sel2" STYLE="display: none;position:absolute;" onblur="banan();">
<FORM>
  <SELECT style="width:100px;" multiple>
  <OPTION VALUE="1">1</OPTION>
  <OPTION VALUE="2">2</OPTION>
  <OPTION VALUE="3">3</OPTION>
  <OPTION VALUE="4">4</OPTION>
  <OPTION VALUE="5">5</OPTION>
  <OPTION VALUE="6">6</OPTION>
  <OPTION VALUE="7">7</OPTION>
  <OPTION VALUE="8">8</OPTION>
  <OPTION VALUE="9">9</OPTION>
  <OPTION VALUE="10">10</OPTION>
</SELECT>
</DIV>

g'nat gutter
Avatar billede grunken Nybegynder
30. august 2003 - 04:49 #12
sådan seføli *G*

<div ID="sel2" STYLE="display: none;position:absolute;">
<form>
  <select style="width:100px;" multiple onblur="banan();">

  <option VALUE="1">1</option>
  <option VALUE="2">2</option>
  <option VALUE="3">3</option>
  <option VALUE="4">4</option>
  <option VALUE="5">5</option>
  <option VALUE="6">6</option>

  <option VALUE="7">7</option>
  <option VALUE="8">8</option>
  <option VALUE="9">9</option>
  <option VALUE="10">10</option>
</select>
</div>
Avatar billede kurtpedersen Nybegynder
30. august 2003 - 04:59 #13
grunk : det anede mig, at den ikke går i praksis - og jeg holder den åben lidt endnu.

Vedr. temporary internet-files - dem har jeg 67.000 af - og det fylder 1,18 GB - desværre kan man ikke slette alle filer på engang :(
Avatar billede roenving Novice
27. oktober 2003 - 10:57 #14
Måske en ide at lukke spørgsmålet ...

-- evt. efter at du har trykket på [ctrl]+a og derefter [skift]+[delete] i filvisning !-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester