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 problem to match the buttons to iphone 4 and iphone 5 only.
all the other platform design phones looks good and responsive but only iphone 4 & 5 little strange.
as you can see in nexus, galaxy and iphone 6 it looks good
but in iphone 4 i need to scroll down and the forgot password and create account is one on the other.
<div class="popup popup-login modal-{{popupLogin}}" style="display: block;background:transparent">
<div class="content-block" >
<div class="login-view-box page page-login-wrapper" style="background:transparent;background:#009688">
<div class="text-center" >
<div class="logo sd" ></div>
<div class="company-text">company name</div>
</div>
<div class="list login-form-box">
<form name="loginForm"
novalidate ="novalidate"
ng-submit="loginForm.$valid && performLogin()" style="margin:20px auto;">
<label class="item item-input" >
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
fill="#000000"></path>
</svg>
<input type="email" placeholder="Email" name="email" ng-model="email" ng-class="{submitted:submitted}" required/>
</label>
<div ng-messages="loginForm.email.$error" ng-if="loginForm.email.$touched || submitted" class="input-error-small item item-input">
<div ng-message="required">{{ClientMessages.ThisFieldCannotBeEmpty}}</div>
<div ng-message="email">{{ClientMessages.InvalidEmailInput}}</div>
</div>
<br />
<label class="item item-input">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
<path d="M14.5 8h-0.5v-1.5c0-2.481-2.019-4.5-4.5-4.5s-4.5 2.019-4.5 4.5v1.5h-0.5c-0.827 0-1.5 0.673-1.5 1.5v8c0 0.827 0.673 1.5 1.5 1.5h10c0.827 0 1.5-0.673 1.5-1.5v-8c0-0.827-0.673-1.5-1.5-1.5zM6 6.5c0-1.93 1.57-3.5 3.5-3.5s3.5 1.57 3.5 3.5v1.5h-7v-1.5zM15 17.5c0 0.276-0.224 0.5-0.5 0.5h-10c-0.276 0-0.5-0.224-0.5-0.5v-8c0-0.276 0.224-0.5 0.5-0.5h10c0.276 0 0.5 0.224 0.5 0.5v8z"
fill="#000000"></path>
</svg>
<input type="password" placeholder="Password" name="password" ng-model="password" ng-class="{submitted:submitted}" required/>
</label>
<div ng-messages="loginForm.password.$error" ng-if="loginForm.password.$touched || submitted" class="input-error-small item item-input">
<div ng-message="required">{{ClientMessages.ThisFieldCannotBeEmpty}}</div>
</div>
<button type="submit"
class="button button-block button-positive"
id="login-button"
ng-click="loginSubmit()"
<i class="icon ion-loading-c"></i>
<span>Sign In</span>
</button>
<div class="item item-input list-block" style="background-color:transparent;border:0;margin-top:8px;" ng-click="toggleStayLoggedCheck();" >
<label class="label-checkbox">
<input type="checkbox" name="stayLoggedCheckbox" ng-model="stayLoggedCheckbox" value="StayLogged" >
<div class="item-media" style="padding-left:20%">
<i class="icon icon-form-checkbox" style="border-radius:0"></i>
<span style="padding-left:10px;color:white">Stay Logged In</span>
</div>
</label>
</div>
</form>
<button class="button btn-account">
Create an account
</button>
</div>
<!-- Big Button -->
<div class="footer-link text-center" style="margin-top:20px;">
<div class="text-center" style:"margin-top:20px;">
<a href="#" class="open-popup" data-popup=".popup-forgotpassword" style="color:white;">
Forgot Password?!
</a>
</div>
<!-- <a href="#" class="open-popup" data-popup=".popup-register" >
I don't have a APP account.
</a>-->
</div>
<div class="text-center crt"
style="position: absolute;
background: #4bd46b;
border-radius: 20px;
height: 40px;
width: 40px;
bottom:10px;
right:10px;
font-size: 18px;">
<span class="fa fa-envelope-o df-color" style="font-size:20px;top:8px;position:relative;"></span>
</div>
</div>
</div>
</div>
the problem area
<button class="button btn-account">
Create an account
</button>
</div>
<!-- Big Button -->
<div class="footer-link text-center" style="margin-top:20px;">
<div class="text-center" style:"margin-top:20px;">
<a href="#" class="open-popup" data-popup=".popup-forgotpassword" style="color:white;">
Forgot Password?!
</a>
</div>
<!-- <a href="#" class="open-popup" data-popup=".popup-register" >
I don't have a APP account.
</a>-->
</div>
<div class="text-center crt"
style="position: absolute;
background: #4bd46b;
border-radius: 20px;
height: 40px;
width: 40px;
bottom:10px;
right:10px;
font-size: 18px;">
<span class="fa fa-envelope-o SAMGray-color" style="font-size:20px;top:8px;position:relative;"></span>
</div>
Has your class .footer-link a position: absolute and bottom: 0 properties or something ?
I'd suggest to create a media query like below, to target iphones 4 & 5.
#media only screen and (max-width: 320px) {
/* your iphone 4 & 5 styles */
}
Then, switch your .footer-link class to position: relative (and maybe float: left, depending on your other blocks' float).
The final code should looks like this:
#media only screen and (max-width: 320px) {
.footer-link {
position: relative;
/* float: left; if needed */
}
}
This should position the "forgot password" and fab below the "create account" button and in the meantime apply that margin-top: 20px which is useless in absolute positionning.
Your view will have to be scrolled to see the "forgot password" link though. So you might want to add more styles to the media query in order to reduce some margins, paddings or font-sizes and get the desired view as a result.
However, in this layout your fab link will be messed up. As its absolute positionning would be relative to the .footer-link. I suggest you move it outside of the footer (right before the </body> tag, for example).
Hope this helps!
I'd try switching the position properties. When positioning something absolute, the parent should be "position:relative". When you were resizing in Chrome's mobile spoofer, it was pushing that absolute positioned item up and into the other content. It isn't mimicking any other specs when you're spoofing the view, just the view dimensions. Hope this helps!
<div class="text-center crt" style="position: relative;
background: #4bd46b;
border-radius: 20px;
height: 40px;
width: 40px;
bottom:10px;
right:10px;
font-size: 18px;">
<span class="fa fa-envelope-o df-color" style="font-size:20px;top:8px;position: absolute;"></span>
</div>
I'm a little bit desesparate, i have tried multiple things and nothing is working. So my issue is the following :
Everytime i click on a input field, the background resize by himself, i have a blank space on the bottom and on the top.
I have added :
cordova.plugins.Keyboard.disableScroll(true);
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.disableScroll(true);
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
login.html
<ion-view view-title="Login" align-title="left">
<ion-content class="background">
<div class="hero no-header flat">
<div class="content" style="bottom: 0px;">
<div class="app-icon"></div>
<h1 style="text-transform: uppercase;">App</h1>
</div>
</div>
<div class="list padding" style="margin-top: 25px;">
<label style="margin-bottom: 20px; display: block;">
<input type="text" placeholder="Adresse e-mail" ng-model="data.email" class="customInput">
</label>
<label style="margin-bottom: 20px; display: block;">
<input type="password" placeholder="Mot de passe" ng-model="data.password" class="customInput">
</label>
</div>
<div class="button-bar padding">
<button class="button button-small button-border icon-left ion-social-google button-assertive-900" ng-click="login(data)">Connexion</button>
<button class="button button-small button-border icon-left ion-social-facebook button-positive-900">Facebook</button>
</div>
<div class="padding">
<button class="button button-full button-register ink" ui-sref="app.register">Créer votre compte</button>
</div>
</ion-content>
.background.scroll-content {
background: url('../img/login.jpg') no-repeat;
background-size: cover;
background-position: center;
margin: auto;
z-index: 2;
}
The issue is that when the keyboard is shown the background resizes or the keyboard pushes the background image up.
Hmm, please explain better. I've tried your code here: http://play.ionic.io/app/e9abbb2a5670 but I dont se anything wrong.
I've created extremely simple form that contains 2 inputs and 2 buttons.
When I would like my form to take 6 spans width and be centered.
Below is my code:
<div class="container-fluid padded">
<div class="row">
<div class="container">
<div class="row">
<!--filtry-->
<div class="span6 offset3 padded" style="border: 1px solid black;">
<form action="#" method="get" class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label">Data od</label>
<div class="controls">
<input type="text" id="dataOd" class="input-xlarge" />
</div>
</div>
<div class="control-group">
<label class="control-label">Data do</label>
<div class="controls">
<input type="text" id="dataDo" class="input-xlarge" />
</div>
</div>
<div class="form-actions">
<div class="pull-right">
<a class="btn wczytaj" href="#"><i class="icon-play icon-white"></i>Wczytaj</a>
<a class="btn btn-info disabled eksportuj" href="#" id="eksportuj"><i class="icon-download-alt icon-white"></i>Eksportuj</a>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
My form in full size browser looks like this:
but after resizing it I get this result:
How should I change my code to get those input 100% width on every resolution?
Is there any simple way or do I must tweak whole bootstrap?
I've tried adding span* classes to inputs but without any luck.
There are similar questions on SO (https://stackoverflow.com/a/11193864/965722), but answer involves JavaScript and I would like to avoid that.
Here is jsfiddle with my code: http://jsfiddle.net/Misiu/HdSEn/
You need to increase the width of the span. Set span8 instead of span6.
Demo : jsfiddle.net/HdSEn/3
OR
If you want display full width of the box on page, add span12 instead of span6
jsfiddle.net/HdSEn/5/
Updated
<div class="span7 offset3 padded well">
The problem is, form is greater than span7. Like form width> span7,6,5,4.... So you need to set width for input box.
Demo: http://jsfiddle.net/HdSEn/18
Hope this solves your issue:
JSFiddle Demo
CSS:
input[type="text"] {
min-height:30px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
I have spent more time than I ever care to admit trying to fix this stupid bug. I have a form that displays to the left of some content. It looks okay on a wide and narrow screen, but on a tablet width (it overlays between 770 and 950 or so) the content to the right overlaps the form fields.
Am I missing something in my markup to use Twitter Bootstrap properly or do I need to add some custom styles using breakpoints to fix it? It appears that the fixed pixel width is causing the issue defined in bootstrap.css. Shouldn't these width properties use % since I'm using a fluid responsive layout?
<div class="container-narrow">
<div class="content">
<div class="row-fluid">
<div class="span5">
<form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
<div class="control-group">
<label class="control-label required" for="Step1_email">Email <span class="required">*</span></label>
<div class="controls">
<input size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label>
<div class="controls">
<input size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
</div>
</div>
</form>
</div>
<div class="span7">
<div class="promo-btm">
<h2>Heading 2</h2>
<ul class="checks">
<li>Bullet One</li>
<li>Bullet Two</li>
</ul>
</div>
</div>
</div>
</div>
</div>
See the attached screenshot for the bug or you can reproduce it yourself using my fiddle.
If someone could help point out a way to fix this I would be extremely appreciative!
Just add a width to your input elements so they can adapt responsively with all of your screen sizes. You can use something like .span12 as a width on your input elements and that should fix the issue:
HTML
<div class="container-narrow">
<div class="content">
<div class="row-fluid">
<div class="span5">
<form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
<div class="control-group">
<label class="control-label required" for="Step1_email">Email <span class="required">*</span></label>
<div class="controls">
<input class="span12" size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label>
<div class="controls">
<input class="span12" size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
</div>
</div>
</form>
</div>
<div class="span7">
<h2>Heading 2</h2>
<ul class="checks">
<li>Bullet One</li>
</ul>
</div>
</div>
</div>
</div>
Demo: http://jsfiddle.net/yR7Ap/18/
The other posts have pinpointed the root cause of the problem, that your form is too wide for the span5 div with the default bootstrap css
It's not too difficult to make it fit though. See if this helps : http://jsfiddle.net/panchroma/FXXaZ/
I have tightened up your form with this CSS:
/* pull control label left */
.form-horizontal .control-label {
width:70px; /* default 160 */
}
/* pull input box left */
.form-horizontal .controls {
margin-left: 90px; /* defaul 180 */
}
/* shorten input box */
input, textarea, .uneditable-input {
width: 180px; /* default 206 */
}
Good luck!
Your form is too wide for the .span5 column. Try adding this above:
<div class="row-fluid">
<div class="span5">hello</div>
<div class="span7">world</div>
</div>
and add the following style:
.row-fluid > div { outline: 5px solid green; }
and you'll see what I mean.