Problem with width of text input

HTML & CSS
1

I have this script:

                        <input type="text" name="geboortedatum" id="geboortedatum" value="'.$geboortedatum.'" size="2" class="'.$veldkleurgeboorte.'">
                        <input type="text" name="geboortedatum" id="geboortedatum" value="'.$geboortedatum.'" size="2" class="'.$veldkleurgeboorte.'">
                        <input type="text" name="geboortedatum" id="geboortedatum" value="'.$geboortedatum.'" size="4" class="'.$veldkleurgeboorte.'"></label>

On this website:
http://www.jcsl.nl/scouting/index.php?pagina=inschrijven&activiteit=houthakkersweekend

But the fileds (beside geboortedatum) are not getting smaller. What Am I doing wrong?

2

I’m positive someone will explain my post / the fix for you, but in order to fix your problem, you should validate your HTML. 82 errors and your error is msot likely there.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.jcsl.nl%2Fscouting%2Findex.php%3Fpagina%3Dinschrijven%26activiteit%3Dhouthakkersweekend&charset=(detect+automatically)&doctype=Inline&group=0

Fix all those errors and then come back if it’s not working.

1 Like
3

You are setting the size of the inputs via css here in your elements.css a line 315:

form input, form textarea {
display: block;
width: 100%;

Css over-rides any html attributes such as the ‘size’ attribute (which you shouldn’t be using these days anyway). You would need to add a new class to those elements and use CSS to size them.

Note that Ids are unique so you can’t have the same ID on all those inputs. As Ryan said above your first step should be to eradicate all the errors in that code first otherwise all bets are off.

1 Like
5

Did you checked if you have somewhere else in the CSS an .input tag style which is forcing it to not be smaller? Maybe it makes your all input tags universal to the same size? The most common problem. It means when you add font width to the body of the page it will be universal for all the rest. If you don’t want it universal remove it from the body which does that.
Hope it helps.

1 Like
6

I removed my answer because it has nothing to do with this question

somewhere else there is this:

form input, form textarea {
display: block;
width: 100%;

But I made another class:

.datum form input{
width: 2px;
}

the line will be:

<input type="text" name="geboortedatum" id="geboortedatumd" value="" class="tekstveldnorm datum"/>

But this doesn’t work

7

It would be:

`form input.datum {width:20px}’

2px is too small even for a single character.

1 Like
8

Thanks this did the job.
You can see the result here. I set de width to 30px.

http://www.jcsl.nl/scouting/index.php?pagina=inschrijven&activiteit=houthakkersweekend