textarea met submit button ingebouwd
Ik zal eerst even wat uitleg geven:
Mijn online portfolio bevat een contactformulier, hierin staat de submit button onder de textarea, waardoor er een extra regel nodig is. Dit kan op zich wel en is gebruikelijk, echter zou ik willen dat de knop in de rechterhoek van de textarea staat.
Ik heb geprobeerd dit te doen, door middel van margins en paddings, maar het lukte me niet om het zo te krijgen als ik wil en ook loopt de tekst gewoon achter de button door, ipv die te ontwijken.
Hier een afbeelding van wat ik wil bereiken:
De code (zonder aanpassingen aan de positie):
HTML
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<tr>
<td>
<textarea name="message" cols="35" rows="10" placeholder="Typ hier uw bericht"></textarea>
</td>
</tr>
<tr>
<td>
<input type="submit" value="Verstuur" />
</td>
</tr>
<td>
<textarea name="message" cols="35" rows="10" placeholder="Typ hier uw bericht"></textarea>
</td>
</tr>
<tr>
<td>
<input type="submit" value="Verstuur" />
</td>
</tr>
CSS:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
textarea{
color: #fff;
background: #333333;
border-radius: 2px;
border: none;
padding: 5px 10px 0 10px;
resize: none;
font-family: verdana, Geneva, Sans-serif;
font-size: 0.70em;
}
input[type="submit"]{
background: #4992bf;
border: none;
border-radius: 2px;
color: #fff;
font-family: verdana, arial, Sans-serif;
font-size: 1em;
height: 35px;
padding: 0 10px 0 10px;
}
color: #fff;
background: #333333;
border-radius: 2px;
border: none;
padding: 5px 10px 0 10px;
resize: none;
font-family: verdana, Geneva, Sans-serif;
font-size: 0.70em;
}
input[type="submit"]{
background: #4992bf;
border: none;
border-radius: 2px;
color: #fff;
font-family: verdana, arial, Sans-serif;
font-size: 1em;
height: 35px;
padding: 0 10px 0 10px;
}
Jullie enig idee wat ik moet doen om mijn probleem op te lossen?
Gewijzigd op 04/02/2016 15:38:06 door Y S
Je blijft inderdaad alleen nog steed zitten met dat de text erachter door loopt, omdat de textarea zo groot is
Misschien zijn er mensen hier die dit kunnen oplossen dmv text-indent, maar dan vanaf rechtsonderin :-)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<html>
<head>
<style>
#myTextarea {
position: relative;
width: 400px;
height: 250px;
}
#myTextarea textarea {
width: 100%;
height: 100%;
color: #fff;
background: #333333;
border-radius: 2px;
border: none;
padding: 5px 10px 0 10px;
resize: none;
font-family: verdana, Geneva, Sans-serif;
font-size: 0.70em;
}
#myTextarea input[type="submit"] {
position: absolute;
bottom: 0;
right: -2;
background: #4992bf;
border: none;
border-radius: 2px;
color: #fff;
font-family: verdana, arial, Sans-serif;
font-size: 1em;
height: 35px;
line-height: 35px;
}
</style>
</head>
<body>
<div id="myTextarea">
<textarea>bla blablablabla</textarea>
<input type="submit" value="Verstuur">
</div>
</body>
</html>
<head>
<style>
#myTextarea {
position: relative;
width: 400px;
height: 250px;
}
#myTextarea textarea {
width: 100%;
height: 100%;
color: #fff;
background: #333333;
border-radius: 2px;
border: none;
padding: 5px 10px 0 10px;
resize: none;
font-family: verdana, Geneva, Sans-serif;
font-size: 0.70em;
}
#myTextarea input[type="submit"] {
position: absolute;
bottom: 0;
right: -2;
background: #4992bf;
border: none;
border-radius: 2px;
color: #fff;
font-family: verdana, arial, Sans-serif;
font-size: 1em;
height: 35px;
line-height: 35px;
}
</style>
</head>
<body>
<div id="myTextarea">
<textarea>bla blablablabla</textarea>
<input type="submit" value="Verstuur">
</div>
</body>
</html>
Toevoeging op 04/02/2016 16:04:19:
Dennis WhoCares op 04/02/2016 15:57:19:
Door de 'parent' element relative position te geven, kun je de submit knop absolute geven welke relatief is aan de 'parent'.
Je blijft inderdaad alleen nog steed zitten met dat de text erachter door loopt, omdat de textarea zo groot is
Je blijft inderdaad alleen nog steed zitten met dat de text erachter door loopt, omdat de textarea zo groot is
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html>
<head>
<style>
#myTextarea {
position: relative;
width: 400px;
height: 250px;
}
#myTextarea textarea {
width: 100%;
height: 100%;
color: #fff;
background: #333333;
border-radius: 2px;
border: none;
padding: 5px 10px 0 10px;
resize: none;
font-family: verdana, Geneva, Sans-serif;
font-size: 0.70em;
z-index: 1;
}
#myTextarea input[type="submit"] {
position: absolute;
bottom: 0;
right: -2;
background: #4992bf;
border: none;
border-radius: 2px;
color: #fff;
font-family: verdana, arial, Sans-serif;
font-size: 1em;
height: 35px;
line-height: 35px;
z-index: 2;
}
</style>
</head>
<body>
<div id="myTextarea">
<textarea>bla blablablabla</textarea>
<input type="submit" value="Verstuur">
</div>
</body>
</html>
<head>
<style>
#myTextarea {
position: relative;
width: 400px;
height: 250px;
}
#myTextarea textarea {
width: 100%;
height: 100%;
color: #fff;
background: #333333;
border-radius: 2px;
border: none;
padding: 5px 10px 0 10px;
resize: none;
font-family: verdana, Geneva, Sans-serif;
font-size: 0.70em;
z-index: 1;
}
#myTextarea input[type="submit"] {
position: absolute;
bottom: 0;
right: -2;
background: #4992bf;
border: none;
border-radius: 2px;
color: #fff;
font-family: verdana, arial, Sans-serif;
font-size: 1em;
height: 35px;
line-height: 35px;
z-index: 2;
}
</style>
</head>
<body>
<div id="myTextarea">
<textarea>bla blablablabla</textarea>
<input type="submit" value="Verstuur">
</div>
</body>
</html>
Gewijzigd op 04/02/2016 16:09:44 door Dennis WhoCares
Anders kan je kijken naar contentEditable, die property kan je aan een div meegeven, en dan heb je geen textarea meer nodig.
Gewijzigd op 04/02/2016 18:20:48 door Randy vsf
Gewijzigd op 04/02/2016 18:38:51 door Y S
Je zal hier ook iets van javascript voor nodig hebben, de button blijft namelijk anders op dezelfde plek staan. Ik weet niet of dit met puur CSS op te lossen is, misschien dat iemand anders hier een antwoord daarop weet.
Gewijzigd op 04/02/2016 19:05:17 door Randy vsf
Voorbeeldje: http://jsfiddle.net/GwheP/171/.
Mocht iemand een mooiere oplossing hebben, waar de tekst om de button heen werkt, zou ik dat graag horen.
Gewijzigd op 21/02/2016 15:50:19 door Y S
Een mooiere oplossing is wat mij betreft een andere oplossing, meer in lijn met hoe formulieren doorgaans werken en er uitzien, zo zou je bijvoorbeeld, ik zeg maar wat, de knop even breed kunnen maken als de textarea ofzo?
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
_________________
[ ]
[ je textarea ]
[ ]
-----------------
[ submit knop ]
-----------------
[ ]
[ je textarea ]
[ ]
-----------------
[ submit knop ]
-----------------
Of je laat de randen van de textarea weg, en centreert je knop eronder ofzo. Er zijn legio manieren om een soort van harmonie te bereiken zonder de elementen op een (m.i.) onnatuurlijke manier te stapelen (waar op zichzelf weer een hoop haken en ogen aan zitten, zoals je zelf al ondervonden hebt).
EDIT: of je zet je knop ernaast:
Code (php)
1
2
3
4
5
2
3
4
5
______________________
[ ] ]
[ je textarea ] go! ]
[ ] ]
----------------------
[ ] ]
[ je textarea ] go! ]
[ ] ]
----------------------
Gewijzigd op 21/02/2016 16:21:51 door Thomas van den Heuvel