textarea met submit button ingebouwd

Door Y S op 04-02-2016 15:36 gewijzigd op 04-02-2016 15:38

1.813 views

Hi,

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

<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:

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;
}

Jullie enig idee wat ik moet doen om mijn probleem op te lossen?

Dennis WhoCares

04-02-2016 15:57 gewijzigd op 04-02-2016 16:09

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

Misschien zijn er mensen hier die dit kunnen oplossen dmv text-indent, maar dan vanaf rechtsonderin :-)


<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>

[size=xsmall]Toevoeging op 04/02/2016 16:04:19:[/size]

Dennis WhoCares op 04/02/2016 15:57:19


<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>

Randy vsf

04-02-2016 18:19 gewijzigd op 04-02-2016 18:20

Fiddle met voorbeeld

Anders kan je kijken naar contentEditable, die property kan je aan een div meegeven, en dan heb je geen textarea meer nodig.

Y S

04-02-2016 18:27

Thanks, de codes hebben me al een stuk op weg geholpen, echter heb ik ook bij het Fiddle voorbeeld van "Randy vsf" nog last van de tekst die onder de button doorloopt. Ik zal ook eens kijken naar wat ik kan doen met contentEditable, ziet er interessant uit, maar heeft het verder veel voordelen?

Randy vsf

04-02-2016 18:31

Dan kijk eens naar deze fiddle. Daar gaat de text om de button heen ^^

Y S

04-02-2016 18:37 gewijzigd op 04-02-2016 18:38

Cool thanks, ik ga het in mijn site verwerken. Het enige wat er nu gebeurt is dat wanneer je veel tekst hebt getypt de button verdwijnt.

Randy vsf

04-02-2016 18:52 gewijzigd op 04-02-2016 19:05

Plaats je code anders eens in een fiddle wat je nu hebt. Dat is voor ons makkelijker meekijken omdat wij ook meteen het resultaat zien :-)

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.

Y S

05-02-2016 09:00

Ik heb nu nog wat ik ook in mijn startpost heb staan en dat staat op mijn website.

Y S

21-02-2016 15:37 gewijzigd op 21-02-2016 15:50

Ik heb het probleem heel simpel opgelost, door gewoon een padding-right te geven aan de textarea. Ziet er minder goed uit dan ik zou willen, maar het werkt.

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.

Thomas van den Heuvel

21-02-2016 16:16 gewijzigd op 21-02-2016 16:21

Ik denk dat je met deze opzet toch een beetje tegen de stroom in probeert te gaan. Formulier elementen zijn toch een beetje het domein van de browser. Je kunt met de opmaak wel een beetje schuiven, maar niet echt op zijn kop zetten.

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?

_________________
[               ]
[  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:

______________________
[               ]     ]
[  je textarea  ] go! ]
[               ]     ]
----------------------

Reageren

Inloggen om te reageren