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??
Related
I am trying to position an image of arrow pointing downwards next to a dropdown select box. I am using Bootstrap 3.0 css.
With the following markup I am able to achieve what I am after but is not responsive (i.e. when I see it on chrome with mobile mode) the image is shoved below the dropdown.
My markup is below:
<div class="form-group">
<label class="col-md-4 control-label">Package</label>
<div class="col-md-3">
<select class="form-control" id="selPackage" ng-model="package"
ng-options="package.Name for package in packages"
>
<option value=""></option>
</select>
{{package.Description}}
</div>
<div class="col-md-1 pull-left" style="margin-left:-20px;">
<img src="./assets/bottom-arrow.png" class="img-responsive" style="width:40px;height: 40px;">
</div>
</div>
But in Mobile mode it looks like this:
Could you please highlight the issue here?
Not sure of the arrow - but the issue you are describing is simply that you have not set any xs or sm classes on the markup and so the bootstrap default is to display the columns as full rows at the smaller viewports (because you have not specified what to display them at).
You will need to experiment to get the right layout for your needs - but it will have to include col-xs-X and col-sm-X classes in there. Also note that you have nested divs in there - so that the inner col-md-3 is actually 3 columns of the parent column.
<div class="form-group">
<label class="col-xs-8 col-sm-10 col-md-4 control-label">Package</label>
<div class="col-xs-8 col-sm-10 col-md-3">
<select class="form-control" id="selPackage" ng-model="package" ng-options="package.Name for package in packages">
<option value=""></option>
</select>
{{package.Description}}
</div>
<div class="col-xs-4 col-sm-2 col-md-1 pull-left" style="margin-left:-20px;">
<img src="./assets/bottom-arrow.png" class="img-responsive" style="width:40px;height: 40px;">
</div>
Don't use inline styling, put your CSS into a separate file and then include media queries to change the position at different viewports. That way you can control what different screen sizes will see depending on the size of the page. Bootstrap has a lot of responsive elements built-in too like the grid system.
So in this instance, add a class onto your div around the arrow to target that and the image within it like this to move it around where you like, however you can also make use of the grid system to change the width of the select box and the arrow as well.
<div class="form-group">
<label class="col-md-4 control-label">Package</label>
<div class="col-sm-3 col-md-3">
<select class="form-control" id="selPackage" ng-model="package" ng-options="package.Name for package in packages">
<option value=""></option>
</select>
{{package.Description}}
</div>
<div class="col-sm-1 col-md-1 pull-left select-arrow" style="margin-left:-20px;">
<img src="./assets/bottom-arrow.png" class="img-responsive" style="width:40px;height: 40px;">
</div>
</div>
I've added a class of select-arrow to the div around the arrow image and also add the col-sm class to both divs which will alter the width on small devices like mobiles. Take a look at the grid options which explains what class you can use and when.
Image of the Grid Options from the Bootstrap docs.
Basically I have a bunch of rows with a check box and a label taking up 2 column spaces. Some of the labels are longer then others so when you resize the browser or are viewing on a mobile device the columns with longer labels will collapse to a second row and the shorter ones stay beside their check box. It looks like crap.
HTML:
<div class = "row">
<div class="col-lg-2">
<div class="input-group">
<input type="checkbox">
Small Label
</div>
</div>
<div class="col-lg-2">
<div class="input-group">
<input type="checkbox">
Big Label that collapses first
</div>
</div>
</div>
Is there a way to make it so that if one of them collapses then the whole row does?
Even better would be to have a dynamic font that worked like an image and just grew and shrank taking up a maximum of 100% as necessary to not cause a collapse at all. I could just use images but I have a lot of these these labels and it will take forever to make an image for each.
Bootstrap provides four classes for different screen :
xs for extra small
sm for small
md for medium
lg for large screen
In your following code should work, you can customize as per your screen needs :
<div class = "row">
<div class="col-xs-12 col-sm-12 col-lg-2">
<div class="input-group">
<input type="checkbox">
Small Label
</div>
</div>
<div class="col-xs-12 col-sm-12 col-lg-2">
<div class="input-group">
<input type="checkbox">
Big Label that collapses first
</div>
</div>
</div>
You can add a custom CSS to your bootstrap style and define some simple CSS rules as you would like to force the style to behave...
CSS Example:
.input-group {
display: inline;
}
I think the right HTML element for this is a list..
although, If you are going to edit the CSS... It's good to know that you can add a custom css file to your project and use a CSS class with your bootstrap style like this:
CSS:
.checkbox-inline {
display: inline;
}
HTML:
<div class="input-group checkbox-inline">
<input type="checkbox">
Small Label
</div>
There are many possible answers...
maybe, you will also find this question useful.
I have the following code in my HTML page. The links work fine when the browser window is maximized however, when I test the same on a mobile browser, the links become unclickable.
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-5">
<label>Legal</label><br>
Terms of Use<br>
Privacy Policy<br>
FAQs<br>
</div>
If I remove the bootstrap column classes from the DIV, the links again become clickable even on xs-screen. So I am sure that this is some issue with BS. Are there any workarounds for this?
Your disclaimer CSS is mixed in with the other two columns in the same row and overlapping the links.
(see how much room your disclaimer takes here: http://jsfiddle.net/93b1x26a/2/)
You need to add your disclaimer into a separate row. Something along the lines of: (now, I do not know how you want the disclaimer bit to behave, so I just gave you this code as a sample working alternative) -
See updated fiddle:
<div class="myfooter" id="footer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-5">
<label>Legal</label>
<!-- contents of first col -->
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-7">
<label>More</label>
<!-- contents of second col -->
</div>
</div>
<!-- separate row for disclaimer -->
<div class="row">
<div class="col-md-8" id="disclaimer">
<label>Disclaimer</label>
<br>
<p>Placeholder text</br>
<p>
</div>
</div>
</div>
</div>
#ochi pointed out the issue . the #disclaimer div is overlapping on others because you gave col-xs=*,col-sm-*,col-md-* to other divs but forgot to give the same to this disclaimer div. so it is over lapping anchor tags.
part of code <div class="col-lg-12 col-md-8 col-sm-6 col-xs-4" id="disclaimer">
Working example
And your HTML is not in good format. syntax for break is <br /> and you didn't close p tag in disclaimer properly.
I'm editing a bootstrap countdown page, and currently I'm stuck with this form.
While on big screens it is look good, once I get it smaller than 800 px it started to see more like that...
Any suggestions on fixing it?
Here is the code:
<div id="wrapper">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<h1>WeBuild</h1>
<h2 class="subtitle">We're working hard to improve our website and we'll ready to launch after</h2>
<div id="countdown"></div>
<form class="form-inline signup" role="form">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter your email address">
</div>
<button type="submit" class="btn btn-theme">Get notified!</button>
</form>
</div>
Per the Bootstrap docs, col-xs-* is what handles "extra small" devices (less than 768px). Also,
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.
In other words, you don't need all three grid classes on your div. If you want it to be a -col-12 across all devices, try:
<div class="col-xs-12">
Edit - Fixed the fiddle posted by Preben: http://jsfiddle.net/jxmoe88g/1/
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)