I am trying to get a Highcharts pie chart to display correctly.
<div id="chart">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div id="row-electric" class="row row-chart">
<div id="divPieSubst" class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
<div id="divPieFeedr" class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
</div>
<div class="row row-chart">
<div id="divPieCycle" class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
<div id="divPieRoute" class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div id="divBarDays"></div>
</div>
</div>
row-chart is something I tried to do with some CSS I found:
<style>
div.row-chart {
height: auto;
}
</style>
Currently, I am struggling with the CCS, which I think is caused by bootstrap v3.3.7.
Why is it always coming back as a tall rectangle?
I included the Highcharts tag, because this could be something that Highcharts is doing.
In Highcharts API we can read:
height: null, number, string
...
By default (when null) the height is calculated from the offset height
of the containing element, or 400 pixels if the containing element's
height is 0. Defaults to null.
So yes - the height is set by the chart.
API Reference: https://api.highcharts.com/highcharts/chart.height
What I understand that you want to resize the rectangles height?
have you took a look at this page ?
https://getbootstrap.com/docs/4.0/utilities/sizing/
The full snippet is needed I think what you posted is only a small part of it . I don't see any link to an external or internal bootstrap stylesheet .
another option is to resize the div tags with the css height property
so take a look at this link too
https://www.w3schools.com/cssref/pr_dim_height.asp
peace!
Related
I'm having issue with my labels overlapping within my div row
My bootstrap looks as follows
<div class="col-xs-12 col-md-12 col-lg-12">
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-2 ">
<div class='card'>
<div class='card-block'
<div class="row text-nowrap">
<label class="control-label col-xs-12 col-md-12 col-lg-6" for="FinalMonthEnd">Final Month End:</label>
<kendo-dropdownlist class="col-xs-11 col-md-11 col-lg-5" id="FinalMonthEnd">
</kendo-dropdownlist>
</div>
</div>
</div>
<div class="col-xs-12 col-md-12 col-lg-10 ">
<kendo-grid [kendoGridBinding]='grid' >
</kendo-grid>
</div>
</div>
</div>
I had to add this to my css as the label text is large so when it gets resized the text will go to the next line one letter at a time.
.text-nowrap {
white-space: nowrap;
}
When the page is resized down before it gets to the col-md threshold the two start merging together and overlapping each other and looks terrible. How can I prevent this so that each stay separate?
(1) <div class='card-block' is missing a >.
(2) Try applying form-group class instead of row to parent div of label and kendo-dropdownlist.
(3) Try adding form-control class to kendo-dropdownlist.
(4) Class prefix col-xs is dropped in Bootstrap v4.0 and is no more recognizable. You should use col- instead (although it will not make difference to your code, just mentioned it for info).
Hope this can help with some direction.
I have some html content that I want to align and distribute as two columns beneath each other, of equal content.
But on mobile divices, I'd like the content to be stacked as one column.
How could I achieve this using bootstrap css?
I tried as follows, which did not work:
<div class="row">
<div class="col-lg-2">
//the content to distribute
</div>
</div>
Additionally, I cannot use css columns as I have to support IE8+9.
<div class="row">
<div class="col-xs-12 col-sm-6">
//first half
</div>
<div class="col-xs-12 col-sm-6">
//second half
</div>
</div>
The col-xs-12 tell the column to be at full screen when using mobile phones (or small screens).
The col-sm-6 tell the column to be at half size of the row when using any higher size devices.
I suggest reading bootstrap docs
----Edit----
If you want to use columns css- also for ie8,9 you can check this js plug in:
http://welcome.totheinter.net/columnizer-jquery-plugin/
hi you can use this i think please take a look
.tt{
border : 2px solid grey;
}
<div class="container">
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 tt">
first half
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 tt">
second half
</div>
</div>
</div>
and here is the working demo code..
Demo code
I have 3 column in a wrapper div and each div has two div's one with image and one with text.
I want to make it responsive so that image % text share 50% of area and at certain point text is visible & image is hidden or vice versa.
http://codepen.io/anon/pen/meWYeQ?editors=110
<div class="container">
<div class="row inner-wrapper">
<div class="row footer-quick-links">
<!--
<div class="col-xs-12 col-sm-6 col-md-4 bk-blue no-padding">
One
</div>
<div class="col-xs-12 col-sm-6 col-md-4 bk-dark-blue no-padding">
Two
</div>
<div class="col-xs-12 col-sm-6 col-md-4 bk-magenta no-padding">
Three
</div>
-->
<div class="footer-ql-box bk-dark-blue"><div class="f-img-box"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=163&h=100"></div><div class="f-label-box"><span>OUR MISSION</span></div></div>
<div class="footer-ql-box bk-blue"><div class="f-img-box"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=163&h=100"></div><div class="f-label-box"><span>VISION</span></div></div>
<div class="footer-ql-box bk-magenta"><div class="f-img-box"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=163&h=100"></div><div class="f-label-box"><span>CONTACT</span></div></div>
</div>
</div>
</div>
Add a 100% to the width to the image inside image box and drop the absolute positioning of the image box itself (so the image properly scales it's half).
.footer-ql-box img{width:100%; height: 100px;}
.f-img-box{float:left;width:49%;}
Note forcing the height to 100px allows it so the height of the image does not scale down when the window shrinks.
Example
building a webpage, and i ran in to some trouble, so here´s whats going on,
Im building the page using the bootstrap´s grid, but only the grid.
ive made a staff page where i want 4 pictures side by side, with a small margin between each image, the pictures should squares with an aspect of 1:1
Heres my: html;
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 ">
<img src="img/product.jpg">
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 ">
<img src="img/product.jpg">
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 ">
<img src="img/product.jpg">
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 ">
<img src="img/product.jpg">
The image inside the div is cropped in 1:1
and has the following css:
max-width: 100%; max-height: 100%;
position:relative;
display:block;
Heres the problem, for some reason the image dosn't fill out the div, the image is centered with about one em space on each side which result in an unwanted margin between the images.
Also how do i place magin between the divs, without one of the divs jumps down, when each div is 20% of the width.
I dont have enough reputation to post images yet :/
Try the following: In your css create a class called .nopadding (or anything you want) assign the following values to it padding-left:0; padding-right:0; then add it to <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 nopadding">
play around with it til you get the desired result.
I am using bootstrap 3 and I would like to create three divs that change their position depending on the current viewport. I think this should be possible, but somehow i cannot conclude how this can be established using bootstrap. So I have 3 divs, lets call them img text and ex.
I would like them to work for the different viewports as the following image suggests.
I have played around with pull and push, but that does not seems to solve my problem. I am looking for a “pull-up class” so that i can move for example a div to the right (using push) and then be able to move it up.
This is an example that still does not work..
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-6 col-md-push-6">
img
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-6 col-md-pull-6">
text
</div>
<div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-6 col-md-push-0">
exp
</div>
</div>
EDIT 1: This code is one of the answers to this question that exactly targets the core of the problem. I updated the example image and added another one to illustrate the problem.
This code produces this behaviour (Notice the empty space on the right side of the sm view)
EDIT 2: The accepted answer provides a solution for a fixed size text, img, exp.
For the behavior you want, you need to use the bootstrap push and pull classes.
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-6 col-md-push-6">
img
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-6 col-md-pull-6">
text
</div>
<div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-6 col-md-push-0">
exp
</div>
</div>
You can see it in action here: http://www.bootply.com/CNGe5KxWxK
More info about pushing and pulling can be found here: http://getbootstrap.com/css/#grid-column-ordering