I want both the map and pie chart in a row, but it is coming in 2 different row. Any Help would be appreciated.
Here is link:
http://jsfiddle.net/2emnt8m3/14/
Image for the design:
<div class="container">
Bootsrap grid system scales up to 12 columns. The number after the class prefix represents the width in columns. Each column type works differently on multiple devices (.col-xs-* remains horizontal at all times, while the others are collapsed to start and horizontal above breakpoints).
<div class="container">
<div class="row">
<div class="col-xs-6">
<!-- map -->
</div>
<div class="col-xs-6">
<!-- chart -->
</div>
</div>
</div>
For details, see the Bootrap docs: http://getbootstrap.com/css/#grid.
You need to change line 7067 from
var vis = d3.select('body')
to
var vis = d3.select('#piechart')
See live example here: http://jsfiddle.net/cdog/h0rnzk4s/.
Related
I need to eliminate the large gaps between the boxes in the left column, but I can't figure out how to do it. (see image)
I have an html template that is generating the div contents with a for-loop (row of 2 col-xs-6 columns), so I can't set static height values and float things (because the number of lines is always changing).
The code looks similar to this:
<div class="row">
<div class="col-xs-6" py:for="title, content in data">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
{ title }
</div>
</div>
<div class="col-xs-12" py:for="line in content">
{ line }
</div>
</div>
</div>
Does anyone know some css wizardry to help me out?
At this point in time bootstrap doesn't support offset grids in a pinterest-like style.
Although, you can use bootstrap in combination with something like Masonry Grid to get the effect you are looking for:
http://masonry.desandro.com/
Id use match height as it suits your question more. Here is what you do.
Download this and add to your scripts. Then add a class calldd match-height to your div columns which you want to be the same height.
https://github.com/liabru/jquery-match-height/blob/master/dist/jquery.matchHeight-min.js
$(function() {
$('.match-height').matchHeight();
});
If any issues replace $ with jQuery
I'm trying to make my content page that normally is split into two col-xs-6 columns to vertically stack on top of each other for smaller screens/mobile. When I try minimize the screen, the columns just mash together instead of stacking. I feel like I'm missing something important because I thought bootstrap columns were automatically responsive like the ones on this site:
https://getbootstrap.com/examples/grid/
my html code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 aboutbg">About Us
</div>
</div>
<div class="row">
<div class="col-xs-6 aboutrow text">
<h2>Home Roots</h2>
<p> Founded right here in Ontario</p>
</div>
<div class="col-xs-6 aboutrow pic">
<h3>insert pic</h3>
</div>
<div class="col-xs-6 aboutrow pic">
<h2>insert pic</h2>
</div>
<div class="col-xs-6 aboutrow text">
<h2>Our Values</h2>
<p>Good food makes good people</p>
</div>
<div class="col-xs-6 aboutrow text">
<h2>Our Promise to You</h2>
<p>The freshest and the bestest of foods</p>
</div>
<div class="col-xs-6 aboutrow pic">
<h3> Insert pic</h3>
</div>
</div>
I've tried littering the page with div rows, but that doesn't change the layout too. I've got the standard bootstrap cdn and jquery in the base template too. What is it I'm missing to make the columns stack vertically?
make Separate columns stack nicely
I have used javascript libraries like : https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows, to make all columns (on the same row) have equal height. This way bootstrap can handle it nicely and stack them nicely.
make columns stack only on mobile or small
Or what you mean is: you want them to stack in mobile, but in desktop to be two separate columns?
what xs-col-6 means is: for xs devices (or bigger) split up in 2 columns (12 /6 = 2)
use: xs-col-12 sm-col-6
explanation
this means for xs or bigger devices use 1 column, for sm devices or bigger use 2 columns.
remember bootstrap defined these steps (xs, sm, md, lg). they are bound too a certain pixel width. so, no guaranty it will actually show mobile layout when you use mobile phone (phones are mostly xs, sm).
alternatives
you can hide blocks all together for certain screen-widths by using classes like .hidden-lg
reference: http://getbootstrap.com/css/#responsive-utilities
easy tooling
here use: http://shoelace.io/ to make your grid respond the way you want. It generates html code for you. simply copy paste the classes in your divs and you have the responsiveness you want.
I am new at foundation zurb. So, I have a rails app with foundation-rails gem installed. And I am testing out some sample codes from the foundation doc.
Here's what I got:
<div class="row">
<div class="small-2 large-4 columns test1">small2 large4</div>
<div class="small-4 large-4 columns test1">small4 large4</div>
<div class="small-6 large-4 columns test1">small6 large4</div>
</div>
<div class="row">
<div class="large-3 columns test1">large-3 columns</div>
<div class="large-6 columns test1">large-6 columns</div>
<div class="large-3 columns test1">large-3 columns</div>
</div>
Like in the documentation, I would expect the inner divs line up in a row (12 columns in total), but for some reason I am getting something like this, the inner divs are stacked up on top of each other. I added custom css .test1 to give it an outline so that it's easier to see where the borders are. I have tried tweaking classes around, resizing browser and all, but the columns always stack up as 3 rows instead of one row. This screenshot is taken with browser view maximized.
Any insight?
UPDATE (SOLVED):
So, it was indeed my ActieAdmin that's conflicting with Foundation. After looking around, this other thread on stackoverflow gave me the solution.
Rails Active Admin css conflicting with Twitter Bootstrap css
Essentially just move ActiveAdmin css file (app/assets/stylesheets/active_admin.css.scss) to (vendor/assets/stylesheets/active_admin.css.scss)
That fixed it!
Is it possible to prevent certain data from appearing depending on the size of the device?
For example, I'm in the process of removing a table - I'm changing it to a grid made up of <div> tags.
If the user is on a desktop, I'd like to be able to show something like this:
<div class="row show-grid" id="tblheading" naming="tblheading">
<div class="span1">Branch</div>
<div class="span1">Branch Name</div>
<div class="span1">Building</div>
<div class="span1">Building Name</div>
<div class="span1">Room</div>
<div class="span1">Asset Name</div>
</div>
<div class="row show-grid">
<div class="span1">CAN</div>
<div class="span1"></div>
<div class="span1">CAN-Building1</div>
<div class="span1"></div>
<div class="span1">CAN-Building1-Room1</div>
<div class="span1">Value 123</div>
</div>
<div class="row show-grid">
<div class="span1">CAN</div>
<div class="span1"></div>
<div class="span1">CAN-Building2</div>
<div class="span1"></div>
<div class="span1">CAN-Building2-Room1</div>
<div class="span1">Value xyz</div>
</div>
But if they're on a mobile device, I don't want to display the first "row" with the headers. If possible, I'd also like to remove some of the other fields and only show the asset name for mobile devices.
I'm just new to responsive design so I apologize for any remedial questions. If you can point me in the right direction, I'd appreciate it.
Thanks.
If you look here in the Bootstrap docs, it talks about the built-in classes for this.
You could use these classes to show and hide columns or rows based on screen size. If the differences are significant enough, you could create multiple tables and show the appropriate one for each size.
It's just a case of adding a class to the rows/ cells you'd want to hide and then having that class set to display: none in the media queries targeting mobile devices.
I think the twitter bootstrap even has such classes already built in, but can't remember the exact names.
I have a demo site which is located here to give you an idea of what's going on. If you scroll to the bottom where you see the 9 individual posts they are all laid out properly. How ever if you shrink the screen to anything less then 1232px's youll see that the 7th post breaks away from the others and shifts down.
Now I am using default styles to align them as such, using row and then span4. Can any one explain why this happens? And any way to fix it?
Your span totals should add up to 12. Your example site however adds up to more than 40! I don't think there is any defined behaviour for what should happen if you don't use it as intended.
From Bootstrap homepage
"The default Bootstrap grid system utilizes 12 columns"
So the total of your spans must add to 12 per row. ie.
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
<div class="row">
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
</div>
<div class="row">
<div class="span7">...</div>
<div class="span3 offset2">...</div>
</div>