I am trying to develop this kind of form field using bootstrap, css and jquery but not able to do it. Any help will be appreciatedtwo-row input text in same field. Thanks
Asked
Active
Viewed 42 times
0
-
3share your work so far – Lakindu Gunasekara Jan 21 '18 at 07:47
-
I am sorry but the code is so big and if I snip it, it will won't work properly... I only need two rows in the single input field of the form. or even the side green validation also need help with – Naman Jan 21 '18 at 07:57
-
do you have a link to that example? – Lakindu Gunasekara Jan 21 '18 at 08:02
-
it is just this image i got and have to implement it – Naman Jan 21 '18 at 08:05
1 Answers
0
You can try out this snippet. I have used border-left in order to implement this..
input[type=text],
#textarea {
border-left: 6px solid green;
border-radius: 4px;
height: 4rem;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-md-4 mb-3">
<label>Username</label>
<div class="form-group">
<input type="text" multiple class="form-control" placeholder="Username" required>
<br>
<textarea id="textarea" name="Text" class="form-control" cols="40" rows="2" placeholder="Text Area"></textarea>
</div>
</div>
Lakindu Gunasekara
- 4,221
- 4
- 27
- 41
-
Thank you so much... Is there any way we can add that two row in single input field? – Naman Jan 21 '18 at 08:24
-
check now added it. If this helps, please put a tick to the answer – Lakindu Gunasekara Jan 21 '18 at 08:29
-
1
-
sorry but it should not be in textarea. it should be in the input field only – Naman Jan 21 '18 at 09:19
-
Input field only have one row. That's why text area there. So you can define more rows as you wish. It is not possible to have multiple lines in input text field. For more info https://stackoverflow.com/questions/6262472/multiple-lines-of-input-in-input-type-text/6262536 – Lakindu Gunasekara Jan 21 '18 at 09:29
-
you can adjust the height if the input field for two rows as edited in the above answer – Lakindu Gunasekara Jan 21 '18 at 09:37