I have my chart canvas in the following structure:
<div class="row">
<div class="col-md-4">
<div class="row">
<!-- something -->
</div>
<div class="row">
<!-- something -->
</div>
</div>
<div class="col-md-8">
<canvas class="chart chart-bubble" chart-data="c.data" chart-options="c.options" chart-series="c.series"></canvas>
</div>
</div>
Using this, I have my Chart on the right side, and next to it on the left side are two other rows. I want it to look like this:
But for some reason, the height is not fully used by the chart.
It looks like this:
I can't just set another height for the canvas, because then, the chart becomes distorted.
How can I make the y-axis longer, so the height of the chart becomes bigger and the full height of the layout is used?
The solution was to set this attribute of the options-object for the chart:
maintainAspectRatio: false
Then I could adjust the height like:
.chart-container {
position: relative;
height: 65vh;
}
Related
We have a requirement of creating a dashboard in angular where I am using a gauge chart code from here.
My HTML file looks something like this:
<div fxLayout="row" fxLayoutAlign="space-around center" >
<div fxFlex='33%'>
<div id="power-gauge"></div>
</div>
<div fxFlex='33%'>
<!-- Some other chart -->
</div>
<div fxFlex='33%'>
<!-- Some other chart -->
</div>
Now the issue is when the website is being accessed from different resolutions this gauge is not scaling properly as it has a static height and width.
Is there any way I can make it responsive.
Had to give height and width in %.Found the solution here.
I am currently working on a project where I need to display some values in a graph. I have been looking at Chart.js and created two simple charts displaying temperature and humidity. My problem is that I can not get the two charts next to each other. As now it only displays above one another.
I have tried using flexbox with flexGrow set to 1 and other values, but I would like them to scale up next to each other with the same size.
<div style={{display: "flex"}}>
<Temperature chartDataTemperature={this.state.chartDataTemperature} legendPosition="bottom" />
</div>
<div style={{display: "flex"}}>
<Humidity chartDataHumidity={this.state.chartDataHumidity} legendPosition="bottom"/>
</div>
With this code the charts are displayed on top of each other.
I have also tried putting both charts inside the same div but it does not look right.
I have added my project to GitHub if anyone would take a look.
https://github.com/henrik3/logg
You have an syntax error on
<div style={{display: "flex"}}>
This is the correct way:
<div style="display: flex;">
This is the correct way:
<div styles="{{display: flex;}}">
Take a look at this example:
<div style="display: flex;">
<div style="width: 100px; height: 100px; background-color:red;">
<p>
CHART
</p>
</div>
<div style="width: 100px; height: 100px; background-color:blue;">
<p>
CHART
</p>
</div>
</div>
https://www.w3schools.com/html/html_styles.asp
Take a look at this anwser.
Background/skill: I am starting to test out using bootstrap 4 (first time using bootstrap) for a custom Wordpress theme. I have the basic understanding of HTML and CSS, but with the newer CSS and with any jQuery or javascript, I am fairly clueless and usually just hacking code I find online to try and make it work for me, with little understanding of how/why it works if I succeed.
Missing out a bunch of page header info link links to scripts and stuff which I do understand may eventually affect any suggested method, and just to keep it simple. For now I have the following HTML so far:
<div id="page" class="site">
<div id="header" class="container-fluid">
<div id="masthead" class="site-header row row-eq-height">
<div id="logo" class="col-sm-4 col-md-6 col-lg-3"></div>
<!--logo-->
<div id="fruits" class="align-self-center d-none d-md-block col-md-3 col-lg-6"></div>
<!--fruits-->
<div id="social" class="d-none d-md-block col-md-3 col-lg-3"></div>
<!--social-->
</div>
<!-- #masthead -->
</div>
<!--header-->
<div id="jumbotron" class="row">
<div id="notice" class="align-self-center col-md-3"></div>
</div>
<!--jumbotron-->
<div id="content" class="site-content"></div>
<!-- #content -->
<div id="footer" class="container-fluid">
<footer id="colophon" class="row"></footer>
<!-- #colophon -->
</div>
<!--footer-->
</div>
<!-- #page -->
The jumbotron has a background image and a div (#notice) inside it which will float to the left with some text inside. I want the div to take up all remaining viewport space after the header. I have managed to get the jumbotron div be the height of the viewport minus the header using the following CSS:
height:calc(100vh - 155px);
But this only works if I know the height of the header is 155px. In reality, it changes at different screen widths and depending on content.
Is there a way to set the CSS to use a calculation for the dynamic header?
If not, do I need to use some kind of jquery or javascript? If so, I would be very grateful for some fairly detailed instructions.
Note: I do not want the #jumbotron to be the height of the page and sit behind the header div as a solution because the background image display is important.
Thank you in advance :)
Since you can't know easily the height of the header in every device because it is a percentage of the height... And because it depends on a big bunch of CSS rules form BootStrap and your Wordpress theme... You will just measure it to deduct the remaining space.
<script>
$(document).ready(function(){
function adjustJumbotronHeight(){
var headerHeight = $("#header").outerHeight();
var viewportHeight = $(window).innerHeight();
var remains = viewportHeight - headerHeight;
$("#jumbotron").css({"height":remains});
}
// On page load
adjustJumbotronHeight();
// On resize (or mobile orientation change)
$(window).on("resize",function(){
adjustJumbotronHeight();
});
});
</script>
I'm looking to a way to design my website a bit like this one that is inspirating to me : https://flink.to/
My research is more about the way the articles are showing up in a mosaic of squares of two different sizes.
I tried :
Masonry horizontal (http://isotope.metafizzy.co/layout-modes/masonryhorizontal.html) but it doesn't really work in responsive as we can't assign a width and a height in percentage... I'm looking for a solution to display squares in that way.
CSS with Flex direction, but It's not as powerful as it could be : if I have three rows of squares and a very-first-big square, more-little squares don't fill the empty space above the big one.
How could I replicate this in the best way ?
I have found Pure CSS and CSS Skeleton to be really simple and easy to use libraries for responsive grids in CSS.
Here is an example of a similar layout using pure.css
In Pure CSS grids are laid out like this:
<div class="pure-g">
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
</div>
And in CSS Skeleton like this:
<div class="container">
<div class="row">
<div class="one-third column">1/3</div>
<div class="two-thirds column">2/3</div>
</div>
<div class="row">
<div class="one-half column">1/2</div>
<div class="one-half column">1/2</div>
</div>
</div>
I am trying to accomplish exactly something like this:
http://www.freshbooks.com/
I have a container with a background and a form inside it. I want this container to resize exactly to the width and the height of the window it is opened in. Also, when resizing, it should resize along the window.
I drew it so I can be more clear. This is how I want it to look like:
Instead, at the moment it looks like:
I know how to do this with jQuery, it's pretty simple, but if I set a fixed height to the container, the "responsiveness" of bootstrap and of the page is completely lost when I shrink it to a smaller size.
I am pretty sure that bootstrap has some build in and ready to use functionality for doing this, but obviously I can't find it.
Also, I am having trouble to center the "Some text and form" components vertically in the gray area.
Your help is appreciated!
There should be no need for jQuery or JavaScript. This can be done using only CSS.
You can use .container-fluid instead of .container to have it span almost the entire width of the window. The columns inside it will have a small gutter of 15px to the left and right though. But as you'll likely add the background-color on the .container-fluid this shouldn't be a problem.
Put all content that should take up the entire height of the window inside the .container-fluid and add a height property to it. Either 100vh, 100% of the view height. If that doesn't work due to browser support (e.g. you need to support IE8) give it a height of 100% and make sure that all its parents (at least html and body) also get a height: 100%.
.height-full {
height: 100vh;
}
.bg-dark {
background-color: #333;
color: #fff;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid height-full bg-dark">
<div class="row">
<div class="col-xs-12">
<h1>Full width and height</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Regular content</h1>
</div>
</div>
</div>
If it's only about showing a small form horizontally and vertically centered in the entire width and height of the screen, I suggest not using the .container-fluid but the regular .container. From your screenshots it seems that you don't want the form to take up the entire width of the screen. Surround the .container with a div that has its background-color set.
Create a Bootstrap grid that contains the form (in my example I've used .col-xs-6.col-xs-offset-3 to have a half width column in the center of the screen. Give this column the height: 100vh to make it take up the entire height of the screen. The horizontal centering is now done.
Vertical centering is done by positioning the form absolutely, pushing it down top: 50% of the height of its container (the column has position: relative) and pulling it transform: translateY(-50%) of its own height up. See css-tricks.com/centering-css-complete-guide/ for more information
The 100vh might conflict with your navbar. Take it outside of the regular document flow by either make it fixed by adding .navbar-fixed-top or position it absolutely.
.height-full {
height: 100vh;
}
.bg-dark {
background-color: #333;
color: #fff;
}
.vertically-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="bg-dark">
<div class="container">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 height-full">
<form class="vertically-center">
<h1 class="text-center">Some text</h1>
<div class="row">
<div class="col-xs-4">
<input class="form-control" type="text" />
</div>
<div class="col-xs-4">
<input class="form-control" type="text" />
</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-block">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Regular content</h1>
</div>
</div>
</div>