I am using bootstrap's input-group on a textarea, what I want is to have the label, or input-group-addon above the textarea, but due to the styling of the 'addon' element it doesn't look very good (especially on the right side).
How can I make the textarea look decent, using input-group?
Example to see difference on <input> and <textarea>
I guess what I'd like is slightly rounded edges on the right side, like the one on the left, on the textarea input, the normal input is fine.
You can override the regular add-on by adding a new class to the textarea and apply some css changes on it:
<div class="input-group-addon textarea-addon"> Description </div>
<textarea class="form-control" rows="5"></textarea>
and for the css:
.textarea-addon{
border-bottom-left-radius: 0px !important;
border-top-right-radius: 4px !important;
border:1px solid #ccc !important;
border-bottom: none !important;
}
textarea{
border-top-left-radius:0px !important;
border-top-right-radius:0px !important;
}
If your'e using less or compass I'd use variables instead of plain numbers.
In addition, you should add some browser compatibility properties (such as -webkit and -moz prefixes)
Live example: http://plnkr.co/edit/dMa4UPLMqOXdVITzFKNr?p=preview
How about this:-
.row .form-group .input-group-addon {
background-color: #eee;
border-right: 1px solid #ccc;
border-top-right-radius: 4px;
border-bottom-left-radius: 0;
border-bottom: 0;
}
.row .form-group textarea.form-control {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<div class="row" style="padding:30px 100px;">
<div class="col-md-6">
<div class="form-group">
<div class="input-group-addon">Description</div>
<textarea class="form-control" rows="5"></textarea>
</div>
</div>
</div>
the default style for this element is not expected to have the right not rounded corners when placed before the input field and has rounded corners to the left when it is placed after the left field .. you can add them this way or create a class with these features Included and add the Element
The input-group- addon default style don
<span class="input-group-addon"
style=" border-top-right-radius: 6px;
border-bottom-right-radius: 6px; border-right: solid 1px #ccc;">
Description</span>
use span and not div for addon
Related
Hello I want to set the light gray outline outside gray border line just like in the following image.either there is a border position set or blur effect the input text.
Please tell me how can I fix this issue? I am doing all of this in css.
.container {
background-color: aquamarine;
width: 100%;
height: auto;
}
input[type="text"],
textarea,
textarea.form-control {
background-color: #efeeef;
width: 396px;
height: 48px;
border-radius: 4px;
border: 3px solid #cecece;
}
textarea.form-control {
line-height: 50%;
font-size: 16px;
color: red;
font-weight: 500;
}
<div class="container">
<!--Form element-->
<form>
<fieldset>
<input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control textarea border-color outline" id="form-email">
</fieldset>
</form>
</div>
When I am using shade effects it is also useless.Is there any way to set the position of the border in this input area.
Borders cannot be set to blur (at least directly). If you are using some sort of CSS library, say Bootstrap then it may be adding box-shadow to the input elements.
Setting the box-shadow: none; on the required input should solve the problem.
I am not a expert but try
form{
border: 1px(thickness) outset(type of border) grey(color)
}
for more information go to this link:
https://www.w3schools.com/css/css_border.asp
I am trying to give a custom input field (file upload) rounded corners.
I am using the same CSS as on all my other input fields (text, number, password) on the same form where this works fine but am unable to apply to same to the field below.
I tried on the input field, on the spans and on the div as well as with a class and with inline CSS but nothing works here (on all other fields I just apply it on the input and it works fine).
Can someone tell me how to fix this ?
.rounded2l {
border-radius: 25px 0px 0px 25px;
}
.rounded2r {
border-radius: 0px 25px 25px 0px;
}
.rounded4 {
border-radius: 25px;
}
<div class="form-group">
<div class="custom-file">
<input type="file" class="custom-file-input cursor-pointer" id="attachment" name="attachment"/>
<label for="attachment" class="custom-file-label cursor-pointer rounded4">
<span class="rounded2r">Attachment</span>
</label>
</div>
</div>
**Update:**
Added the CSS classes the way I was closest to what I need.
This gives me rounded corners on the left but not on the right side of the field.
The easiest way to fix this is to hide the native UI (input type="file") and format the label as if it were a button.
.rounded2l {
border-radius: 25px 0px 0px 25px;
}
.rounded2r {
border-radius: 0px 25px 25px 0px;
}
.rounded4 {
border-radius: 25px;
}
input[type=file] {
display: none;
}
.file-upload {
margin: 1rem;
border-radius: 25px;
background-color: #006600;
color: #fff;
padding: 0.5rem;
cursor: pointer;
}
<div class="form-group">
<div class="custom-file">
<input type="file" class="custom-file-input cursor-pointer" id="attachment" name="attachment"/>
<label for="attachment" class="file-upload" class="custom-file-label cursor-pointer rounded4">
<span class="rounded2r">Upload Attachment</span>
<span id="filename"></span>
<!-- insert filename using javaScript when file has uploaded -->
</label>
</div>
</div>
They are rounded, but you don't see them.
Maybe you use a background-color in your css to "see" how the elements have rounded corners.
First set
.rounded4 {
border-radius: 25px;
background-color: lime;
}
The label has all corners rounded.
The set:
.rounded2r {
border-radius: 0px 25px 25px 0px;
background-color: pink;
}
The span inside has 2 on the right side.
to apply CSS to input tag you will need to apply it directly to this input using
input[type=file]
or as in your case, you can add it to any of the classes you have at the CSS style file like this
.rounded2l,
input[type=file]{
border-radius: 25px 0px 0px 25px;
border: 1px solid #000;
}
hope this help
I'm using Bootstrap for my JSP page.
I want to use <fieldset> and <legend> for my form. This is my code.
<fieldset class="scheduler-border">
<legend class="scheduler-border">Start Time</legend>
<div class="control-group">
<label class="control-label input-label" for="startTime">Start :</label>
<div class="controls bootstrap-timepicker">
<input type="text" class="datetime" id="startTime" name="startTime" placeholder="Start Time" />
<i class="icon-time"></i>
</div>
</div>
</fieldset>
CSS is
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.scheduler-border {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
}
I am getting output like this
I want output in the following way
I tried adding
border:none;
width:100px;
to legend.scheduler-border in CSS. And I'm getting the expected output. But the problem is I would like to add another <fieldset> for another fields. That time the width of text in legend is a problem as it is lengthier than than 100px.
So what shall I do to get output like I have mentioned? (Without striking the legend text)
That's because Bootstrap by default sets the width of the legend element to 100%. You can fix this by changing your legend.scheduler-border to also use:
legend.scheduler-border {
width:inherit; /* Or auto */
padding:0 10px; /* To give a bit of padding on the left and right */
border-bottom:none;
}
JSFiddle example.
You'll also need to ensure your custom stylesheet is being added after Bootstrap to prevent Bootstrap overriding your styling - although your styles here should have higher specificity.
You may also want to add margin-bottom:0; to it as well to reduce the gap between the legend and the divider.
In bootstrap 4 it is much easier to have a border on the fieldset that blends with the legend. You don't need custom css to achieve it, it can be done like this:
<fieldset class="border p-2">
<legend class="w-auto">Your Legend</legend>
</fieldset>
which looks like this:
In Bootstrap 5, modifications to the default style applied to the legend results in a different rendering than what is obtained with Bootstrap 4, you must then add float-none as class of the <legend> tag:
<fieldset class="border p-2">
<legend class="float-none w-auto">Your Legend</legend>
</fieldset>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<fieldset class="border p-2">
<legend class="float-none w-auto p-2">Your Legend</legend>
<input type="text">
</fieldset>
</form>
bootstrap html form fieldset legend
I had this problem and I solved with this way:
fieldset.scheduler-border {
border: solid 1px #DDD !important;
padding: 0 10px 10px 10px;
border-bottom: none;
}
legend.scheduler-border {
width: auto !important;
border: none;
font-size: 14px;
}
I had a different approach , used bootstrap panel to show it little more rich. Just to help someone and improve the answer.
.text-on-pannel {
background: #fff none repeat scroll 0 0;
height: auto;
margin-left: 20px;
padding: 3px 5px;
position: absolute;
margin-top: -47px;
border: 1px solid #337ab7;
border-radius: 8px;
}
.panel {
/* for text on pannel */
margin-top: 27px !important;
}
.panel-body {
padding-top: 30px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="panel panel-primary">
<div class="panel-body">
<h3 class="text-on-pannel text-primary"><strong class="text-uppercase"> Title </strong></h3>
<p> Your Code </p>
</div>
</div>
<div>
This will give below look.
Note: We need to change the styles in order to use different header size.
Just wanted to summarize all the correct answers above in short. Because I had to spend lot of time to figure out which answer resolves the issue and what's going on behind the scenes.
There seems to be two problems of fieldset with bootstrap:
The bootstrap sets the width to the legend as 100%. That is why it overlays the top border of the fieldset.
There's a bottom border for the legend.
So, all we need to fix this is set the legend width to auto as follows:
legend.scheduler-border {
width: auto; // fixes the problem 1
border-bottom: none; // fixes the problem 2
}
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
margin-top: 30px !important;
}
legend.scheduler-border {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin-top: -15px;
background-color: white;
color: black;
}
<div class="container">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Technical Ameen</legend>
<h2>Your Work Here</h2>
</fieldset>
</div>
if you will not find any proper solution for using legend tag in bootstrap 5
you can use the CSS property for an alternative solution in the legend tag this is an inline CSS example.
style="margin-top:-15px; background-color: white; color: black;"
also, add this line in the fieldset tag for margin-top
style="margin-top: 30px !important;"
I hope this is a very simple solution for getting legend style with bootstrap 5
<fieldset class="border p-2 form-group">
<legend class="control-label customer-legend pl-1">Your Legend</legend>
</fieldset>
use css:
.customer-legend:before {
left: 100px;
}
My fiddle pretty much shows the problem. Trying to get the labels to be on the left side of each text box if anyone could help. http://jsfiddle.net/HC64Y/
<div id="boxalign2" class="boxalign2" >
<label>Hospital*:</label><input class="rounded2" required title="Hospital is required!" name="MainHospital" type="text" />
<label>Title*:</label><input class="rounded2" name="MainTitle" type="text"/>
<label>Department*:</label> <input class="rounded2" name="MainDept" type="text"/>
</div>
css
input.rounded2 {
border: 1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
font-size: 20px;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
float: left;
display: inline-block;
clear: left;
width: 150px;
text-align: right;
}
You are making your inputs inline-block, but you are also floating them to the left.
If you remove the float: left and add <br> after each input, you will get the correct behavior.
http://jsfiddle.net/A8es3/
To align the boxes, add a div wrapper around each label/input, make your label inline-block with a fixed width. There are other ways to do this as well, but this is one way.
http://jsfiddle.net/A8es3/1/
As stolli mentioned, you can also simply use the label element as the wrapper:
http://jsfiddle.net/A8es3/2/
You can give to your div .boxalign2 and label fixed widths.
View the demo http://jsfiddle.net/HC64Y/11/
.boxalign2 {
width:400px;
}
label {
text-align:right;
padding-right:20px;
display:inline-block;
min-width:150px;
}
To ammend Jeff B's answer to get your result, simply give the elements a width in your css
label {width: 100px} where '100' is whatever value looks best for your layout.
Also, remember that the primary purpose of labels (as opposed to just div's or span's for labeling) is that labels act as a secondary click target for the control they are associated with. Therefore, you can wrap your elements in the label tag (<label><input /></label>) or associate them by id (<label for="foo"><input id="foo"/>) and give the user much more to click, simply by clicking the label, they can toggle the control, focus the text input, whatever. A big boon in usability for touch devices.
<!DOCTYPE html>
<html>
<head>
<title>Centering a form</title>
</head>
<body>
<div class="form">
<label>Name</label>
<input type="text" name="name">
<label>Email</label>
<input type="text" name="email">
<label>Phone</label>
<input type="text" name="phone">
</div>
</body>
</html>
<style type="text/css">
.form {
margin: 0 auto;
width: 210px;
}
.form label{
display: inline-block;
text-align: right;
float: left;
}
.form input{
display: inline-block;
text-align: left;
float: right;
}
</style>
Demo here: https://jsfiddle.net/durtpwvx/
I'm using Bootstrap for my JSP page.
I want to use <fieldset> and <legend> for my form. This is my code.
<fieldset class="scheduler-border">
<legend class="scheduler-border">Start Time</legend>
<div class="control-group">
<label class="control-label input-label" for="startTime">Start :</label>
<div class="controls bootstrap-timepicker">
<input type="text" class="datetime" id="startTime" name="startTime" placeholder="Start Time" />
<i class="icon-time"></i>
</div>
</div>
</fieldset>
CSS is
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.scheduler-border {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
}
I am getting output like this
I want output in the following way
I tried adding
border:none;
width:100px;
to legend.scheduler-border in CSS. And I'm getting the expected output. But the problem is I would like to add another <fieldset> for another fields. That time the width of text in legend is a problem as it is lengthier than than 100px.
So what shall I do to get output like I have mentioned? (Without striking the legend text)
That's because Bootstrap by default sets the width of the legend element to 100%. You can fix this by changing your legend.scheduler-border to also use:
legend.scheduler-border {
width:inherit; /* Or auto */
padding:0 10px; /* To give a bit of padding on the left and right */
border-bottom:none;
}
JSFiddle example.
You'll also need to ensure your custom stylesheet is being added after Bootstrap to prevent Bootstrap overriding your styling - although your styles here should have higher specificity.
You may also want to add margin-bottom:0; to it as well to reduce the gap between the legend and the divider.
In bootstrap 4 it is much easier to have a border on the fieldset that blends with the legend. You don't need custom css to achieve it, it can be done like this:
<fieldset class="border p-2">
<legend class="w-auto">Your Legend</legend>
</fieldset>
which looks like this:
In Bootstrap 5, modifications to the default style applied to the legend results in a different rendering than what is obtained with Bootstrap 4, you must then add float-none as class of the <legend> tag:
<fieldset class="border p-2">
<legend class="float-none w-auto">Your Legend</legend>
</fieldset>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<fieldset class="border p-2">
<legend class="float-none w-auto p-2">Your Legend</legend>
<input type="text">
</fieldset>
</form>
bootstrap html form fieldset legend
I had this problem and I solved with this way:
fieldset.scheduler-border {
border: solid 1px #DDD !important;
padding: 0 10px 10px 10px;
border-bottom: none;
}
legend.scheduler-border {
width: auto !important;
border: none;
font-size: 14px;
}
I had a different approach , used bootstrap panel to show it little more rich. Just to help someone and improve the answer.
.text-on-pannel {
background: #fff none repeat scroll 0 0;
height: auto;
margin-left: 20px;
padding: 3px 5px;
position: absolute;
margin-top: -47px;
border: 1px solid #337ab7;
border-radius: 8px;
}
.panel {
/* for text on pannel */
margin-top: 27px !important;
}
.panel-body {
padding-top: 30px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="panel panel-primary">
<div class="panel-body">
<h3 class="text-on-pannel text-primary"><strong class="text-uppercase"> Title </strong></h3>
<p> Your Code </p>
</div>
</div>
<div>
This will give below look.
Note: We need to change the styles in order to use different header size.
Just wanted to summarize all the correct answers above in short. Because I had to spend lot of time to figure out which answer resolves the issue and what's going on behind the scenes.
There seems to be two problems of fieldset with bootstrap:
The bootstrap sets the width to the legend as 100%. That is why it overlays the top border of the fieldset.
There's a bottom border for the legend.
So, all we need to fix this is set the legend width to auto as follows:
legend.scheduler-border {
width: auto; // fixes the problem 1
border-bottom: none; // fixes the problem 2
}
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
margin-top: 30px !important;
}
legend.scheduler-border {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin-top: -15px;
background-color: white;
color: black;
}
<div class="container">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Technical Ameen</legend>
<h2>Your Work Here</h2>
</fieldset>
</div>
if you will not find any proper solution for using legend tag in bootstrap 5
you can use the CSS property for an alternative solution in the legend tag this is an inline CSS example.
style="margin-top:-15px; background-color: white; color: black;"
also, add this line in the fieldset tag for margin-top
style="margin-top: 30px !important;"
I hope this is a very simple solution for getting legend style with bootstrap 5
<fieldset class="border p-2 form-group">
<legend class="control-label customer-legend pl-1">Your Legend</legend>
</fieldset>
use css:
.customer-legend:before {
left: 100px;
}