ng-repeat with error message alignment - css

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">

Related

How can i position my Add Minus in form to stay same position in my input?

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>

Can't understand some things with making a bootstrap card , I'm a rookie

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>

Setting error message to right side of control bootstrap and Angular Js

I am using Angular js, in which i have the below control.
<body class="ng-cloak">
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div class="container form-horizontal" ng-show="createMenu">
<br />
<div class="form-group">
<label for="firstName" class="col-sm-3 control-label">Name<em style="color:red">*</em></label>
<div class="col-sm-4">
<input type="text" maxlength="150" class="form-control" required="" ng-model="nName" id="nName" name="nName" />
</div>
<div class="col-sm-3">
<span class="error" ng-show="submitted == true && mainForm.nName.$error.required">Please enter Name.</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Recipient Group:<em style="color:red">*</em></label>
<div class="input-group col-sm-4" style="padding-left:10px;">
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
<input type="text" class="form-control" required="" placeholder="Search the group" ng-model="searchDatalocation" ng-change="searchgroups()" name="searchValue">
</div>
<div class="col-sm-3">
<span class="error" ng-show="submitted == true && mainForm.searchValue.$error.required">Please select a Recipient group.</span>
</div>
</div>
</form>
</div>
</body>
The error message "Please enter Name" appears on right side of the textbox, however, the error message "Please select a Recipient group" appers below the control. I have tried changing the css, but it has not worked. How to set the error message to be shown on right side after the control.
Thanks
Style the .input-group div with display: inline-table; and float:left;
Please also note that there is one missing closing tag </div> for class="container form-horizontal"

Form height to increase based on content in AngularJs

I have a angularJs form, which has multiple controls. When the page loads initially, all the contents fit in the form. When the validation messages are shown, the submit button, cancel button are not shown. These buttons are getting below.
Below is the code in index.cshtml. I have only put few controls, additional controls are also there.
<body class="ng-cloak">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div>
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">Test</a>
</div>
<ul class="nav navbar-right nav-pills">
<li ng-class="{active: createMenu}">
Create</li>
<li ng-class="{active: dashboardMenu}">
Dashboard
</li>
</ul>
</div>
</nav>
</header>
</div>
<div class="container" ng-show="createMenu">
<br />
<div class="row">
<div class="col-sm-2">
<label class="control-label">Groups:</label>
</div>
<div class="col-sm-4 form-group">
<select name="grpTypeSelect" required="" ng-model="selectedgrpType" class="dropdown form-control cl-sm-6" ng-options="grp.GrpTypeName for grp in grpss" ng-change="updateImageUrl(selectedgrpType)">
<option value="">-- Select the Group --</option>
</select>
</div>
</div>
<span id="span1" style="color:red" ng-show="submitted == true && mainForm.grpTypeSelect.$error.required">Group is required</span>
<br />
<div class="row">
<div class="col-sm-2">
<label>Name :</label>
</div>
<div class="col-md-6 form-group">
<input type="text" maxlength="150" class="input-md form-control col-md-4" required="" ng-model="testName" name="testName" />
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.testName.$error.required">Name is required</span>
<br />
<br />
<div class="row">
<div class="col-sm-6">
<label class="control-label">Start date</label>
<div class="form-group">
<div class="input-group date" id="startDatepicker">
<input type="text" required class="form-control" placeholder="MM/DD/YYYY" ng-model="defaultStartDate" name="startDate">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.startDate == '' && mainForm.startDate.$error.required">Start Date is required</span>
</div>
<div class="col-sm-6">
<label class="control-label">End date</label>
<div class="form-group">
<div class="input-group date" id="endDatepicker">
<input type="text" required="" class="form-control" placeholder="MM/DD/YYYY" ng-model="defaultEndDate" name="endDate">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.endDate.$error.required">End Date is required</span>
</div>
<!--/col-->
<div class="col-sm-6">
<label class="control-label">Start Time</label>
<div class="form-group">
<div class="input-group" id="startTimepicker">
<input type="text" required="" class="form-control" placeholder="00:00 AM/PM" ng-model="defaultStartTime" name="startTime">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.startTime.$error.required">Start Time is required</span>
</div>
<div class="col-sm-6">
<label class="control-label">End Time</label>
<div class="form-group">
<div class="input-group" id="endTimepicker">
<input type="text" required="" class="form-control" placeholder="00:00 AM/PM" ng-model="defaultEndTime" name="endTime">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.endTime.$error.required">End Time is required</span>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-6">
<input type="submit" value="Submit" ng-click="submitted=true" class="btn btn-primary" />
<input type="button" id="btnReset" value="Cancel" ng-click="reset()" class="btn btn-primary" />
</div>
</div>
<br/>
</div>
</div>
Is it possible to fit the contents even during the validation messages are shown? i am not setting any specific class to set height. How to make sure that submit and cancel button are also visible, when the form height increases. I checked this link extending a form's height to fit the content in the form , but could not find the solution.
Adding the snippet to show the issue:
Initial load shows as :
After error message:
Thanks
For making anything auto-adjustable according to its content, you can use min-height property.
min-height:100px;
Try this, add it in your form css, like this
<form name="mainForm" id="createForm"
ng-submit="mainForm.$valid && add()"
novalidate=""
style="min-height:100px;">

How to put multiple Bootstrap inputs on same line?

I have the following HTML:
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" class="form-control" name="price" value="" placeholder="Price (optional)" style="width: 140px;">
</div>
<span class="btn btn-primary" onclick="update($(this));"><span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Update</span>
JSFIDDLE
It renders like this:
How can I get both inputs and the button on the same line? I've been messing with the CSS but can't seem to get it to work. I was able to get it working with a table, but I know a CSS solution would be "better."
You can use Inline Forms like in the Bootstrap Documentation found here:
https://getbootstrap.com/docs/3.4/css/#forms-inline
The 'form-inline' class is probably what you're looking for.
Solution 1 - Using the Grid
Use the Bootstrap’s predefined grid classes for arranging the form elements.
The grid gives you a better control over the width of the elements and scales better than the Inline Form solution.
<form>
<div class="form-row">
<div class="form-group col-md-7">
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
</div>
<div class="form-group col-md-3">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="price0" placeholder="Price (optional)">
</div>
</div>
<div class="form-group col-md-2">
<button type="submit" class="btn btn-primary" onclick="update($(this));"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Update</button>
</div>
</div>
</form>
Solution 2: Inline Form:
Use an Inline Form, as described by Bootstrap Inline Form Documentation.
You need to manually address the width and alignment.
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
</div>
<div class="input-group m-2">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="price" placeholder="Price (optional)">
</div>
<button type="submit" class="btn btn-primary m-2" onclick="update($(this));"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Update</button>
</form>
Running Example
This JSFiddle shows both solutions running.
The sample code and fiddle are updated for Bootstrap 4.
Use grid layout with xs phone size to force grid on responsive, the grid is divided into 12 cells so you'll need 3 x 4.
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
</div>
You could also have one of them bigger than the others:
<div class="row">
<div class="col-xs-7">
</div>
<div class="col-xs-3">
</div>
<div class="col-xs-2">
</div>
</div>
As long as they add up to 12.
Demo
Bootstrap Grid
In Bootstrap 4 you use multiple
<div class="col"></div>

Resources