I've created a directive for Angular 1.x to use Highcharts following instructions from Highcharts website. The chart is drawn with no errors, however, I can't find a way to make it fit the parent container. Most solutions point to using #container width, but I don't have said #container since it's a directive. Charts are massively overflowing.
I've got three columns created with flex and want each chart to fill 100% width of each of these columns.
How do I do that in Highcharts?
ok, I found the solution and it's a prosaic one: I needed to set display property on my container
Related
Today I've realized something about flexbox that I didn't know before.
I'm writing this because i want to verify it.
so from what I knew, when we do display:flex now we created a flex container and its children will be the "flex items".
the flex container has a main axis and cross axis, and that's it.
now i see that the flex container has rows and that made me realized that the rows have their own main axis and cross axis
so when we do align-items we are aligning the flex items that are in the row
and when we do align-content we are aligning the rows !
here is a picture that demonstrate what I'm trying to say.
so if we had another row(only possible with flex-wrap:wrap) and we do align-content:space-between;
that will create a space between the rows
am I right ?
Yes, you are right. I would like to give you a tricky tip for making flexbox the easiest way you can ever use. Make a flexbox div as a parent and put inside it multiple items, and they will act as child divs(s).. and then, without giving the parent any alignment CSS codes, just run your code on your browser and use the DevTool and inspect your parent div and then you will see an icon next to the code display: flex; press on it and you will find all alignments options you can use for your flexbox. Feel free to try all options until you reach your final required result.
Also, I advise you to play the "Flexbox Froggy" game from this link. If you reach a high level of this game, that means that you understand the flexbox.
I'm trying to achieve a 50/50 panel layout using Bourbon Neat 2.x, where the left panel is going to have a background colour, but grid margins are causing me some issues.
I initially just had the standard grid-container as a parent, with two divs using the #include grid-column(6) mixin. Trouble is, that left a margin at the left and right of the grid so the 50% background colour panel didn't quite work.
I then tried adding the grid-collapse mixin to try and get rid of the margins (codepen example), but that seems to have the effect of making the page > 100% width, leading to a horizontal scroll for the user.
Is there a simple way to achieve this layout, or should I use a custom grid definition for the panels with no margins at all?
Neat can cover this use case but it requires slightly more html. the trick is that the object with the class grid-collapse (.container in your example) needs a wrapper around it with width: 100%; overflow: hidden;.
Here is a question that also answers this → Remove outside gutters in Neat 2
I understand that I can make a Bokeh plot responsive to the width of a div by setting responsive=True. However, I am interested in having the Bokeh plot only be responsive up to a point. Is there a method so that I can set the maximum width of the Bokeh plot so that the figure is not responsive up to a certain div width? I have looked in the documentation but to no avail.
As of Bokeh 0.13.0 there is no such explicit option. However, bokeh plots (and other layout items) now have a sizing_mode property with a wider range of options: "fixed", "stretch_both", "scale_width", "scale_height", and "scale_both". So if you can put a Bokeh plot with one of the non-fixed sizing modes in div that responds the way you describe (e.g. perhaps a Bootstrap container) then the plot will respond accordingly.
Two of the options to limit the maximum size a responsive bokeh plot can reach that worked for me are:
To have the bokeh layout stretch across the whole width of the div I used sizing_mode="scale_both" and then used max_width= to limit the maximum size the plot can reach within the layout. I also tried max_height= but that did not work.
Alternatively, limit the width of the div of the bokeh layout div with
<div style="max-width: ">. Here, again, <div style="max-height: "> did not work.
I want to create something like this in the Susy grid system:
The different color demonstrate different sections of the website and also their background colors. The vertical lines are the grid columns.
If I use a simple grid container I can set the background color only within the div which is inside the grid, but I would like to have the background color stretched to the left and right edge of the website. The content stays inside the grid.
I found a solution using multiple grid containers (one for each section), but I heard that this approach is not recommended.
And I also don't want to use a fluid grid container.
As Eric Meyer, a developer of Susy, pointed out in the comments, the Susy grid is just a concept and there is nothing wrong with having multiple grids on the website, one in each section.
I was dealing with a similar issue.
I had used the following approach: Have a div (let's call it 'content') inside each of your sections.
Apply the container class to the 'content' div. .content{#include container;}
This way, when you set the background color of a section, it spans the entire width of the page while the content in the sections adheres to the rules of the grid.
Hope it makes sense.
I'm trying to implement a design with a shrink-wrapped left bar and a fluid main panel, which will allow as many pictures to be shown as the window width will accommodate, without a horizontal scroll bar.
I'm having massive trouble doing this. When I float:left the control bar, the content of the main panel begins to flow around it. Floating the main panel as well solves this, but causes the content to be shrink-wrapped, meaning that the images tend to be lined up in a single column.
Is there any elegant solution to do this?
I've made a mockup of the problem here: http://jsfiddle.net/PYKwg/2/embedded/result/
Try this: http://jsfiddle.net/CXvRn/10/ It's all in the code:
I wrapped #main in #mainWrapper
I added padding-left 220px to #mainWrapper.
I added float:left to "#top .thing" and "#bottom .thing"
http://jsfiddle.net/CXvRn/29/
here is the most basic jquery version:
You have to set some constants such as the total horizontal padding and the horizontal margin for the #main. you could derive those using jQuery but if they are never going to change them you might as well set them your self and save some lines of code.
If you'd like to do it with jquery you can figure that out here: Padding or margin value in pixels as integer using jQuery
The solution is "overflow:auto" on the main-content section. This establishes a new frame of block flow, which content won't flow out of (under/behind the floated control section). Reference: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
See it in action here:
http://jsfiddle.net/PYKwg/3/embedded/result/
(Thanks Alex)