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?
Related
I'm currently trying to make a responsive navbar (and it works, is responsive), but at some window size, it becomes too big. So I tried to use #media (max-width) to block its growth at some point. Unfortunately, when I use px to describe new fixed size, the navbar is now affected by scaling of the page (ctrl+mouse wheel), and I'm trying to avoid this behavior.
Is there a workaround to my problem?
Little hard to understand your question, but any good navbar should scale width wise for a page. I kinda sounds like you set the height style to a percentage rather than pixel amount.
<div style='height:80px;width:100%;'>Content</div>
This makes a horizontally scaling bar, with a constant heigjht
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
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.
So I have a design and it has multiple 100% browser width images down the page. I tried creating a few divs down the page and setting them to absolute position (even though the parent and following child were set to relative) but the text is floating behind the image.
I've tried a few other things and tried searching for an answer on here (without using jQuery) but I just wanted some more clear insight into how best to approach this. I have attached an image sample below:
The closest examples I can find usually only have 1 image at the very top of the page.
I am using the built in canvas widget (javadoc) and wondering how to make it take the full browser window.
I tried setting 100% width and height and removing all padding and margins, for body,html and canvas.
I have 3 problems:
1. I checked with chrome's dev tools and the clean.css seems to override myproject.css
2. Even after those css rules and removing the margin on the body in the dev tools, there is still a vertical scrollbar.
3. I struggle a bit with the fact that the canvas coordinate space is independent of actual pixel size. The mause events give me pixel location. Is there a way to get events in coordinate space "pixels"?
After another 4 hours of fiddling I found the answer, and decided to share:
1. I saw that the way i used to load css was deprecated so i used client bundle
2. This was my main problem, solved by explicitly disabling scrollbars
Window.enableScrolling(false);
3. setting just the coordinate space will automatically adjust pixel size to it.
So basically for a full window canvas: 100% width and height and 0px margin in css for html and body. Adjusting coordinate space to client size in the on resize event and explicitly disabling scorllbars.