I am stuck in rendering div via ng-repeat. I want to render the coming divs in ng-repeat one by one covering half the page.
Here is my code:
<div class="col-md-12">
<div class="form-group col-md-6" ng-repeat="field in selectedfields" ng-if="!selectedfields[$index].allowedValues || selectedfields[$index].allowedValues.length === 0 ">
<label class="control-label" for="domain">{{field.name}} </label>
<input placeholder="{{field.name}}" class="form-control" type="text" id="domain">
</div>
<div class="form-group col-md-6" ng-repeat="field in selectedfields" ng-if="selectedfields[$index].allowedValues.length >= 1">
<label class="control-label" for="{{field.name}}">{{field.name}} </label>
<select class="form-control">
<option value="{{allowedValue.name}}" ng-repeat="allowedValue in field.allowedValues" ng-model="field.allowedValues">{{allowedValue.name}}</option>
</select>
</div>
</div>
The divs(textboxes/dropdown) under the parent div should appear one by one covering half the page, but they are coming on full page. Each div is rendering on next line. Can someone please suggest what am I doing wrong in giving the css class?
Your final layout should be
<div class="col-md-12">
<div class="row">
<!-- ng-repeat stuff goes here !-->
</div>
</div>
Related
I have a form with multiple inputs.
All of those inputs are Dropdowns, Checkboxes, short Texts, etc. Except one which can be come quite large (textarea). I want all the smaller Inputs on the left side of the Page and the textarea on the right side of the Page.
The Textarea is supposed to have the same height as all the elements on the right side and take roughly half of the Pages width.
My problem is now that I am unable to properly add the Textarea to the right Side. When I use "float:right" then it either has an huge gap between the smaller Elements and itself, or it is small and when I make it bigger then the small Elements become smaller. Or it has the correct size, but then it only has one Element on the left side and every other Element comes after the Textarea has ended.
<form method="post">
<input asp-for="ID" type="hidden" />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="row " >
<div class="form-group col-md-6">
<label asp-for="Title" class="control-label"></label>
<input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger"></span>
</div>
<div class="form-group col-md-5">
<label asp-for="Comment" class="control-label"></label>
<textarea asp-for="Comment" rows="14" class="form-control" oninput='this.style.height = "";this.style.height = this.scrollHeight + 3 + "px"' height:"100vh">
</textarea>
<span asp-validation-for="Comment" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
.....
</div>
<div class="form-group col-md-3">
....
</div>
</div>
<div class="row">
#if (Model.Valid is not null)
{
<div class="form-group col-md-3">
....
</div>
}
<div class="form-group col-md-3">
....
</div>
</div>
<div class="row">
......
<hr />
.....
So, all the smaller Elements are inside the "form-group", which are mostly inside "row". And on the right side I now want the Comment TextArea.
I would prefer a plain Bootstrap Solution (especially since everything else is already working in Bootstrap), but I am open to everything.
I have just started learning Bootstrap and am trying to implement it in a web page. But I am having trouble in preventing the bootstrap class divs from overlapping each other. On full screen, the web page looks like:
On reducing the width of the window by some amount, it becomes:
And making window almost as small as mobile screen I get this:
My html code for this is:
<body>
<div id="point" class="row container-fluid">
<div id="point_display" class="col-md-10">
</div>
<div id="point_info" class="row col-md-2">
<div class="col-md-8">
<h5>Current point position:</h5>
<p></p>
</div>
<div class="col-md-8">
<input type="checkbox" id="coordinate_transform" onclick="transformCoordinate(this.checked)"><span>Transform co-ordinate system</span></input>
</div>
<div class="col-md-8">
<h5>Transformation matrix:</h5>
<div id="transformMatrix">
</div>
</div>
</div>
</div>
<div id="control" class="row container-fluid">
<div id="slider" class="col-md-2">
<input type="range" value="0" min="0" max="100" oninput="changePosition(this.value)" onchange="changePosition(this.value)" />
</div>
<!--div id="coordinate" -->
<div class="col-md-3"><span>X: </span><input id="newX" type="number" step="0.0001" value=1 00></div>
<div class="col-md-3"><span>Y: </span><input id="newY" type="number" step="0.0001" value=1 00></div>
<div class="col-md-3"><span>Z: </span><input id="newZ" type="number" step="0.0001" value=- 300></div>
<!--/div-->
<div class="col-md-3"><button id="change_destination" onclick="setNewDestination()">Set New Destination</button></div>
<div class="col-md-3"><button id="reset_camera" onclick="resetCamera()">Reset Camera</button></div>
</div>
<script src="js/main_script.js"></script>
</body>
The black part of the page with axes and stuff is dynamically added to the div with id= point_display inside div point and the matrix is also dynamically added in the div with id = `transformMatrix"
Please help me figure out how to prevent the overlapping of the elements so that on reducing width, they just stack one below other.
Using bootstrap 3.3 and angular here.
I am trying to create a search filter above my grid but having some alignment issues. In full page I can see them aligned correctly, but when I try to resize the page all my form controls get jumbled up and down. I believe these is some css class which is missing but cant seem to figure out what is that. Could anyone point me in right direction.
I also created a stackblitz demo here at:
https://angular-datrange-enhq8w.stackblitz.io/
If you resize the window you would see what I am talking about.
Here is the stackblitz editor for this:
https://stackblitz.com/edit/angular-datrange-enhq8w
Below is some relevant code:
<div id="filters">
<form [formGroup]="filtersForm" >
<div class="row padding-top-10">
<div class="col-xs-12 col-sm-12 col-md-1 col-lg-1 form-group" style="margin-right:65px">
<label for="name">Name</label>
<input formControlName="name" name="name" type="text" style="height:33px" autocomplete="off" class="hidden-xs hidden-sm" />
</div>
</div>
</form>
</div>
Also on side note if you see the demo somehow I feel my dropdown does has the right style, is there some extra bootstrap 3 style I can add for this.
Thanks for looking into.
Anyone for inputs?
The grid system for bootstrap states that every row must be wrapped by a container class.
<div id="filters">
<form [formGroup]="filtersForm">
<div class="container-fluid">
<div class="row padding-top-10">
<div class="col-xs-12 col-sm-12 col-md-1 col-lg-1 form-group" style="margin-right:65px">
<label for="name">Name</label>
<input formControlName="name" name="name" type="text" style="height:33px" autocomplete="off"
class="hidden-xs hidden-sm" />
</div>
</div>
</div>
</form>
</div>
This does not solve the issue of changing the size. The bootstrap grid system is setup like this: For every row, there are 12 columns. What you are saying is that for the div with the class col-xs-12, make the element in that class have a width of 100% when the screen size is extra small. You are also saying that when it hits the col-md-1 (medium screen size breakpoint), it should have a width of 8.3333%. You have 6 divs in that page you provided. Since you have 6 divs, 12 columns / 6 divs = 2 columns per div. Therefore your code should be refactored to something like this:
<div id="filters">
<form [formGroup]="filtersForm">
<div class="container-fluid">
<div class="row padding-top-10">
<div class="col-xs-12 col-md-2 form-group" style="margin-right:65px">
<label for="name">Name</label>
<input formControlName="name" name="name" type="text" style="height:33px" autocomplete="off"
class="hidden-xs hidden-sm" />
</div>
</div>
</div>
</form>
</div>
Notice how I removed col-sm-12.. this is because col-xs-12 will set the width for every screen size up to the next given class. In this case you have col-xs-12, therefore when the screen size is xs and sm, it'll have a width of 100%. When it hits the md breakpoint, it'll change the width to 2/12 and have the same width for lg and xl screen sizes.
Check out bootstrap grid system.
The base syntax is:
container | container-fluid
row
columns (the total of col must be 12)
Also, there is no need of aditional margins on your col divs.
<div id="filters">
<form class="container-fluid">
<div class="row padding-top-10">
<div class="col-xs-12 col-md-2">
<div class="form-group">
<label for="name">Name</label>
<input formControlName="name" name="name" type="text" autocomplete="off" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="form-group">
<label for="age">Age Range</label>
<select class="form-control" formControlName="age">
<option [selected] value="">All</option>
<option *ngFor="let age of ages" value='{{age}}'>
{{age}}
</option>
</select>
</div>
</div>
</div>
</form>
</div>
If you want to persist all columns in a single row even on small screens, remove col-xs-12 and change col-md-2 to col-xs-2.
I have placed two div elements contained in a form. My aim is to place the second div "App" side by side with the "Status" div like in the mock up below:
What I've tried so far is the following, setting the align="right" which positions the div on the extreme right.
Also I tried setting style="margin-left: which places the second div underneath and too far right of the first div.
Question:
Does anyone know how I can place the second div in line and side by side with the first div?
Form markup:
<form action="" method="post">
<div class="form-horizontal">
<div class="col-lg-6">
<!-- SELECT STATUS STATIC-->
<div class="form-group">
<label class="col-md-3 control-label" for="Current Status">Status</label>
<div class="col-md-8">
<select id="Status" name="Status" onchange="" class=" form-control">
<option value="Down">Down</option>
<option value="Up">Up</option>
</select>
</div>
</div>
<!-- SELECT APP STATIC-->
<div class="form-group">
<label class="col-md-3 control-label" for="App">App</label>
<div class="col-md-8" >
<select id="App" name="App" onchange="" class=" form-control">
<option value="SAP">SAP</option>
<option value="JAP">JAP</option>
</select>
</div>
</div>
</div>
</div>
</form> <!--END OF FORM ^^-->
You can set both divs to display: inline-block.
.form-group {
display: inline-block;
}
I have 3 columns in my form for inputting the user's phone:
<div class="col-md-5">
<label class="control-label">Phone</label>
<div class="row">
<div class="col-md-4">
<label for="phone_code" class="sr-only"><fmt:message key="phoneCode"/></label>
<select class="form-control" name="phoneCode" id="phone_code">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<span class="col-md-2 text-center">-</span>
<div class="col-md-6">
<label for="phone_number" class="sr-only">phone number</label>
<input type="tel" class="form-control" name="phoneNumber" id="phone_number" dir="LTR" value="${phoneNumber}">
</div>
</div>
</div>
http://www.bootply.com/jgFqaA4r6o
When I include the bootstrap css for rtl:
https://github.com/morteza/bootstrap-rtl
this flips the order of the columns, which in most cases is the desired result. However, I would like the phone input columns to remain in the same order (unaltered).
Including the pull-left class to the first two columns fixes the problem but causes errors when resizing (specifically, shrinking) the screen.
I have tried using/learning the col--pull-/col--push- classes but I couldn't figure out how to make them work here.
Does anybody have any suggestions?
I am also open to changing the general layout if there are improvements on that as well.
Thank you.
I changed the html and used a small "hack" to solve this.
There is still probably a better solution out there. This is my html:
<div class="col-md-5">
<div class="col-sm-4 col-xs-12 pull-left">
<label for="phone_code" class="control-label">phone code</label>
<input type="text" class="form-control">
</div>
<div class="col-sm-8 col-xs-12">
<label for="phone_number" class="control-label">phone number</label>
<input type="tel" class="form-control">
</div>
</div>
http://www.bootply.com/tIW6xBHVGB
The "hack" is the "col-xs-12" class added to the <div> elements. If not added, the divs don't expand to take up the entire row as they should due to the "pull-left" class.
I'm open to hearing other suggestions.