input maximale breedte naast variabele lengte text

[That Guy]

Hello allemaal,

voordat ik begin, bekijk even dit plaatje:

Legenda: groene text = span, paarse rand is div, groene rand = input-text. Op het moment is breedte van input niet aangegeven en dus standaard (150 px oid?).




Wat ik wil is dat de input (met groene rand) 100% breedte wordt minus de groene text. Het punt is dat ik de breedte wel in px. kan aangeven, maar de groene text is variabel en wordt dus soms langer en soms korter.

Wie weet hier een goede oplossing voor?


Alvast bedankt.

 

[ErikBooy007]

Ik heb het idee dat csshunter zo met een prachtige pure-CSS oplossing gaat komen

Maar zou je (mocht het met CSS niet kunnen) niet met JavaScript de offsetWidth van de div en van de span op kunnen vragen en die van elkaar aftrekken?

[EDIT]
Of je zou met een tabel kunnen werken (I know, tabellen zijn voor data-presentatie) waarbij de tabel zelf 100% breed is, de cellen erin variabel en dat de textbox weer 100% van de breedte van de tweede cel heeft?
[/EDIT]

 

[That Guy]

heh, dat hoop ik wel ja.

Maar zou je (mocht het met CSS niet kunnen) niet met JavaScript de offsetWidth van de div en van de span op kunnen vragen en die van elkaar aftrekken?

Jazeker, dat was ik ook van plan als er geen css oplossing was. Maar ik heb natuurlijk liever css

Of je zou met een tabel kunnen werken (I know, tabellen zijn voor data-presentatie) waarbij de tabel zelf 100% breed is, de cellen erin variabel en dat de textbox weer 100% van de breedte van de tweede cel heeft?

Hey, dat's nog eens een idee! Had ik nog niet aan gedacht. Even testen.

 

[ErikBooy007]

Ik heb even (zoals csshunter dat ook altijd zo mooi doet (A)) een voorbeeldje in elkaar geknutseld, maar het werkt nog niet helemaal hier.

*KLIK*

De eerste tabelcel neemt namelijk niet precies de breedte van de content aan, maar de cellen worden op één of andere manier "gelijkmatig verdeeld".

Even denken wat we daar nog aan zouden kunnen doen.

 

[That Guy]

Hier werkt de tabel-oplossing wel; zie hieronder.

         <table border='1' style='width: 100%;'>
            <tr>
               <td class='green'>
                  test
               </td>
               <td>
                  <input style='width: 100%;' type='text' />
               </td>

            </tr>
         </table>

als je de tabel zelf ook 100% maakt schijnt t wel te werken...

Maargoed. Alsnog maar even wachten op de css, als die bestaat.

 

[ErikBooy007]

Ja, dat is ook wat ik in mijn voorbeeldje gebruikt heb, maar dan is de eerste cel toch nog altijd een stukje breder dan de daadwerkelijke content? Of krijg jij een ander resultaat hiermee dan wat er in mijn linkje verschijnt?

 

[That Guy]

nee, jou link werkt inderdaad niet goed. Maar hier (in de app zelf) wel:

hmm. Even klooien.


[edit] zie t al, in de app is de div-width minder dan de standaard input width + text width.

met width 500:

Vandaar dus.

[edit]
Dit is te fixen door de 1e <td> een width van 1 pixel te geven; door de text wordt-ie alsnog uitgerekt.[/edit]
[/edit]

 

[ErikBooy007]

Hmm, waar dat verschil dan vandaan komt weet ik ook niet, ik zal wel wat over het hoofd zien. Ik kan er bij jou wel vanuit gaan dat je het in FireFox getest hebt he?

Maargoed, mooi dat het met jouw code wel werkt! :thumb:

[EDIT]
Ik zag je edit te laat, maar dat klinkt inderdaad logisch.
[/EDIT]

[EDIT]
Dan moet je er wel voor oppassen dat er geen spatie in voorkomt, dan krijg je namelijk 2 regels in je cel.
[/EDIT]

 

[That Guy]

ja, uiteraard firefox 3.5.nogwat




also: meer F5-en, lees edit's

[edit]right back at me [/edit]

 

[ErikBooy007]

Haha, je hebt gelijk . Shame on me

 

[ErikBooy007]

Oh ja, nog even off-topic, mag ik vragen aan wat voor applicatie/console je aan het werken bent?

 

[That Guy]

Oh ja, nog even off-topic, mag ik vragen aan wat voor applicatie/console je aan het werken bent?

zoals je mischien weet was ik het laaste half (? of heel?) jaar nogal bezig met 2d canvas games (zie link in mn sig). Nou, ik heb al de oude code gedumpt en ben bezig met een (veel!) efficientere manier van coderen van iets in deze richting. Minder pokemon, meer game!

Overgens heb ik veel lopen nadenken over dit projectje (weer eens wat anders, normaal doe ik maar wat ) over wat en hoe, dus het gaat ook een stuk sneller.


Anywho, om dingen te testen is het erg handig javascript code te kunnen 'injecten', zonder dat ik steeds [JS]javascript: beacon.data.addTile(jsonParse(beacon.map.getTileData(map.objects[4][5])));[/JS] in de adres-balk hoef te typen, vandaar dus het 'console'. Daarin voeg ik gewoon steeds afkortingen in, voor deze code's.

 

[ErikBooy007]

Ah kijk, ik was inderdaad op de hoogte van je canvas (wat ik overigens zeer indrukwekkend vind :shocked: ).

Maar zo'n console is dan inderdaad handig ja, nice work!

[EDIT]
Niet als kritiek bedoeld, maar als tip. Het laden van de maps duurt (bij mij) erg lang. Daardoor krijg ik een "foutmelding" die vraagt of ik het script wil stoppen of laten doorgaan. Ik begrijp dat je nog aan het ontwikkelen bent, maar voor het geval je dit zelf nog niet tegengekomen was...

Verder, nogmaals, mooi stukje werk zeg!
[/EDIT]

 

[That Guy]

Ja, de link uit mn sig is dus wat oud werk. De nieuwe ga ik eerst maar eens (voor een groot deel) afmaken voordat ik stukjes laat zien.

Anywho, tsja. Hier (meerdere op xp, ff3.0 op ubuntu, android browser op htc hero) gaat het best snel, maar ik kan me wel indenken dat als het minder snel gaat je zo'n vraag krijgt. Dat komt (denk ik)omdat het script achter elkaar 300kb aan json-bestanden download, en het gelijk dan parse-d (? geparseerd? geparse'd?) - niet echt de meest efficinete oplossing. Nieuwe versie laad pas data als het nodig is, en zo efficient als het mogelijk is.



Anywho, ik zit nogsteeds met de table-oplossing, en hoop nog op een mooie css-oplossing

 

[csshunter]

Creatieve zelfwerkzaamheid, prachtig!

Maar als ik het goed begrijp, gaat dat tekstvak later deel uitmaken van een <form>, zodat er ook iets met de ingetikte tekst gaat gebeuren.
Dan komen we op het terrein van de (css-) vormgeving van <form>'s, en that can be a complete different story! Formulieren hebben nl. hele eigen style-eigenaardigheden, bv. in de manier waarop de "legend" weergegeven wordt. En om dat mooi crossbrowser te krijgen, kan wel eens een kunstje apart zijn.

Maar er bestaat gelukkig wat literatuur over: css-discuss.incutio.com/?page=FormElements. - Nu kan ik wel even achterover gaan zitten.

En misschien zitten hier toevallig ook nog wat bruikbare ideeën in. Of in deze. De laatste was getest op het moment van Firefox 1.0.7; latere versies zijn het kennelijk anders gaan doen...

Succes!
CSShunter

 

[That Guy]

Nope, het wordt geen form. Ik gebruik het input element om deze later met javascript uit te lezen. De vraag gaat dus wel over een input-element, maar niet in een form-gerelateerde context (het had evengoed een div ofzo kunnen zijn, alleen daar kan je geen text in-putten. Eventueel een textarea is wel mogelijk.)

Over select-tags gesproken (2e link): ik heb ooit eens lopen experimenteren met het gebruik van background-image in option-tags. Jammergenoeg ondersteund(e; toen tenminste) alleen firefox dit. Zie bijvoorbeeld hier (firefox only dus).


alvast bedankt :thumb:



[edit] je link over css-discussion werkt niet, moet nog 'www.' tussen: http://www.css-discuss.incutio.com/?page=FormElements.

 

[That Guy]

 

[csshunter]

alvast bedankt :thumb:

en

Jôah, ik ga wel even wat proberen.
Het lastige is alleen, dat mijn vakantie er op zit en ik nu weer druk-druk-druk baasje aan het spelen ben (naar eigen idee dan), terwijl ook mijn werk-InBox in de vakantie niet stilgezeten heeft, en maar niet zichtbaar leger wil worden...
Maar nu weekend, dus wie weet...

Uw dienstwillige
CSShunter

O ja: @EDIT: "moet nog 'www.' tussen".

O ja? Mijn muis klikt graag op beide linken (met & zonder de www)(en ook met en zonder de http:// en komt dan precies op dezelfde site uit (in FF en in IE onder WinXP). Zou het aan je OS kunnen liggen? Ik dacht eigenlijk dat het aan de server van een site lag, of 't ie ook zonder de www reageert. Of toch de browser, die eerst een request zonder www doet, en als geen gehoor, er dan maar een www bij verzint? Kortom, heb je een exotisch OS of een browser-exoot? En is je browser-plakvenstertje méér zo kritisch? En kreeg je een foutmelding "site bestaat niet"? - En o ja, er zit ook nog een provider tussen, die misschien strikt zakelijk zegt: "ik ga geen foutoplossingen bedenken als ze foute domeinnamen opgeven hoor: niet gevraagd - dan niet gegeven." Alles kan, niets hoeft! Snap niets van, maar heb ook niet geGoogeld.

 

[That Guy]

Yo,

nee hoor, gewoon vuurvos 3.5 op XP. Nu zit ik op vista (weer ffox) maar doet-ie t wel. Vreemd, want ik weet zeker dat het op XP niet werkte. Hmmm, t zal wel aan mij liggen.

Overgens wil ik niemand aan het werk zetten hoor, maar vaak worden topic gewoon vergeten omdat er een 'grote' hoeveelheid vragen later wordt gesteld.

nogmaals bedankt.

 

[csshunter]

Met pure css vrees ik dat het helaas niet zal lukken. Je zou een {float:left;} aan de legend moeten geven, en dan de rest automatisch laten opvullen door het textvak (zonder float).
Maar een {float:left} zonder opgegeven breedte (in % of px) doet het niet (mag ook niet), en als je het inputveld erachter een 100% width geeft, gaat die natuurlijk van het scherm af. Of je zou moeten snijden met {overflow: hidden;} > maar dan kan je niet lekker intikken in het textvak (en ik weet ook niet of je uberhaupt de overflow in een inputveld kan verbergen: nog iets te testen).

De oplossingen die je vaak tegenkomt:

• De legend in een eigen regel, en eronder een eigen regel voor het inputveld.
• Vaak bij forms: een 50%-50% (of 30%-70% enz.) opdeling van de kolommen, en dan de legend rechts laten uitlijnen i/d eerste kolom, en het bijbehorende invoerveld links laten uitlijnen in de rechterkolom.

Als het aansluitend achter elkaar moet, zou je het kunnen oplossen met {display:table-cell} enzo, maar dat geeft tot dusverre weigerachtige Internet Explorers. > Dus toch: op naar een echte layout table!

Ik heb even een drietrapsraketje gescreenshot, uit de online editor van w3schools:

1. De vereenvoudigde Erik-styles (wat tussenliggende styles en de 2 containers zijn misbaar), maar met gewone txt ipv input-vak.
2. Nu exact hetzelfde, maar met inputvak in de cel van de txt. Dat krijgt zonder breedte-aanduiding kennelijk een standaard-minimale breedte.
3. Nu inputvak-styles even aanpassen.

Klaar?
Nee, nu natuurlijk nog in het echt testen. Kijk eens aan.

Groetjes van
CSShunter

Edit: o, ik zie dat IE7 nog wat extra styling wil voor de rechterkant van het invoerveld.