Bootstrap form comment section forcing rows to move - html

I have a basic horizontal form written in Angular that uses bootstrap components. My problem is that there is a "Comment field" that pushes down the fields the next column over. I thought my problem might be in nesting <div> tags but I cleaned it up and this is still happening.
I thought of splitting up the form into two sections, the first two columns and the last two, but then I'm worried about complicating it and also ruining the tabbing capabilities.
This is the code for the comment section.
<label for="comment" class="col-md-1 control-label">Tenth Comment:</label>
<div class="col-md-2">
<textarea class="form-control input-sm" rows="8" id="comment"></textarea>
</div>
Here is the Fiddle: http://jsfiddle.net/mkfwaagd/

You could put the IsMessedUp Date and Eleventh Thing within the same column that has it's own 2 rows
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...text area...</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<!--Eleventh-->
</div>
</div>
<div class="row">
<div class="cool-md-12">
<!--IsMessedUp Date-->
</div>
</div>
</div>
</div>

Related

How to place 2 cols' elements to the right and the 3rd to the left using Bootstrap 4?

I've tried so many, but my lack of HTML and Bootstrap didn't allow for success, so I have to come after you - the experts!
This is how this form looks VS the Expected:
<div id='form-horizontal'>
<div class="row justify-content-around space-evenly" id="selectFieldsDiv">
<div class="col-md-3 form-group">
<label for="agencySelect">Choose</label>
<select id="agencySelect" onchange="loadClientsFromSS(selectedAgency())">
</select>
</div>
<div class="col-md-3 form-group">
<label for="clientSelect">Choose</label>
<select id="clientSelect" onchange="loadClientTasks(selectedClient())">
</select>
</div>
<div class="row justify-content-end">
<div id="addTaskBtnSpot"></div>
<div id="cancelTaskBtnSpot"></div>
</div>
</div>
</div>
Appreciate your help - as usual!
you can add your columns on your own by dividing the div to 8 by 4.In 8 grid you can add your choose dropdowns by 4 by 4 division and in 4 grid you can add your 2 by 2 division
Let me know if it's work if not ping me up I'll provide you other solution as well

CSS adjustment for timepicker ui bootstrap angularjs

i was trying to adjust the CSS for this timepicker. whats happens is that the arrows don't come exactly on top of the text boxes of hours and minutes respectively.
what i want is to hold them together no matter if its for mobile screen or for medium screens or desktop screens (responsive).
here is my html code:
<div class="row" ng-show="timer" >
<div class="col-xs-12" class="timing">
<div class="col-xs-12">
<label class="col-xs-2"></label>
<label class="col-xs-2 visible-xs"></label>
<b>24 Hrs format<b>
</div>
<div class="col-xs-12">
<label class="col-xs-1"></label>
<label class="col-xs-2 visible-xs"></label>
<form class="col-xs-3" name="myTime" id="myTime">
<uib-timepicker name="mytimee" ng-model="mytime" show-meridian="ismeridian" required></uib-timepicker>
</form>
</div>
<div class="st-head-row tdcl col-xs-12 visible-xs"></div>
</div>
image:
here is the ui bootstrap page: https://angular-ui.github.io/bootstrap/
the timepicker is from there
so i tried a lot of css but i did not manage to solve the problem. can someone help out with the css to keep them together??

Bootstrap row alignment changing based on number of rows

I have been experiencing this subtle oddity in my handlebars template using bootstrap.
The issue is that the entire contents of the page shifts approx 10px to the left when three or more items are in the database (the code within {{#orglist}} occurs three or more times).
<div class="row" id="bodyDiv" data-controller="orglist">
<div class="col-md-12">...</div>
<div class="col-md-12">
{{#orglist}}
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
</div>
{{/orglist}}
</div>
</div>
The same issue occurs if I manually do the markup:
<div class="row" id="bodyDiv" data-controller="orglist">
<div class="col-md-12">...</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
</div>
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
</div>
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
</div>
</div>
</div>
Some notes
The issue is independent of custom css.
The reason this issue bothers me, and how I noticed it, is that
it's a multi-page site and it causes the alignments to differ.
This template does have an accompanying layout template, but the issue appears to be independent of that.
Any thoughts?
Solved: see approved answer below
Fix is Ruben's answer here: How to prevent scrollbar from repositioning web page?
Largest ratio of time searching for issue vs. solution ease I have ever had.
browser vertical scroll bar show-up when rows >= 3?
As per bootstrap standards, one 'row' should be placed within a .container or .container-fluid, also div can have 12 total grids. for ex
<div class="container">
<div class="row" id="bodyDiv" data-controller="orglist">
<div class="col-md-12">...</div>
</div>
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
</div>...
</div>
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. Please refer:- http://getbootstrap.com/css/

Twitter Bootstrap column padding?

Is it possible to pad Twitter Bootstrap columns without breaking the grid? I'm building a design that is centred around 'boxes'.
I have done a fiddle of 3 examples: http://jsfiddle.net/w7zS3/1/
<div class="row">
<div class="col-xs-4 box">content...</div>
<div class="col-xs-4 box">content...</div>
<div class="col-xs-4 box">content...</div>
</div>
<hr>
<div class="row">
<div class="col-xs-4">
<div class="box">content...</div>
</div>
<div class="col-xs-4">
<div class="box">content...</div>
</div>
<div class="col-xs-4">
<div class="box">content...</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-4">
<div class="box-padded">content...</div>
</div>
<div class="col-xs-4">
<div class="box-padded">content...</div>
</div>
<div class="col-xs-4">
<div class="box-padded">content...</div>
</div>
</div>
<hr>
<div class="row box">
<div class="col-xs-6">
header: logo
</div>
<div class="col-xs-6">
header: ad banner
</div>
</div>
</div>
The first is the most semantic but adding a background colour bleeds into the padding creating the illusion of one 'box'.
Throwing another div in there with a background works well, but the text touches the edge of the box which doesn't look very nice.
On the third example i've padded the div and whilst it works it technically breaks Twitter Bootstraps design pattern... if i was to say, nest a grid it wouldn't work due to the padding up taking up space.
This also causes problems on boxes where i don't need padding (4th example on the fiddle) for instance: i'm adding a header in the first 6 columns and a banner ad in the other 6 columns.. but i want the whole header section to be in the same background color (ie.. no space between grids)... I can't add padding as it will break the grid and adding a background colour bleeds into the padding and look wider than the rest of my padded grids. (hope this bit makes sense)
Is there a correct way to get around this?
I typically use columns within columns to provide an effect similar to padding.
Instead of
<div class="col-xs-4">
<div class="box">content...</div>
</div>
Try this:
<div class="col-xs-4">
<div class="box row">
<div class="col-xs-1"></div>
<div class="col-xs-10">content</div>
<div class="col-xs-1"></div>
</div>
</div>
See the change in your second row: http://jsfiddle.net/w7zS3/3/
(I modified the background color to red to make it easier to see the difference between the background and the boxes)

Bootstrap 3 - Display text and an image in the same row

I'm starting out a website using BootStrap 3 framework. Here's the section of the code that I have an issue with:
<div class="row">
<div class="col-md-8">
<div class="brand">
<h1>Test Text.</h1>
<div class="line-spacer"></div>
<p><span>Some more test Text</span></p>
</div>
</div>
<div class="col-md-12">
<img src="img/devices.png" />
</div>
</div>
</div>
Here's what the output looks like:
How do I get the image along the same row as the text? I tried placing the <img> within the col-md-8 div tag, tried without specifying any col div value, but none of that worked. Any help is appreciated. The CSS is the generic bootstrap min css.
You might want to split the area up in two parts, but always keep in mind that bootstrap standard uses 12 grid system.
So if you want the two next to each other u use...
<div class="row">
<div class="col-md-6">
Here your text
</div>
<div class="col-md-6">
<img />
</div>
</div>
That should fix your issue, remember up count goes over 12 it wraps.
Your columns have to always add up to a total of 12 and your code should be similar to the below:
<div class="container">
<div class="row">
<div class="col-md-4">
CONTENT
</div>
<div class="col-md-8">
CONTENT
</div>
</div>
</div>
Have a good read over the Bootstrap Docs on their Grid System:
http://getbootstrap.com/css/#grid