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.
Related
I'm trying to increase the width of the pane section of Sidebar-V2 on a leafletJS map, preferably by twice, or to half the map container's width.
At the moment the content doesn't fit and is constrained by the pane width, I'm unsure as to how to make it wider.
I've tried tweaking several values in the CSS file but to no avail. The CSS can be found here
There is a solution for version 1 which can be found here.
Has anyone tried this?
Using Clarity and Angular 6, I have a card in the main content area that I'd like to have fill the length of the current view (no more, no less). The only way I found that comes close is to set the height to "-webkit-fill-available" (only using Chrome right now).
The problem with this is that there seems to be a tiny bit of space at the bottom that's causing the content area to show a scroll bar.
Ideally I'd like to never see a scrollbar in the content area and make all the content fit within the current screen height.
Here is a stackblitz example that demonstrates the problem.
Your solution is not a standard and would not work on IE/Edge, and might not work well with Safari per https://caniuse.com/#search=fill-available.
You could try giving it a height: calc(100vh - 5.5rem);, which gives the card a height of the view port, but subtracts the heights of the header bar and margins of the card and content areas. Ultimately, to use CSS to calculate heights you need to know what other elements are on the page and calculate against those known heights, or else you'd have to do something with JavaScript to inspect the elements of the page to find the available space.
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
Since the default behavior of columns on extra small screens is as follows (quote from the Bootstrap site):
Horizontal at all times
I'm wondering what the point of col-xs-* is? On an xs device, the columns are gonna be stacked vertically anyway, so why bother using this kind of code?
Btw, I know that for instance col-md-6 scales upwards. But what about downscaling, so in that example, if there's nothing declared for a small screen? Is there a default as well?
It is so that you can stack items horizontally on screen sizes lower then 768px without them stacking vertically. The column's will re-size as the viewport gets smaller without breaking to the next line. If there is anything in your page that you do not want to break at a given width then it is a good time to use SX.
I’ve been working on this for over 10 hours, searching the web for a solution, to no avail.
Here is the screen capture of the sketch:
I need to produce a grid layout with the following requirements:
The whole thing is in a horizontal scrolling layout.
Responsive in height, relative to its container (which is already responsive relative to body, using the Stretch-to-margin technic).
3 lines of equal height (33.333%)
Composed of square images anchors
On mouse over: color overlay with white text
The square images need to keep their proportion (reduce the height of the window, image width must scale down.
The width of the whole layout must be dynamic, since the number of squares may vary.
I’ve seen tons of examples where the width is defined, and using the padding-top value to define the height. It would not work here since the Height is the defining value.
I will be posting again with updates tomorrow.
I’m kinda desperate. Thinking of taking up drinking (kidding).
The Question is Answered!
I finally used the "vh" unit, and applied it to HEIGHT and WIDTH of all the squares.
Goes something like this:
.c-squares{
width:30vh;
height:30vh;
display:inline;
}
So clean, can’t believe I’ve never knew about "vh" unit.