Oprettet søn. d. 15. juli 2012 kl. 14:56:34
30 point uddelt | 18 kommentarer
Rulleliste ændring af design?
Ifm noget mobil-webside med rulleliste, er der jo ingen grund til, den højre side af selectboksen er med, thi der popper en mere læsevenlig liste frem, hvorfra brugere så kan vælge.For at spare plads vil jeg gerne have denne grafik i højre side fjernet eller måske udskiftet med en grafik, er det muligt og i bekræftende fald, hvordan?
Mvh. rwj
Skrevet søn. d. 15. juli 2012 kl. 15:19:48| #1
taler du om en HTML selectboks eller? Kan du give et link og/eller en lidt nærmere forklaring?
Skrevet søn. d. 15. juli 2012 kl. 15:31:09| #2
rwj (nedlagt brugerprofil) (16.345 point)
Ja, det er en HTML box, som jeg kunne tænke mig at ændre på, noget i denne stil:
<select size="1" name="soeg" id="t1" onchange="this.form.submit()" style="margin:0px 0px 0px 0px; width:180px;height: 35px; border-radius:20px;font-size:17px;">
men jeg vil som sagt gerne fjerne den højre knap, da den er overflødig.
<select size="1" name="soeg" id="t1" onchange="this.form.submit()" style="margin:0px 0px 0px 0px; width:180px;height: 35px; border-radius:20px;font-size:17px;">
men jeg vil som sagt gerne fjerne den højre knap, da den er overflødig.
Skrevet søn. d. 15. juli 2012 kl. 15:41:13| #3
enkelte elementer - heriblandt selectboksen - er styret ret kraftigt ud fra klienten så du har ikke mange muligheder for at pille ved indstillingerne. Bedste alternativ er formentlig at kigge på jQuery og deres UI kontroller eller kigge på deres mobile løsninger.
Skrevet søn. d. 15. juli 2012 kl. 15:46:59| #4
rwj (nedlagt brugerprofil) (16.345 point)
ja, tænkte nok det var noget i den stil, så det vil jeg gøre.
smid et svar, og fortsat god søndag herfra.
mvh. rwj
smid et svar, og fortsat god søndag herfra.
mvh. rwj
Skrevet søn. d. 15. juli 2012 kl. 17:10:11| #5
olebole (216.878 point)
<ole>
Hvad mener du helt præcist med: "den højre side af selectboksen er med"? Måske, der alligevel findes et 'lusket cowboytrick' =)
/mvh
</bole>
Hvad mener du helt præcist med: "den højre side af selectboksen er med"? Måske, der alligevel findes et 'lusket cowboytrick' =)
/mvh
</bole>
Skrevet søn. d. 15. juli 2012 kl. 17:56:55| #6
rwj (nedlagt brugerprofil) (16.345 point)
den højre side, altså der hvor rullelisten er "grå" og har en nedadgående pil. Den er jo overflødigt ifm mobilsider.
havde du en trick:-)?
havde du en trick:-)?
Skrevet søn. d. 15. juli 2012 kl. 19:22:39| #7
olebole (216.878 point)
Du kan prøve dette eksempel som udgangspunkt for videre udvikling:
<div style="width:80px;overflow:hidden;border:1px solid red">
<select onchange="this.nextSibling.value=this.options[this.selectedIndex].text"
style="position:absolute;width:100px;opacity:0">
<option value="1">Item #1</option>
<option value="2">Item #2</option>
<option value="3">Item #3</option>
</select><input style="width:100%;border:0" type="text">
</div>
<select onchange="this.nextSibling.value=this.options[this.selectedIndex].text"
style="position:absolute;width:100px;opacity:0">
<option value="1">Item #1</option>
<option value="2">Item #2</option>
<option value="3">Item #3</option>
</select><input style="width:100%;border:0" type="text">
</div>
Skrevet søn. d. 15. juli 2012 kl. 19:25:53| #8
olebole (216.878 point)
NB: Der må ikke være white-space mellem SELECT og INPUT. Så vil nextSibling nemlig være textNoden - ikke INPUT elementet.
Hvis du skal understøtte ældre IE'er, skal du også udvide dine opacity styles med et Alpha filter
Hvis du skal understøtte ældre IE'er, skal du også udvide dine opacity styles med et Alpha filter
Skrevet søn. d. 15. juli 2012 kl. 19:57:51| #9
rwj (nedlagt brugerprofil) (16.345 point)
Tak, det virker i alle browsere, dog har jeg som du selv henviser til, ikke tjekket ældre IE.
Jeg ville dog gerne have at der stod noget i boksen som udgangspunkt, og gjorde sådan, men det virker ikke, har du et forslag til det?
<div style="width:80px;overflow:hidden;border:1px solid red">
<select onchange="this.nextSibling.value=this.options[this.selectedIndex].text"
style="position:absolute;width:100px;opacity:0">
<option selected value="0">Vælg Farve</option>
<option value="1">Item #1</option>
<option value="2">Item #2</option>
<option value="3">Item #3</option>
</select><input style="width:100%;border:0" type="text">
</div>
Til Keysersoze, jeg giver pointene til olebole, da jeg kan bruge svaret fra ham, sorry:-)
Jeg ville dog gerne have at der stod noget i boksen som udgangspunkt, og gjorde sådan, men det virker ikke, har du et forslag til det?
<div style="width:80px;overflow:hidden;border:1px solid red">
<select onchange="this.nextSibling.value=this.options[this.selectedIndex].text"
style="position:absolute;width:100px;opacity:0">
<option selected value="0">Vælg Farve</option>
<option value="1">Item #1</option>
<option value="2">Item #2</option>
<option value="3">Item #3</option>
</select><input style="width:100%;border:0" type="text">
</div>
Til Keysersoze, jeg giver pointene til olebole, da jeg kan bruge svaret fra ham, sorry:-)
Skrevet søn. d. 15. juli 2012 kl. 20:13:52| #10
rwj (nedlagt brugerprofil) (16.345 point)
jeg tilføjede noget kode, og herefter fik jeg så tekst i boksen. Jeg ved ikke om det er den bedste metode, men sådan ser koden ud nu:
<div style="width:80px;overflow:hidden;border:1px solid red">
<select onchange="this.nextSibling.value=this.options[this.selectedIndex].text"
style="position:absolute;width:100px;opacity:0">
<option value="1">Item #1</option>
<option value="2">Item #2</option>
<option value="3">Item #3</option>
</select><input style="width:100%;border:0" type="text"><b><div style="margin-top:-19px;">Vælg farve</div></b>
</div>
<div style="width:80px;overflow:hidden;border:1px solid red">
<select onchange="this.nextSibling.value=this.options[this.selectedIndex].text"
style="position:absolute;width:100px;opacity:0">
<option value="1">Item #1</option>
<option value="2">Item #2</option>
<option value="3">Item #3</option>
</select><input style="width:100%;border:0" type="text"><b><div style="margin-top:-19px;">Vælg farve</div></b>
</div>
Skrevet søn. d. 15. juli 2012 kl. 20:35:07| #11
rwj (nedlagt brugerprofil) (16.345 point)
Desværre jeg var lidt for hurtigt ude, min løsning på tekst i boksen virker ikke, da et valg af listen vil medføre, at der står 2 tekster samme sted. Det ser ud af h.. til og duer naturligvis ikke. Øv:-(
Skrevet søn. d. 15. juli 2012 kl. 21:06:38| #12
olebole (216.878 point)
Det er helt elementær HTML: Skriv teksten i INPUT elementets value attribut =)
Skrevet man. d. 16. juli 2012 kl. 07:56:29| #13
rwj (nedlagt brugerprofil) (16.345 point)
Selvfølgelig, det havde jeg lige overset, og er fikset nu. Virker perfekt.
Tak for hjælpen, smider du et svar?
Iøvrigt god sommer.
Mvh. rwj
Tak for hjælpen, smider du et svar?
Iøvrigt god sommer.
Mvh. rwj
Skrevet man. d. 16. juli 2012 kl. 10:25:30| #14
olebole (216.878 point)
Ellers tak, jeg samler ikke point. Men keysersoze gav dig faktisk et svar, som er helt korrekt, så prøv at spørge ham =)
SELECT elementet er lidt en bastard af HTML og OS. Grunden til, at det her overhovedet kan lade sig gøre, er, at selve SELECT'ens 'tekstfelt' og pilknap ligger direkte i dokumentet og derfor skal kunne modtage CSS som opacity. Til gengæld viser løsningen også tydeligt, at selve popup'en er af 'anden etnisk oprindelse'. Den hører faktisk nærmere til i styresystemet og lader sig ikke sådan gemme
SELECT elementet er lidt en bastard af HTML og OS. Grunden til, at det her overhovedet kan lade sig gøre, er, at selve SELECT'ens 'tekstfelt' og pilknap ligger direkte i dokumentet og derfor skal kunne modtage CSS som opacity. Til gengæld viser løsningen også tydeligt, at selve popup'en er af 'anden etnisk oprindelse'. Den hører faktisk nærmere til i styresystemet og lader sig ikke sådan gemme
Skrevet man. d. 16. juli 2012 kl. 12:53:18| #15
jeg overlever uden :)
Skrevet man. d. 16. juli 2012 kl. 13:37:03| #16
rwj (nedlagt brugerprofil) (16.345 point)
Ok til begge, jeg siger i hvert fald mange tak med ønske om en god sommer herfra.
mvh. rwj
mvh. rwj
Skrevet man. d. 16. juli 2012 kl. 14:36:55| #17
olebole (216.878 point)
Selvtak og i lige måde. Hvis ikke soze ønsker point, bør du selv lægge et svar og acceptere det, så tråden lukkes =)
Skrevet man. d. 16. juli 2012 kl. 16:38:55| #18
Accepteret svar!30 point tildelt
rwj (nedlagt brugerprofil) (16.345 point)
hermed gjort
Log ind
Seneste spørgsmål
Detect mobil telefon med CSS3
Oprettet den 12. juni 2013 kl. 07.23
hulla giver 60 point for svar | Giv et svar »
To css problemer i IE
Oprettet den 11. juni 2013 kl. 19.45
david78 giver 100 point for svar | Giv et svar »
Dropdown menu
Oprettet den 11. juni 2013 kl. 17.37
christian94 giver 100 point for svar | Giv et svar »
Seneste guides
Seneste nyheder
IT Kurser
Samarbejdspartnere
Udgiver · © 2013 Computerworld A/S · Hørkær 18 · 2730 Herlev · Tlf.: 77 300 300 · Fax: 77 300 301 · Brug af personoplysninger