I have tried setting the min-width to 0 on the wrapper div for chart.js, but the chart will grow and then not shrink back down if you drag the window around.
I can't figure it out! The only thing I can do is set width to 99% but then the chart is no longer aligned with my other divs. I've been working on this for days, please help!
Q: How can I get chart.js to be 100% width, and grow/shrink to it's bounding size.
to reproduce, go to the example and if you close the menu, the chart grows, and if you open it, the chart does not shrink back down. it maintains it's size and overflows to the right.
note: my actual project has two separate components for the chart and side bar. So a calc solution doesn't work in this case, I don't want to tightly couple any components to maintain good practice.
Here is my StackBlitz working example
here are pictures to show the reproduction:
chart is the right size, menu open
chart grows when you close the menu (the size is still correct)
open the menu, and the chart overflows right
(Copied from my comment.)
I can't get StackBlitz to run (JS errors due to tracking protection in Firefox) so I can't verify this, but I had that exact issue in my flex layout and solved it by ensuring overflow: hidden was set on the parent (and ancestor) flex elements. A cursory look at your CSS shows this is only done on .page-wrapper.
Update: This solution stopped working with chart.js 3
I had similar problems with a markup like this:
<div style="display: flex; flex-direction: column">
<h2>...</h2>
<div class="chart-container" style="position: relative; flex: 1">
<canvas></canvas>
</div>
<span>...</span>
<span>...</span>
</div>
My outermost div was in a css-grid, maybe that also played a role.
Anyhow, I diagnosed the problem to be this: Even though I applied { responsive: true, maintainAspectRatio: false } to the options of chart.js, the chart had a fixed size, which caused the chart-container not to shrink (even when overflow: hidden was applied, I don't fully understand why). This caused the div element chartjs inserts to detect size changes to never change its height.
So the solution was to simply override the height on the canvas to 100%: canvas {height: 100%!important}.
This allows the canvas container to shrink, causing the size-detection div to shrink, causing a re-render of the canvas, which prevents aspect-ratio issues.
Wrapping the canvas in a div with width 100% and and setting the canvas to max-width 100% works for me:
<div style="width: 100%; position: relative;">
<canvas id="chart" style="max-width: 100%;"></canvas>
</div>
Here your canvas is having width inside absolute parents so its recommended to change the values dynamically using JavaScript (angular in your case). But since you are looking for CSS based solution here is what you can add in your app.components.css file:
.sidebar-wrapper.shrink + div.main-wrapper canvas {
width: calc(100vw - 40px) !important;
}
.sidebar-wrapper:not(.shrink) + div.main-wrapper canvas {
width: calc(100vw - 230px) !important;
}
Here is the working example : https://chartjs-overflow-ex-vlsqmn.stackblitz.io/
Related
I have a div called calendar that is inside a div called cal-container. The calendar has width:100% so currently it takes up the whole cal-container.
I need to add a side-panel div. This div will have a fixed width of 150 pixels. Thus, #calendar width should be #cal-container width - 150px. Is this possible with CSS or am I forced to use a table?
If it is possible, is there an example? I googled it but nothing like what I want came up.
The side-panel can be hidden and shown by click a button so adding padding will not work.
Here is an idea of what I mean:
The days part is #calendar, and the Unscheduled part is the side panel of 150px.
I tried floating the calendar left, and cloating the side panel right and giving it a width of 150px. But the idea is if I hide that div, the calendar should then take 100%.
Thanks
Like this, the blue would be side and calendar be the left, but calendar needs to take up the room side does not when hidden.
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html
Result of float:
Got a working solution for you here.
The code to get this working basically hinges on the following structure:
<div class="sideBar">
...
</div>
<div class="tableWrapper">
<table>
...
</table>
</div>
Next, make sure the elements have these significant CSS properties:
.sideBar {
float: right;
}
.tableWrapper {
overflow: hidden;
}
table {
width: 100%;
}
What's happening here is that the .sideBar floats right, and takes up whatever space it needs to. Meanwhile, the .tableWrapper will take up whatever space is left by virtue of overflow: hidden. Finally, tell the table to take up 100% of its available width.
Click the button in the demo to see the table automatically resize.
All major browsers and IE10 support flexbox. Not supported < IE10.
I have 2 toolbars, 1 of each side of the screen, and a main content area. I dont want it to have to sidescroll cause that is pathetic, so i was trying to figure out if someone could help me set it up.
My current attemp was:
$("#main").css("width", window.outerWidth - $("#t1").width() - $("#t2").width());
The issue is that it is too big still because of margins. Instead of me doing width, should i do outerWidth, similar to how i did window, or is there a jquery command which will do just that?
Thanks
here is a basic fiddle: it is set up differently, but the idea is there. I just am unsure as to how to do it. http://jsfiddle.net/fallenreaper/DfZx7/
Upon tinkering deeper and deeper with my fiddle, i am fairly certain i figured it out in the example i had given. derp Standby while i look and see if i can apply the same thing to my code.
The sample did not work with my code, but border was set to 2px around, for both main and attributes. Deducting 8 pixels resolves.
You don't need JavaScript to avoid scrollbars. It's a layout width two fixed-width columns and a liquid one.
Here is the "skeleton" of your layout in a responsive way:
<div id="window">
<div id="column-sx"></div>
<div id="main"></div>
<div id="column-dx"></div>
</div>
CSS:
#window {
width:100%;
overflow:hidden;
}
#column-sx {
width:54px;
float:left;
}
#column-dx {
width: 140px;
float:right;
}
#main {
width:100%;
float:left;
margin-right:-194px; /* left + right col width */
}
#main > * {
margin-right:194px; /* left + right col width */
}
This way it will never "break" nor cause an horizontal scrollbar.
Anyway, probably you want to set a min-width for #main contents, and add another container for contents instead of targeting them with > *
Check this fiddle with your code revised
Off the top of my head, i would think outerWidth would work. If it doesnt, you can find the margin value via the .style attribute - but thats not ideal.
One thing you should be aware of is window resize if your setting your widths dynamically and you truely hate horizontal scrolling. You could put the above function also in the $().resize() function to ensure the widths are always within the window and complement this with css min-width so it doesnt go too small.
I'm using jquery mobile, and I have a image that I would like to fit the screen from right to left, with no gaps. However, if I just put the image without doing anything to it like <img src="image.png />", it turns out with a small black border around it. This stays despite me setting width=100% in the css. How can I remove this border?
Adding some code:
<div data-role="content" style="background-color: #000000">
<div id="slogandiv">
<img src="slogan.jpg" id="slogan" width="100%" height="45%"/>
</div>
I just did this. It is because that the data-role = "content" has a automated padding of 15px.
I went into the .css file and removed this. search for ui-content. remember in the ui-content, listview, that it has -15 so change this to 0 aswell.
A CSS directive of width: 100% for your image simply means that the browser should display the image at its actual size (if it can), it won't stretch it to some other size. This may explain why you have a slight border around it, as the image doesn't quite scale to the full width of the viewport. You could try tinkering with the img tag's margin and padding settings, but I suspect the approach that will work best for you is to display the image a different way.
Have you tried manipulating the CSS of the containing element? Say you have a paragraph class called .container. You could do something like this:
.container {
background: url('image.png') no-repeat;
background-size: contain;
width: 480px;
height: 240px
}
… this will use your image as before, but this time the background-size attribute of contain will force it to fill the dimensions of the parent element (the height and width of which we have defined above).
background-size is new in CSS3 and therefore not uniformly-supported, but it's in WebKit and several other browsers. Read more: A List Apart: Supersize that Background, Please!
Hey everyone, working on a site at the moment.
http://www.creativefireplaces.co.uk/fireplaces/marble-fire-surrounds/sheridan-marble-fire-surround.html
If you go to that page you will see that there is a horizontal scroll bar. I have tried to find the div responsible. (i'm aware the search bar pokes out) But looking in the code I cant work out what is making the pages so large.
<div class="product-custom-right-col" style="">
.product-custom-right-col {
float: right;
width: 420px;
}
The absolute width of 420 px and float right is causing the issue.
add overflow-x: hidden; to div class middle-container :)
Check your background image (the vertical stripes). It is too wide. Look at http://www.creativefireplaces.co.uk/skin/frontend/creative/default/images/main_bg.gif it overflows the browser horizontally.
I've seen this done in a few sites, an example is artofadambetts.com. The scroll bar on the page scrolls only an element of the page, not the entire page. I looked at the source and havent't been able to figure it out yet. How is this done?
That's pretty nifty. He uses "position:fixed" on most of the divs, and the one that scrolls is the one that doesn't have it.
In fact it is not the scrolling part that is "doing the job", it is the fixed part of the page.
In order to do this, you should use CSS and add position: fixed; property (use it with top, bottom, left and/or right properties) to the elements that you wish not to scroll.
And you should not forget to give them a greater z-index, if you don't there might be some of the scrolling element that can go over your fixed element as you scroll (and you certainly don't want that).
To find out how people do these kinds of things in CSS and/or Javascript the tool Firebug is just outstanding:
Firebug addon for Firefox
It should be noted that without further hacks position fixed does not work for IE6, which is still managing to hold on to 15-30% of the market, depending on your site.
You can use fixed positioning or absolute positioning to tie various elements to fixed positions on the page. Alternatively you can specify a fixed size element (such as a DIV) and use overflow: scroll to force the scrollbars on that.
As already mentioned, getting everything to work in Internet Explorer AND Firefox/Opera/Safari requires judicious use of hacks.
This can be done in CSS using the "position:absolute;" clause
Here is an example template:
http://www.demusdesign.com/bipolar/index.html
From http://www.demusdesign.com/
The browser is scrolling the page, its just that part of it is fixed in position.
This is done by using the "position: fixed" CSS property on the part that you wish not to scroll.
They've set the side and top elements to have fixed positions via CSS (see line 94 of their style.css file). This holds them in the viewport while the rest scrolls.
Try this for scrolling a particular part of web page......
<html>
<head>
<title>Separately Scrolled Area Demo</title>
</head>
<body>
<div style="width: 100px; border-style: solid">
<div style="overflow: auto; width: 100px; height: 100px">
sumit..................
amit...................
mrinal.................
nitesh................
maneesh................
raghav...................
hitesh...................
deshpande................
sidarth....................
mayank.....................
santanu....................
sahil......................
malhan.....................
rajib.....................
</div>
</div>
</body>
</html>
For a div, you can add in the cSS
overflow: auto
For example,
<div style="overflow:auto; height: 500px">Some really long text</div>
Edit: After looking at the site you posted, you probably don't want this. What he does in his website is make the layout as fixed (position: fixed) and assigns it a higher z-index than the text, which is lower z-index.
For example:
<div class="highz"> //Put random stuff here. it'll be fixed </div>
<div class="lowz"> Put stuff here you want to scroll and position it.</div>
with css file
div.highz {position: fixed; z-index: 2;}
div.lowz {position: fixed; z-index: 1;}
To put scroll bars on an element such as a div:
<div style="overflow-x: auto; overflow-y: auto;>the content</div>
If you only want a horizontal or vertical scroll bar, only use whichever of overflow-x and overflow-y you need.