I use jQuery Validate plugin to highlight errors. It replaces color of the text with red, which is OK for all elements except one - .help-block, it should remain blue.
Here is the code without error:
<div class="control-group">
<label class="control-label" for="place-of-birth">Place of birth</label>
<div class="controls">
<p class="help-block">Please input place of birth below, 2-80 symbols</p>
<input type="text" class="input-xlarge" id="place-of-birth" name="place-of-birth" minlength="2" maxlength="80" autocomplete="off">
</div>
</div>
And here is with the error message:
<div class="control-group error"> <!-- STYLE IS CHANGED HERE -->
<label class="control-label" for="place-of-birth">Place of birth</label>
<div class="controls">
<p class="help-block">Please input place of birth below, 2-80 symbols</p>
<input type="text" class="input-xlarge" id="place-of-birth" name="place-of-birth" minlength="2" maxlength="80" autocomplete="off">
<div class="help-block" generated="true" for="place-of-birth">Please enter at least 2 characters.</div> <!-- THIS LINE IS ADDED -->
</div>
</div>
I've tried to override that with the following CSS:
.control-group .error .help-block { color: blue; }
but it didn't help. Demo.
What is wrong here?
Change it like this:
.control-group.error .help-block { color: blue; }
If you have two classes on one element there cannot be space between selectors. If there is a space it means that this class belongs to child tag.
The CSS rule is this:
.control-group.error .input-prepend .add-on, .control-group.error .input-append .add-on {
color: #B94A48;
background-color: #F2DEDE;
border-color: #B94A48;
}
Modify those values in either the bootstrap.css file or make your own.
Related
HTML:
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">Service</label>
<input type="text" class="form-control" id="validationCustom03" value="Describe service you need" required>
<div class="invalid-feedback">
Please write here a needed service.
</div>
</div>
</div>
CSS
#validationCustom03{
height: 100px;
}
input[id=validationCustom03]{
display:inline;
padding-top: 0px;
margin-top: 0px;
color:red;
}
Hello guys, I am trying to stylize the value of form - text input, but the only one thing I can reach is red color. My purpose is to remove break line before and after the text, to make is from the very first line in the input, please check out the picture. Thank you for your time and wisdom !
I think you should use a <textarea> form attribute instead of an <input> element. Here's an example:
#validationCustom03{
height: 100px;
}
textarea[id=validationCustom03]{
display:inline;
padding-top: 0px;
margin-top: 0px;
color:red;
}
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">Service</label><br>
<textarea rows="4" cols="50" name="comment" class="form-control" id="validationCustom03" form="usrform" value="Describe service you need" required>
Enter text here...</textarea>
<div class="invalid-feedback">
Please write here a needed service.
</div>
</div>
</div>
you don't have a break-line here. it is just because the height of the input field is much bigger than the size of the font.
I have been looking into Bootstrap 4 - beta, however when using .is-invalid with .input-group it doesn't seem to show up.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<label for="label">Label</label>
<div class="input-group">
<div class="input-group-addon">
label
</div>
<input type="text" value="" name="label" class="form-control is-invalid">
</div>
<div class="invalid-feedback is-invalid">
<strong>Invalid Label</strong>
</div>
</div>
How are you meant to display an invalid message while using .input-group?
Adding the following CSS works as a workaround, but it seems odd.
.form-group.is-invalid {
.invalid-feedback {
display: block;
}
}
Boostrap 4 is very buggy. My suggestion is to replace:
<div class="invalid-feedback">
Text here
</div>
With:
<div class="text-danger">
Text here
</div>
And the second one looks virtually the same and will not fail.
For a better look, try:
<div class="text-danger">
<small>Text here</small>
</div>
They haven't taken into account their own examples using input group addons and buttons, even with a column model. The markup does only facilitate "neighboring" elements, not parent > neighboring element (there is no CSS rule for that).
It seems, for now, you should fall back to Alpha 6 or program your own CSS classes accordingly. I've done the same, unfortunately.
Please note when reading my answer that this was posted just as the beta was released. :)
I solved it by adding d-block class:
#error('terms')
<div class="invalid-feedback d-block" role="alert">
<strong>{{ $message }}</strong>
</div>
#enderror
Happy coding!
Bootstrap docs here about d-block:Display property
The way Bootstrap does override the display from none to block is by checking first for a previous is-invalid class, for example! Check this CSS out:
That means, in case of an error, first is-invalid must be applied on an element and then invalid-feedback on another afterward! Like the following in Laravel, for instance:
{{-- Either following an input --}}
<input type="password" id="registerPassword"
class="form-control #error('register_password') is-invalid #enderror"
name="register_password" required autocomplete="new-password"
>
#error('register_password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
{{-- Or separately in DOM --}}
#error('register_password')
<div class="is-invalid">...</div>
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
Working example with a trick using flex-wrap and w-100:
<div class="form-group">
<label class="form-control-label">Name</label>
<div class="input-group flex-wrap">
<span class="input-group-addon"><span class="fa fa-lock"></span></span>
<input name="name" class="form-control is-invalid" type="text">
<div class="invalid-feedback w-100">Custom error</div>
</div>
</div>
Add .is-invalid to the .input-group.
If the invalid-feedback element is preceded by an element with .is-invalid it will be displayed -- that is how server-side validation is supported.
I found this solution
<div class="input-group ">
<div class="input-group-prepend">
<div class="input-group-text">Start Date</div>
</div>
<input type="text" class="form-control is-invalid" placeholder="Date Input">
<div class="invalid-feedback order-last ">
Error Message
</div>
<div class="input-group-append">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
Inspecting the .invalid-feedback class I've found this definition (bootstrap 4.3)
.invalid-feedback {
/*display: none;*/
width: 100%;
margin-top: .25rem;
font-size: 80%;
color: #dc3545;
}
You could copy and rename this class and use it without the built-in limitations
here is my "diy" answer
html
<div class="container">
<div class="row p-3">
<div class="col-md-6 mb-3">
<label class="sr-only">End Date/Time</label>
<div class="input-group">
<div class="input-group-prepend ">
<div class="input-group-text error-feedback">Start Date</div>
</div>
<input type="text" class="form-control error-feedback" placeholder="Date Input">
<div class="invalid-feedback order-last ">
Error Message
</div>
<div class="input-group-append error-feedback">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
css
.error-feedback{
border:1px red solid;
}
I know there is a bit off but, IMO pretty good compared this example
<div class="form-group">
<label class="form-control-label">Name</label>
<div class="input-group flex-wrap">
<span class="input-group-addon"><span class="fa fa-lock"></span></span>
<input name="name" class="form-control is-invalid" type="text">
<div class="invalid-feedback d-block">Custom error</div>
</div>
Alternatively you can add the .is-valid/.is-invalid class to the parent element .input-group. Then you can change the css to add the red border to the child elements like this:
.input-group.is-invalid .form-control,
.input-group.is-invalid .custom-select {
border-color: #FA5252;
}
.input-group.is-invalid .input-group-prepend .input-group-text {
border: 1px solid #FA5252;
}
.input-group.is-valid .form-control,
.input-group.is-valid .custom-select {
border-color: #05A677;
}
.input-group.is-valid .input-group-prepend .input-group-text {
border: 1px solid #05A677;
}
I'm using Bootstrap 4.3 and following code worked for me. Try adding "validated" class with "form-group" and group error message inside the input-group.
<div class="form-group validated">
<label class="form-control-label">Name</label>
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-lock"></span></span>
<input name="name" class="form-control is-invalid" type="text">
<div class="invalid-feedback">Custom error</div>
</div>
</div>
In my app, I'm namespacing Bootstrap's styles so that they don't pollute the styles outside my app:
.my-app {
#import '~bootstrap/scss/bootstrap.scss';
}
What I found by looking through the generated styles is that the validation css ultimately gets clobbered due to the mixin that generates it into:
.was-validated .my-app:invalid ~ .invalid-feedback,
.was-validated .my-app:invalid ~ .invalid-tooltip,
.my-app.is-invalid ~ .invalid-feedback,
.my-app.is-invalid ~ .invalid-tooltip {
display: block;
}
Note that it's .my-app.is-invalid and not .my-app .is-invalid. It looks like this is a consequence of the form-validation-state-selector mixin that generates it, which has a comment suggesting it's the result of a dart-sass compatibility fix. One hack I could do is add the my-app class to every input that needed validation but that's not ideal.
I was able to resolve it by extending my namespace selector with a wildcard as follows:
.my-app * {
#import '~bootstrap/scss/bootstrap.scss';
}
I have a page with a form with input and textarea elements. I am using bootstrap along with my own site.css. The site.css is before the boostrap.css in the markup. I have a css rule in the site css that looks like this:
.formcontainer input, textarea {
background-color: lightgray;
}
The form elements also have the form-control class from bootstrap applied to them. The problem is that the input elements prioritize the rule from my site css and apply the background color correctly. However, for the textarea elements the bootstrap class is prioritized over the rule from my site.css. All form elements are wrapped in the same div containers with the same clasess applied. I can't make sense of why the elements are getting the rules prioritized differently.
Here's an example of the markup where the input gets the background color but the textarea doesn't:
<div id="formpart2" class="formcontainer">
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Email</label>
<div class="input-group">
<input type="text" class="form-control invalid" fieldrequired>
</div>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Contact Instructions</label>
<div class="input-group">
<textarea type="text" class="form-control" rows="10" cols="15" fieldrequired></textarea>
</div>
</div>
</div>
The site.css is before the boostrap.css in the markup.
There's your problem. The way CSS works, rules that appear later (either within one sheet or in terms of multiple sheets being included) will overwrite rules that appear before them. Switch your markup so your custom styles come last - ie, include bootstrap.css before site.css.
(Also, bear in mind that textarea is a pretty generic selector. Did you mean .formcontainer textarea?)
The css engine always prioritize .class and #id over tag-name. The problem with your style is, your are using the tag name textarea which has a class form-control to style. So, the css engine will prioritize .form-control over tag-name. See the following examples.
Won't Work
.formcontainer input,
textarea {
background-color: lightgray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="formpart2" class="formcontainer">
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Email</label>
<div class="input-group">
<input type="text" class="form-control invalid" fieldrequired>
</div>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Contact Instructions</label>
<div class="input-group">
<textarea type="text" class="form-control" rows="10" cols="15" fieldrequired></textarea>
</div>
</div>
</div>
Will Work
input.form-control,
textarea.form-control {
background-color: lightgray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="formpart2" class="formcontainer">
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Email</label>
<div class="input-group">
<input type="text" class="form-control invalid" fieldrequired>
</div>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Contact Instructions</label>
<div class="input-group">
<textarea type="text" class="form-control" rows="10" cols="15" fieldrequired></textarea>
</div>
</div>
</div>
Hope this helps!
In Bootstrap, you might find a rule that starts something like this:
.formcontainer input,
.formcontainer textarea {
/* whatever */
}
In your attempt to overwrite that, you forgot the context for textarea:
.formcontainer input,
textarea {
background-color: lightgray;
}
This makes your rules for textarea less specific than Bootstraps's rule, so even if you load the css files in the correct order, your textarea style won't overwrite Bootstrap's textarea style (assuming you are in a .formcontainer context).
I highly recommend you learn more about CSS specificity. Very fundamental if you ever want to work with CSS.
I am new to Twitter Bootstrap and am starting to fumble my way through its use. While certain aspects of the framework are starting to make sense I am still struggling with form styling. I am trying to setup several different sections of a form which will have elements that are styled utilizing .form-inline. In one such instance I am also attempting to use .input-append with little luck.
<div class="row">
<div class="well span12">
<div class="row">
<div class="span12 form-inline input-append">
<label for="assetSearch">Asset Search</label>
<input type="search" id="assetSearch" placeholder="">
<span class="add-on"><i class="icon-search"></i></span>
</div>
</div>
<div class="row">
<div class="span12 form-inline">
<label for="service">Service</label>
<input type="text" id="service" autocomplete="off" />
</div>
</div>
</div>
</div>
The above markup renders like this:
As you can see "Asset Search" is not inline with the form input. If i remove the .input-append class from the containing div things line up. However, the search icon is no longer embedded in the text box, but instead to the right of text box.
How can I use .form-inline in cunjunction with .input-append?
You should not put inside a input-append (or prepend) anything else than inputs, buttons or .add-ons (this might not be exhaustive).
Try wrapping the whole thing into a div.input-append and let the .form-inline handle the floating : Demo on jsfiddle
<div class="span12 form-inline">
<label for="assetSearch">Asset Search</label>
<div class="input-append">
<input type="search" id="assetSearch" placeholder="" />
<span class="add-on"><i class="icon-search"></i></span>
</div>
</div>
Here's a fiddle of working alignment: http://jsfiddle.net/Jeff_Meadows/xGRtL/
The two fixes are to set vertical-align of <label> elements inside elements of class .input-append, and to reset the font-size of your element to 14px (it's set to 0 somewhere else in bootstrap). Rather than create a rule based on .input-append, I created a new class that you can add to your containing element. That way, you won't get unexpected results elsewhere.
.input-prepend label, .input-append label {
vertical-align: middle;
}
.fix-text-spacing {
font-size: 14px;
}
I've got a set of checkboxes I would like to position using CSS. This is how they are rendered:
<div id="edit-event-type" class="form-checkboxes">
<div class="form-item form-type-checkbox form-item-event-type-pubQuiz">
<input type="checkbox" id="edit-event-type-pubquiz" name="event_type[pubQuiz]" value="pubQuiz" class="form-checkbox">
<label class="option" for="edit-event-type-pubquiz">Pub Quiz </label>
</div>
<div class="form-item form-type-checkbox form-item-event-type-dancing">
<input type="checkbox" id="edit-event-type-dancing" name="event_type[dancing]" value="dancing" class="form-checkbox">
<label class="option" for="edit-event-type-dancing">Dancing </label>
</div>
<div class="form-item form-type-checkbox form-item-event-type-foodDeals">
<input type="checkbox" id="edit-event-type-fooddeals" name="event_type[foodDeals]" value="foodDeals" class="form-checkbox">
<label class="option" for="edit-event-type-fooddeals">Food Deals </label>
</div>
<div class="form-item form-type-checkbox form-item-event-type-liveMusic">
<input type="checkbox" id="edit-event-type-livemusic" name="event_type[liveMusic]" value="liveMusic" class="form-checkbox">
<label class="option" for="edit-event-type-livemusic">Live Music </label>
</div>
</div>
//Other form elements come after.
At the moment, they are getting displayed stacked one on top of another and I would like them to be displayed in stackes of, say 4. So I would like them to be displayed like this:
http://i.imgur.com/SvIQv.png
However, I have limited control over the markup so ideally I would like it all to be done in CSS. I have tried float:left and assigning them a right margin, but when I do that, although they are in stacks of 4, there is an issue where they are not aligned properly. Has anyone had an issue like this before?
Thanks,
give all container divs this class "form-type-checkbox" (also the first - its missing it). also add a container to all this.
css:
.container-of-all {
overflow: auto;
background: #000000;
}
.form-type-checkbox {
float: left;
width: 100px;
margin: 5px 10px 5px 10px;
}
maybe you need to reposition the labels or checkboxes itself a bit to get them on a pretty baseline.