I am using angularjs and bootstrap3. What is the proper procedure for centering widgets within a panel and obtaining responsive behavior? I am getting unique results in Firefox.
I have 4 column divs that are demarcated like this, each including a panel:
<div class="col-lg-3 col-md-6 col-xs-12">
<div class="panel panel-default">
I have created a css class for called "center-block" for div's that I want centered. The center-block class is below.
.center-block
{
display: table;
margin: 0 auto;
}
I am using the justgage widget (http://justgage.com/)and angular-justgage (https://github.com/mattlaver/angular-justgage). The versions are:
<script src="./lib/angular-thirdparty/justgage-1.2.2/raphael-2.1.4.min.js"></script>
<script src="./lib/angular-thirdparty/justgage-1.2.2/justgage.js"></script>
<script src="./lib/angular-thirdparty/angular-justgage-master/ng-justgage.js"></script>
These are being included in the panel in the following manner:
<div class="center-block">
<just-gage id="thing" title="THING" min="40" max="220"
label={{thingstring}} value={{thing}}>
</just-gage>
</div>
I am also using some input-groups, toggle-switches, etc. Each within its own div with the center-block tag. This is how I am stacking the widgets vertically, and centering them within the panel.
The whole system works well and is responsive to screen changes EXCEPT on Firefox. In Firefox38, the justgage widget doesn't render at all, and in Firefox 46.01, it renders, but it isn't perfectly responsive as it moves to one side of the column as the page is shrunk and the columns reduce from 4 to 2 to 1 and back.
I am an experienced programmer, but not an experience web developer, and I was wondering if this behavior is to be expected in the world of browsers, of if I am doing something fundamentally incorrect with bootstrap and the centering of widgets.
bootstrap has some offset classes for aligning the grid. may be this link will help you to solve the issue
http://getbootstrap.com/css/#grid-offsetting
To horizontally center an element using margins remember the following "rules":
Your element can not be a float. No float left, right or whichever float property in your class. Margins do not move floated elements.
Your element must have a fixed width. For example: width: 400 px.
You need to display the element at a block level, using the property display: block.
Last, but not least use your property margin: 0 auto;
Example:
.center-block {
width: 400px;
display: block;
margin: 0 auto;
}
Related
Is there a way to create a .col on a bootstrap page so that it goes all the way to the edge of it's container?
I would like the image in the example (which is in a .col-xs-12 inside a .row inside a .container) to use up all the space up until the edge of the container. I can solve this with pure JS resizing it as needed but I would prefer to solve this using pure CSS approach (if possible). As it is now I have tried several different variants of negative margins and relative positioning but all end up with it either not being perfectly aligned to the edge or messes something else up as well.
Here is a base example of how the page is coded: https://www.bootply.com/wVw5jnKa35
Here if you want to achieve your requirement than you can add custom class in your col-xs-12 class
Like this
HTML
<div class="col-xs-12 no-pad">
<img class="FullWidth" src="http://calendar.volego.ru/img/users/wallpapers/20160215081029217.jpg">
</div>
CSS
.no-pad {
padding: 0;
}
You don't need to define and use a custom class for this purpose.
simply, At line 8, change:
<div class="col-xs-12">
to
<div>
This issue has been fixed thanks to Manoj Kumar
I can't for the life of me fix the root cause of whitespace on the right side of a site I'm currently building, causing the dreaded 'accidental horizontal scrollbar.' It's especially noticeable on mobile.
http://bradfordkolumbic.com/ma/v2/
I've tried every trick I can think of. Using overflow-x: hidden on the body somewhat fixes the issue but I'm not at all about band-aid fixes - I'm attempting to find the full solution.
You have two problems, each with your markup and style sheet.
First you need to remove this:
.info-box {
padding: 20px 0 40px;
}
The above code is overriding the default padding of the col-* classes which was by default added to compensate for the negative margins provided by row classes.
and then in the below code:
<div class="row">
<div class="col-lg-12 text-center">
<div class="row">
<div class="container-fluid text-center partners"></div>
</div>
</div>
You have wrapped a container-fluid element within a row element, while you need to do the reverse.
Bootstrap grid documentation
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Output:
I have done some digging on SO and have found a a variety of resources regarding printing and bootstrap.css, but I have not seen a solution to this particular problem.
Lets say I have a setup like seen in this Plnkr: http://plnkr.co/edit/7ETXQyEvY7S16JTU9wYB?p=preview
and HTML like this:
<div class="col-xs-6 red">
testing
</div>
<div class="col-xs-6 blue hidden">
123
</div>
The CSS states that during printing the column will be hidden (on my real page the stle is not hidden but hidden-print), which is expected, but is there anyway to now have the col-xs-6 red now take up the empty space left by the hidden blue column.
I know you could override the style col-xs-6 to be width:100%, but that would affect other columns on the page that need to be left at width: 50%.
Has anyone had this problem before, if so how did you address it?
For Bootstrap 4 you need to do a modification from #Lance's answer.
#media print {
.col-print-12 {
max-width: 100%;
flex: 0 0 100%;
}
}
With the same HTML
<div class="col-xs-6 col-print-12 bg-danger">
Red Column is full width for print
</div>
<div class="col-xs-6 hidden-print bg-primary">
Blue Column is hidden for print
</div>
I suggest something like:
#media print {
.col-print-12{
width:100% !important;
}
}
Then your HTML can be:
<div class="col-xs-6 col-print-12 bg-danger">
Red Column is full width for print
</div>
<div class="col-xs-6 hidden-print bg-primary">
Blue Column is hidden for print
</div>
!important is needed to override the regular col widths since at least one set will also apply at print width.
I updated your plunk using xs as a proxy for the print view here to demonstrate the concept. One red column in mobile, Red and Blue columns in tablet or bigger.
Edit: if you want to do it with CSS only you would have to use the flex property. Take a look at this pen. Change display: flex to display: none on any column and see how they stretch to fit the available space (this renders bootstrap useless).
Create a div container inside the bootstrap column and apply visibility: hidden to it. You want to hide without removing it, meaning the browser will still show the space that the element occupies.
It's a good practice not to add your own classes to bootstrap columns but instead create a container inside it so you can apply your classes to.
display: none gets rid of the element entirely and affects the positioning of the other elements that were around it.
My buttons don't work when I put .pull-left. I tried using the W3C validator on the document, but no problem detected.
Here's the code.
Because you've made .secondline display as block and are positioning it, it's "covering up" the button.
You can keep it block level, but instead of positioning along an axis, try positioning with line-height.
.secondline {
width: 100%;
z-index: 1;
display: block;
line-height: 24px;
}
However, I think it's a better end result to use the grid system for this. Below is an example of what you could do using the content from your first result. (Of course, you would need to add your code and content)
<div class="row">
<div class="col-xs-12">
V ➜ GARE CORNAVIN (21:44)
</div>
</div>
<div class="row">
<div class="col-xs-6">
Button
</div>
<div class="col-xs-6 text-right">
19 minutes
</div>
</div>
You're dealing with HTML structure issue rather than a Bootstrap issue. One of your HTML elements appears to be covering the button. It appears as though it's your "time" span. I would recommend trying to restructure your HTML with your button in a div class and the minutes in another div class. You have a lot of span elements there that could probably be eliminated to simplify your markup.
Another solution is to increase the z-index of the covered element, your code is no longer linked but try adding style="z-index:2147483647" to the parent of the element with .pull-left
I'm writing a responsive design for a website and I have 4 separate divs, which should be arranged 2 TOP x 2 BOTTOM. At some resolutions it seems to work fine, but at others there is a hole between the upper left div and the bottom left one.
This is how it should look like:
http://postimg.org/image/76q5y5w5v/
This is how it looks when improperly rendered:
http://postimg.org/image/6a4f8x4j7/
If you want to see all of the CSS applied, just visit http://bbogdanov.us/ (bottom of the page) and try to play with the browser's size to monitor the behavior of the div's at the different sizes.
The reason this is happening is because the div elements are being floated. When you lower the screen size, the block is becoming longer (taller) and the float is breaking. You can clear every other line by adding this snippet:
.uslugihome2:nth-child(odd) {
clear: left;
}
Caution, though, you need to use a polyfill for this to work on older browsers because some pseudo-classes like nth-child are not supported. I recommend Selectivizr.
Currently you have the following markup for each box:
<div class="uslugihome2">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
With reason why you see the gap is due to the width and margin that are set on uslugihome2.
So what I would so is, create another div which wraps the child divs like so:
<div class="uslugihome2">
<div class="uslugi_wrapper">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
</div>
Then go to line 316 of style.css and remove margin: 2.5%;, then change the width to 50%.
Once done, add the following to your css file:
.uslugi_wrapper {
padding: 0 15px;
}
Not sure which browser you want to support but this will also ensure support for the likes of IE8
Hope this helps
That's because the height of those divs change as the width of the window changes. Try wrapping a div around every two separate divs. Let's call that a row.
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>