We Keep Coding

Chart.js in flex element overflows instead of shrinking

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/

Fixed div as background on mobile devices

I want to use a div as a background for a website.
If I use position:fixed and set the width & size to the viewport size the design breaks on mobile devices/tablets as they do not support the fixed position.
What's the best way to set a div as a static background, so that it works on mobile devices too?

I'm not entirely sure how you intend to use the background, but I created a loose way to do this here. The tacky background is applied to a div the size of the screen, and it will not move (as long as you're careful with what you put inside it). However, the same effect could be done just by direct styles on the body - I'm not sure what exactly you need the div for, so I can't guarantee this technique will work for your use case.
How it Works
With disclaimers out of the way, here are a few details on how it works. All content will have to appear within two divs: one outer one that has the background, and an inner one to hold all of the content. The outer one is set to the size of the page and can have the background applied to it. The inner one then is set to the size of the parent, and all overflow is set to scroll. Since the outer one has no scrollbar, any interior content that exceeds the size of the background tag will cause a scrollbar to appear as though it were on the whole page, not just on a section of it. In effect, this then recreates what the body is on the average web page within the "content" div.
If you have any specific question on the styles, let me know and I'll flesh out the mechanics in more detail.
With jQuery
I suppose there's still one remaining option: use similar style rules, but absent the ability to nest everything within the background, instead prepend it, and change it's position whenever the user scrolls, like so.
Then, just inject this code:
<style>
#bg {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
background-image: url(http://cdn6.staztic.com/cdn/logos/comsanzenpattern-2.png:w48h48);
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>
<script>
$("body").prepend("<div id='bg'></div>");
$(document).on("scroll", function () {
$("#bg").css("top", $(document).scrollTop())
.css("left", $(document).scrollLeft());
});
</script>
modifying the style rules for the background div accordingly, and you should be good. It will not have a good framerate since this will always appear after the scroll paint, but you're running low on options if you have so little control over the rest of the document structure and style.

You don't have to use jquery. I was able to get this effect with just CSS.
You set the div just below the initial tag. Then apply the image to the html within the div. Give the div and id attribute as well (#background_wrap in this case).
...I tried this without applying the actual image link within the html and it never worked properly because you still have to use "background-image:" attribute when applying the image to the background within css. The trick to getting this to work on the mobile device is not using any background image settings. These values were specific for my project but it worked perfectly for my fixed background image to remain centered and responsive for mobile as well as larger computer viewports. Might have to tweak the values a bit for your specific project, but its worth a try! I hope this helps.
<body>
<div id="background_wrap"><img src="~/images/yourimage.png"/></div>
</body>
Then apply these settings in the CSS.
#background_wrap {
margin-left: auto;
margin-right: auto;
}
#background_wrap img {
z-index: -1;
position: fixed;
padding-top: 4.7em;
padding-left: 10%;
width: 90%;
}

JQuery image slider having issue with image width & height

I am using image slider specified at: here
My images are of different sizes and I want to set the width and height of the image using following code:
<img src='77.png' width="20px" height="20px" />
But this doesnt work.
I am preety new to javascript, any help will be greatly approciated!

I really don't think this code can handle it (perhaps with a very serious overhaul of the javascript). I set up a fiddle here: http://jsfiddle.net/JLjCP/9/ and in examining what it is doing, it simply does not care what size the image itself is nor does it care if you have resized the image explicitly through the width and height properties. It is only taking the referenced image file and using it as a repositioned background image for the split components which are purely sized by the width and height of the display and the number of sections you tell it to do it in.
So the short answer is this code will not do what you want it to do.

put this in your css :
.cs-coin-slider
{
/*i think the class name is depend on what you set*/
-o-background-size: 20px 20px;
-webkit-background-size: 20px 20px;
-khtml-background-size: 20px 20px;
-moz-background-size: 20px 20px;
background-size: 20px 20px;
}
if you insist to use this coin-slider, no matter you set the size in html or set the css width+height of the image, it wont resized because this plugin treats the image as background..and that css3 background resize that is the only way that save you :)

The documentation on that page says that you can pass size options to the constructor:
$('#coin-slider').coinslider({ width: 20, height: 20 });
If you have different sized images in the same slideshow and you want to change the slider's size dynamically, it might not be possible. Use same sized images or tweak the CSS so that you get black bars around smaller images or something to that effect.

Please post your complete HTML/JS source code, the image size shouldn't matter as long as they are the same height/width as the container of the slideshow. Chances are you are possibly calling the plugin in the wrong way in your JS.

jquery mobile, images have a small black border around them

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!

Fluid Elements and Overflow Question

So here's a stump I've hit.
I'm designing a... Thing. It sizes itself to the browser window, with some controls at the top and a rather large list near the bottom. Anyways, it's basically a table cell that sizes with the browser window, whos size is the document size - 130px in height, and document size - 50px in width. What I want it to do, is when the list of stuff inside that cell is bigger then the cell, it to become scrolly using css's overflow: auto.
The problem, is that I can't get it to do that, only make the entire document scrolly. Currently, the cell has no properties aside from valign:top, and it has a single div in it (to which the list elements are written), and it's set to overflow:auto. However, it's just scales up the entire document when the list becomes to long.
I don't want to give it a static size since it sizes with the page.
Any ideas?
Thanks!
-Dave

I'm not sure I understand correctly, but here's a try that may give you ideas.
<head>
<title>Test</title>
<style>
div.outer {
background-color: red;
position: absolute;
top: 40px;
bottom: 40px;
left: 40px;
right: 40px;
}
div.inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
background-color: aqua;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.
To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.
</div>
</div>
</body>

The solution of buti-oxa is very nice, but doesn't work in Internet Explorer.
For a cross-browser solution, you need to assign a fixed height to the div that contains the list. You can't do it using only css, because the height to assign depends from the height of the browser window.
But you can use a simple javascript function to dinamically assign the height to the div.
Here is an example, using jQuery:
function resizeDiv(){
var h = $(window).height(); //maybe the window height minus the header and footer height...
$("#yourDivId").css("height", h + "px");
}
You should call this function when the page is loaded and when the user resizes the window:
$(document).ready(function(){
resizeDiv();
$(window).resize(function(){
resizeDiv();
});
});
You can see this in action in this demo page I posted (resize window to test):
http://www.meiaweb.com/test/BMS_DM_NI/

if I m not wrong and your content is only text you can add wrap property although this dosen't work in firefox u can add wbr to your text

I think you should consider fluid layout design patterns.
Couple of tips:
MediaQueries
Use % instead of fixed values like px

I think an iFrame would help. Put your 'thing' into a base URL, and then use another page with an iFrame to load it. As the 'thing' goes crazy in size, the scroll bars appear, but your outer page is not effected.
An old fashion frame should work too, but iFrames are just more fun ....