[CSS]Dropdown pijltjes weglaten bij printen formulier

[mike643]

Hoi,

Ik ben een formulier aan het maken met allemaal dropdown menuutjes. Ik wil dit graag laten uitprinten, maar natuurlijk blijven de dropdownpijltjes op de geprintte pagina's te zien. Ik wil dit graag weglaten, het schijnt te kunnen met css. Dus heb ik de volgende code in mijn HTML geplakt:

code:

<link href="print.css" rel="stylesheet" type="text/css" media="print">

En dit in mijn print.css

code:

ul, img, p, ... { display: none; }
form, table, td { display: block; }

Helaas wil dit niet werken, kan iemand mij hiermee helpen?

[Verwijderd]

Dan moeten die pijltjes natuurlijk ook opgebouwd zijn door CSS. Kun je ons een voorbeeldje verschaffen?

[orf]

Je wilt de geselecteerd optie van de selects wél tonen, maar het knopje van de select zelf niet?
Dat is niet heel makkelijk, omdat er niet zo veel te stylen valt aan een select.
Met JavaScript (DOM) kun je de selects replacen naar input type="text". Dat zou je dan aan een 'print button' kunnen knopen.

[mike643]

orf schreef op maandag 03 april 2006 @ 22:17:
Je wilt de geselecteerd optie van de selects wél tonen, maar het knopje van de select zelf niet?
Dat is niet heel makkelijk, omdat er niet zo veel te stylen valt aan een select.
Met JavaScript (DOM) kun je de selects replacen naar input type="text". Dat zou je dan aan een 'print button' kunnen knopen.

Ik snap niet percies wat je bedoelt eigenlijk

[orf]

is dat wat je wilt of niet?
Wil je de gekozen optie tonen, maar de select zelf niet? Dat begrijp ik uit je openings post.
Met DOM (zoekterm) kun je selects replacen naar textfields. Textfields kun je wel simpel stylen.

[mike643]

orf schreef op maandag 03 april 2006 @ 22:26:
is dat wat je wilt of niet?
Wil je de gekozen optie tonen, maar de select zelf niet? Dat begrijp ik uit je openings post.
Met DOM (zoekterm) kun je selects replacen naar textfields. Textfields kun je wel simpel stylen.

Ik wil de gekozen optie tonen, maar als ik de pagina uitprint moet het pijltje van de dropdown menu niet weergegeven worden. De rest kan gewoon blijven staan zoals op het scherm staat.

[JHS]

Dat is denk ik niet met CSS op te lossen, en daarom zal je waarschijnlijk, zoals * orf al aangaf met behulp van javascript de gekozen waarde uit de select moeten halen en in tekstvorm plaatsen als er op de printknop gedrukt wordt .

Het nadeel hieraan is wel dat het print commando van de browser niet af te vangen is zover ik weet. Een andere oplossing zou het genereren van een specifieke printpagina met een serverside script zijn.

[mike643]

En kunnen jullie mij vertellen hoe ik dit kan doen?

[Verwijderd]

Als je er nou een element omheen zet, die net wat kleiner is, met een overflow: hidden, zodat het pijltje wegvalt?

Geen idee of dat in IE werkt overigens, maar in Fx is het ongetwijfeld te doen

(pak bijvoorbeeld je <label> element wat je toch al hebt en nest daar je select in, zodat je een impliciete referentie hebt. Of als je <label> erachter staat, stukje verplaatsen zodat ie er overheen valt.)

code:

<style type="text/css">
select {width: 200px;}
label {
border-right: 1px solid red;
width: 180px;
overflow: hidden;
}
</style>
<label>
<select id="myselect">
<option>item</option>
<option>item</option>
<option>item</option>
<option>item</option>
<option>item</option>
</select>
</label>

daar moet je wel verder mee kunnen knoeien

(de tweede optie werkt niet in IE)

[ Voor 70% gewijzigd door Verwijderd op 04-04-2006 09:19 ]

[mike643]

Verwijderd schreef op dinsdag 04 april 2006 @ 09:03:
Als je er nou een element omheen zet, die net wat kleiner is, met een overflow: hidden, zodat het pijltje wegvalt?

Geen idee of dat in IE werkt overigens, maar in Fx is het ongetwijfeld te doen

(pak bijvoorbeeld je <label> element wat je toch al hebt en nest daar je select in, zodat je een impliciete referentie hebt. Of als je <label> erachter staat, stukje verplaatsen zodat ie er overheen valt.)

code:

<style type="text/css">
select {width: 200px;}
label {
border-right: 1px solid red;
width: 180px;
overflow: hidden;
}
</style>
<label>
<select id="myselect">
<option>item</option>
<option>item</option>
<option>item</option>
<option>item</option>
<option>item</option>
</select>
</label>

daar moet je wel verder mee kunnen knoeien

(de tweede optie werkt niet in IE)

Het probleem is dat ik met meerdere dropdownmenu's zowel rechts als eronder te maken hebt, dit gaat dan fout als ik het op de manier doe zoals je hebt gezegt

[André]

Beste mike643, dan moet je wat gaan spelen met classes, dit is echt basic kennis die je in huis moet hebben als je met websites bezig gaat. Verder is het niet de bedoeling om op elk probleem door te vragen maar eerst zelf proberen of je er uit komt.

Je hebt nu al aardig wat tips gekregen, kom je er nu nog niet uit? Wat heb je nog verder geprobeerd dan?

[ Voor 18% gewijzigd door André op 04-04-2006 19:54 ]

[mike643]

André schreef op dinsdag 04 april 2006 @ 19:53:
Beste mike643, dan moet je wat gaan spelen met classes, dit is echt basic kennis die je in huis moet hebben als je met websites bezig gaat. Verder is het niet de bedoeling om op elk probleem door te vragen maar eerst zelf proberen of je er uit komt.

Je hebt nu al aardig wat tips gekregen, kom je er nu nog niet uit? Wat heb je nog verder geprobeerd dan?

Helaas heb ik de tips gevolgd, maar ik ben er nog niet uitgekomen. Ik heb erg veel gezocht op internet maar ook daar kan ik het antwoord niet vinden helaas.

[X-Lars]

Als je alle opties uit je dropdown wilt laten zien op papier kun je dat met Javascript doen. De oplossing ligt dan in het aanpassen van het size-attribuut van je select-element (die waarde moet gelijk worden aan het aantal options in je select). Mocht je dat willen kan ik morgen wel ff het stukje Javascript posten, maar het is natuurlijk een heel mooi iets om zelf te proberen

[mike643]

X-Lars schreef op dinsdag 04 april 2006 @ 20:21:
Als je alle opties uit je dropdown wilt laten zien op papier kun je dat met Javascript doen. De oplossing ligt dan in het aanpassen van het size-attribuut van je select-element (die waarde moet gelijk worden aan het aantal options in je select). Mocht je dat willen kan ik morgen wel ff het stukje Javascript posten, maar het is natuurlijk een heel mooi iets om zelf te proberen

Nee het gaat er niet om dat ik alle opties wil laten zien, maar ik wil dat als ik de pagina uitprint met alle dropdowns menu's dat het al die pijltje weghaalt die heel lelijk zijn om op papier te hebben.
Als het ware moet hij de layout van de dropdown's menu's weergeven als een tekstveld.

[BtM909]

Kijk nog eens goed naar de oplossing van mophor en de tips van André.

Helaas heb ik de tips gevolgd, maar ik ben er nog niet uitgekomen. Ik heb erg veel gezocht op internet maar ook daar kan ik het antwoord niet vinden helaas.

Dit is natuurlijk geen antwoord he. Wat heb je zelf geprobeerd, lees je even in het stuk van mophor, lees je in de tips van André (CSS en class gebruik) en kom daarna pas weer terug

[Excibular]

Misschien is het volgende een makkelijke oplossing voor je. Een print knop maken en dmv php een nieuw formulier creeeren met alleen maar fixed size list box met daarin de opties en de ingevulde velden. (ik hoop dat ik duidelijk ben.)

Dus iets van:

<select class="select" name="optie" size="1">
<option>Kies een optie</option>
<option>optie 1</option>
<option>optie 2</option>
</select>

En die met php transformeren naar een output pagina die het volgende toont:
<select class="select" name="optie" size="3">
<option>$optie</option>
<option>optie 1</option>
<option>optie 2</option>
</select>

Bij hele grote selects (bijvoorbeeld een land select) zou je ervoor kunnen kiezen om op de print pagina alleen de $optie te laten terugkomen en de eerste paar opties. Anders wordt het formulier zo groot.

[ Voor 213% gewijzigd door Excibular op 05-04-2006 14:32 ]

[Verwijderd]

je kan het kleine zwarte pijltje met css dezelfde kleur geven als de achtergrond, dan issie ook weg..

[Verwijderd]

Ik heb even geen zin om het helemaal door te lezen.
Maar kun je niet 2 stylesheets maken:

1 voor het scherm en 1 voor de afdruk.

Je hebt dan bijvoorbeeld:
een selectbox EN een text-field met de geselecteerde waarde erin

css voor het scherm:
laat je de selectbox zien en het text-field niet

css voor de afdruk:
laat je de selectbox niet zien en het text-field wel


Of (dankzij) het niet willen lezen: wil je alle opties van de selectbox gewoon afdrukken?

[frickY]

Kun je niet de rechter 25 pixels van de pulldown eraf clippen?