I got some questions related to positioning I don't want to use a fixed position as my browser is dynamic, how can I move my + - to the right position of the contact: input (Position here)
I try many as it seems only ways is a position to be fixed is there another way to do it?
Here the image
<div class="form-group row">
<label for="validationNumber" class="col-2 col-form-label">Contact:</label>
<div class="col-4">
<input id="validationNumber" name="phonenumber" type="text" class="form-control" pattern="\b\d{8}\b" required>
<a onclick="add()"><label style="cursor: pointer;"><i data-feather="plus" ></i></label></a>
<a onclick="remove()"><label style="cursor: pointer;"><i data-feather="minus"></i></label></a>
<div id="new_chq">
</div>
<input type="hidden" value="1" id="total_chq">
<div class="invalid-feedback">
Enter a correct PhoneNumber!
</div>
</div>
</div>
.flex{display: flex;}
<div class="form-group row">
<label for="validationNumber" class="col-2 col-form-label">Contact:</label>
<div class="col-4">
<div class="flex">
<input id="validationNumber" name="phonenumber" type="text" class="form-control" pattern="\b\d{8}\b" required>
<a onclick="add()"><label style="cursor: pointer;"><i data-feather="plus" >+</i></label></a>
<a onclick="remove()"><label style="cursor: pointer;"><i data-feather="minus">-</i></label></a>
</div>
<div id="new_chq">
</div>
<input type="hidden" value="1" id="total_chq">
<div class="invalid-feedback">
Enter a correct PhoneNumber!
</div>
</div>
</div>
Related
This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 2 years ago.
I'm trying to build a simple filter-bar which has a custom-control element.
The element should be aligned vertically but it seems not to be working. This is the markup for the filter-bar:
<div class="bg-light p-3 card">
<form class="form-inline">
<div class="form-row">
<div class="col-auto">
<input type="text" placeholder="The team's name" class="form-control" value="" />
</div>
<div class="col-auto">
<select class="form-control">
<option value="">Select the season</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-secondary">
<i class="fas fa-search"/> Search</button>
</div>
<div class="col-auto">
<div class="custom-control custom-switch align-center">
<input type="checkbox" class="custom-control-input" id="vpx" checked="" />
<label class="custom-control-label" for="vpx">Hide 0-point teams</label>
</div>
</div>
</div>
</form>
</div>
But the result is shown below:
No matter which align- class I add, the element won't move a bit. Already tried to set the display property to inline-block as stated in the bootstap-docs.
Only way to achieve something like centered is to add mt-2 class but this seems not to be the correct way this should be done.
Add align-items-center to form-row and also close the <i> tag correctly on Search button
body{ min-width: 800px;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-light p-3 card">
<form class="form-inline">
<div class="form-row align-items-center">
<div class="col-auto">
<input type="text" placeholder="The team's name" class="form-control" value="" />
</div>
<div class="col-auto">
<select class="form-control">
<option value="">Select the season</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-secondary">
<i class="fas fa-search"> Search</i></button>
</div>
<div class="col-auto">
<div class="custom-control custom-switch align-center">
<input type="checkbox" class="custom-control-input" id="vpx" checked="" />
<label class="custom-control-label" for="vpx">Hide 0-point teams</label>
</div>
</div>
</div>
</form>
</div>
I need to do this card. I've done all, but my row with Date and time sucks. Please, help me to do it correctly. The first image shows how it must be, the second is mine. I don't know how to do: 1)a proper space between input date and input time. 2)How to make this card to be responsive so on the extrasmall screens it would take all 12 col. 3)why my radios are grey ? in the example they are white
<div class="form-group row">
<label for="date" class="col-md-2 col-form-label">Date and Time</label>
<div class="col-md-8">
<div class="input-group">
<div class="input-group-addon"> <span class="fa fa-calendar"></span></div>
<input type="text" class="form-control" id="date" name="date" placeholder="Date">
<div class="col-md-1"></div>
<div class="input-group-addon"> <span class="fa fa-clock-o"></span></div>
<input type="text" class="form-control" id="time" name="time" placeholder="Time">
</div>
</div>
</div>
I solved to you the 3 problems, check the code, the last style I put it inline but you can use the class of bootstrap and put what you want of props and add (!important) to take your style
<div class="form-group row">
<label for="date" class="col-md-2 col-form-label">Date and Time</label>
<div class="input-group">
<div class="col-xs-8">
<div class="input-group">
<div class="input-group-addon" style="background-color: white"> <span class="fa fa-calendar"></span>
</div>
<input type="text" class="form-control" id="date" name="date" placeholder="Date">
</div>
</div>
<div class="col-xs-4">
<div class="input-group">
<div class="input-group-addon" style="background-color: white"> <span class="fa fa-clock-o"></span></div>
<input type="text" class="form-control" id="time" name="time" placeholder="Time">
</div>
</div>
</div>
I have a ng-repeat control having textbox, textarea, and a delete image icon. I am having a required validator added for the textbox , textarea. Once the span error message is shown, the alignment is getting distorted.
Below is the code used:
<div class="row">
<div class="form-group ">
<label class="form-group col-md-3">Language</label>
<label class="form-group col-md-4">Title</label>
<label class="form-group col-md-5">Description</label>
</div>
</div>
<div class="row">
<div>
<div ng-repeat="Descriptions in testsWithDescription ">
<div class="form-group col-md-2 top-Margin-language">
<label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
</div>
<div class="form-group col-md-4 top-Margin-Title">
<input type="text" maxlength="150" class="form-control input-md" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" />
<span style="color:red" ng-show="submitted == true && mainForm.titleValidate_{{$index}}.$error.required">Title is required</span>
</div>
<div class="form-group col-md-5">
<textarea maxlength="500" class="form-control input-md noresize" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea>
<span style="color:red" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
</div>
<div class="form-group col-md-1">
<a style="cursor:pointer">
<img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) || testsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" />
</a>
</div>
</div>
</div>
</div>
How to set the alignment properly for span when using ng-repeat? Initial load the controls are aligned correct. If i remove any item in title or description, and click submit, the error messages are shown, but the UI is getting distorted.
Thanks
Bootstrap's row class includes "clearfix"ing. This allows row's of varying height columns to consistently start at the left. Currently your html is using a nested div within your row class div as your repeating element. If you move the ng-repeat up to the row class div the clearfixing will take effect after each set of columns, and things should look visually as expected.
Updated HTML
<div class="row">
<div class="form-group ">
<label class="form-group col-md-3">Language</label>
<label class="form-group col-md-4">Title</label>
<label class="form-group col-md-5">Description</label>
</div>
</div>
<div class="row" ng-repeat="Descriptions in testsWithDescription ">
<div class="form-group col-md-2 top-Margin-language">
<label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
</div>
<div class="form-group col-md-4 top-Margin-Title">
<input type="text" maxlength="150" class="form-control input-md" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" />
<span style="color:red" ng-show="submitted == true && mainForm.titleValidate_{{$index}}.$error.required">Title is required</span>
</div>
<div class="form-group col-md-5">
<textarea maxlength="500" class="form-control input-md noresize" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea>
<span style="color:red" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
</div>
<div class="form-group col-md-1">
<a style="cursor:pointer">
<img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) || testsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" />
</a>
</div>
</div>
The solution provided by #haxxxton is the answer, which is:
you should move your ng-repeat up to your as this will provide the "clearfix"'ing that bootstrap columns need in order to allow for the height change of the additional span. ie <div class="row" ng-repeat="Descriptions in testsWithDescription">
I know I am doing this wrong but I have no idea how to fix it properly.
I have a sign up form that has a display: relative, on col-lg. But I did not know how to change a css based on a screen size. So I just duplicated the sign up form and gave it a different class name and changed the css accordingly.
Problem I came across was that if someone types information and then decides to adjust screen, all of there info disappears(because it is on the col-lg!)
How can I fix this issue without having to duplicate the form? I would like to not use jquery or javascript, but if I have to I will.
.form-signup {
position: absolute;
bottom: 70px;
right: 0;
margin-right: 35px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- First form -->
<div class="col-xs-4 col-sm-4 col-md-4 pull-right form-signup hidden-md hidden-sm hidden-xs">
<form role="form">
<h2>
<div class="text-center lead p-color">Tagline</div>
</h2>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="first_name" id="FN" class="form-control input-md" placeholder="First Name" tabindex=1 autofocus>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="last_name" id="LN" class="form-control input-md" placeholder="Last Name" tabindex=2>
</div>
</div>
</div>
<div class="form-group">
<input type="email" name="email" id="EM" class="form-control input-md" placeholder="Email Address" tabindex=3>
</div>
<div class="form-group">
<div class="form-group">
<input type="password" name="password" id="PW" class="form-control input-md" placeholder="Password" tabindex=4>
</div>
</div>
<div class="checkbox">
<label>
<input class="checkbox-focus" type="checkbox" tabindex=5>I agree to
<a class="ri-anchor" href="#" tabindex=6>terms</a>
</label>
</div>
<div class="row">
<div class="form-group register-div">
<input type="submit" value="Sign Up" class="btn btn-primary btn-block btn-lg" tabindex=7>
</div>
</div>
</form>
</div>
<!-- Second Form -->
<div class="row row-offset center-block">
<div class="col-md-12 text-center hidden-lg"><img src="images/landing-md-xs.png" class="img-responsive center-block" alt=" animation" style="height: auto; width: 500px;"/></div>
<div class="col-xs-offset-2 col-xs-8 col-md-offset-3 col-md-6 hidden-lg">
<form role="form">
<h2>
<div class="text-center lead p-color">TAGLINE</div>
</h2>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="first_name" id="first_name" class="form-control input-md" placeholder="First Name" tabindex=1 autofocus>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="last_name" id="last_name" class="form-control input-md" placeholder="Last Name" tabindex=2>
</div>
</div>
</div>
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-md" placeholder="Email Address" tabindex=3>
</div>
<div class="form-group">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-md" placeholder="Password" tabindex=4>
</div>
</div>
<div class="checkbox">
<label>
<input class="checkbox-focus" type="checkbox" tabindex=5>I agree to
<a class="ri-anchor" href="#" tabindex=6> terms</a>
</label>
</div>
<div class="row">
<div class="form-group register-div">
<input type="submit" value="Sign Up" class="btn btn-primary btn-block btn-lg" tabindex=7>
</div>
</div>
</form>
</div>
</div>
col-lg-x is a bootstrap class that assigns your div grid size with the value of x. it's for large screen. but removing shouldn't drastically change the design like you have presented above. It's because you have mis-linked bootstrap css file. Also on the code above you have included jquery instead of bootstrap.
Edit : for Problem I came across was that if someone types information and then decides to adjust screen, all of there info disappears(because it is on the col-lg!)
For this add other classes col-md-x, col-xs-x` on the div as according to your need of x value.
I am trying to layout a form using bootstrap 3 but for some reason the input is pushed to left.
My markup looks like this
<div class="jumbotron">
<form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_date" >Date work performed</label>
<p class="input-group col-sm-3">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_ref_no" required-asterix="" >Ref No</label>
<div class="col-sm-2">
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">
</div>
<div role="alert">
<span class="error has-error alert-danger" ng-show="invoiceForm.txt_job_ref_no.$error.required">
Ref no is required!</span>
</div>
</div>
</form>
</div>
Here is the link to fiddle
Many thanks in advance!
This should help. Wrap the labels and elements in cols, and the form in a .container inside the .jumbotron. You were over-complicating the layout.
<div class="jumbotron">
<div class="container">
<form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">
<div class="col-sm-12">
<div class="form-group">
<label class="control-label" for="txt_job_date">Date work performed</label>
<div class="input-group">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label" for="txt_job_ref_no" required-asterix="" >Ref No</label>
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">
</div>
</div>
</form>
</div>
</div>
http://jsfiddle.net/j8x15dbs/1/
Edit: Missed part about form being horizontal. Added new code below to reflect that.
This has the layout you're looking for
<div class="jumbotron">
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_date">Date work performed</label>
<div class="col-sm-7">
<div class="input-group">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="txt_job_ref_no" required-asterix="">Ref No</label>
<div class="col-sm-7">
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="required">
</div>
</div>
</form>
</div>
</div>
http://jsfiddle.net/j8x15dbs/2/
A real easy thing to do - and a great way to learn - is to just copy the examples off of Bootstrap's site and replace their values with yours. :)
remove <col-sm-2> from before the input tag. As good practice, always use <div class="row"> before using <col-sm-12> and don't use rows or columns inside <div class="form-group">
Please read about bootstrap scaffolding to understand how to write good markup.