I am attempting to utilize the IBM Gantt Chart Component in a React application.
The goal is to get the gantt chart component to span the entire page as seen below:
In my JS source code, I have the following line:
return(
<div id="ganttDiv">
<GanttChart config={config} />
</div>
);
In my CSS, I set the width to 100% and the height to 100vh. I also put thick borders to determine the extents of the div.
#ganttDiv{
width: 100%;
height: 100vh;
border-color: rgb(102, 255, 0);
border-style: dashed;
border-width: 15px;
background-color: rgb(255, 255, 255);
}
Instead of the React element spanning the entire page, I get:
As you can see, the div correctly fills the entire page as shown with the green borders, but the contents of the div don't expand to fill the space.
After researching and looking around for several hours, I learned that I could use flex boxes.
Therefore, I added display: flex; to my CSS, and now the height looks correct:
Unfortunately, the width now shrinks to less than half of the page instead of being 100% width from before.
I tried following the examples provided by MDN Web Docs and tried setting the CSS to row, row-reverse, column, and column-reverse which does not work.
It seems like I can only get it to span the entire width or span the entire height, but not both.
I hope that someone can help. Have a nice day. :-)
Edit:
When I compile it with using 100vw as the others suggested, it doesn't do anything. However, if I edit with F12 developer tools the imported component itself (not the div), it works. On the sidebar, it says that the component is only inheriting color from the div, nothing else. So what should I do?
To fix the problem, it was necessary to apply the width to the component itself, not the div. Unfortunately, the syntax for doing this with React is different since we use JSX instead of HTML.
Therefore, to the fix the problem I had to do:
return(
<div id="ganttDiv" >
<GanttChart config={config} style={{width: '100vw'}} />
</div>
);
Related
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/
Here's the look:
[]
I did the page in ReactJS, but I've made a copy of the page here.
To better show the white space, here's the screenshot:
several interesting observations:
when the page is first loaded, there's no such issue.
the issue only appear, when the second image box (the one with 100% bar there) added into DOM
screen.width = 375
$('html').width() = 375, also
I don't know how and why the white space appeared, nor can I find any element having width > 375. (I didn't check through all element though)
$('body').find('div').each(function(idx,e){if($(e).width() > 375) console.log($(e).width())}) would give me no output
I try to do inspect on that white area, cannot. It would imply show me the body
this issue appear both on web and on mobile
this issue doesn't appear for the code in codepen I've shown above, although that code is an exact copy of the HTML generated (I copied directly from Chrome Inspector), with all the javascript removed
Any idea on: 1) why the white space appeared? 2) how could I solve the issue?
PS: just in case if you missed the part I put link to CodePen, Here it is again.
Update 2: I have this input box which I'm placing outside the page:
<input type="file" class="attache-upload-button" data-reactid=".0.0.1.3.1.1.0.0.1">
Corresponding style:
.review-add-form form .uploader .attache-upload-area .attache-upload-button {
position: fixed;
top: -1000px;
}
I inspected the DOM with chrome inspector, and i saw that the <svg class="bar"> is exceeding in width. I tried to set a overflow: hidden to the containing element, .progress-bar-circle and the whitespace disappeared
Add this to the CSS:
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
Faced this issue multiple times and in my case, it's generally a div or an element that is crossing the width of the screen thus stretching out, maybe try and analyze with chrome dev tools and inspect the layout, try and get rid of few divs and see if it changes anything, or maybe reduce the width of absolutely sized elements, etc.
So I'm fairly new as far as coding goes, just so everyone knows.
I'm trying to accomplish two simultaneous things
1. The first is, I would like be able to hover over an image in one container and have another image in a different container appear. Even if that means having an image that technically overlaps the container and just happens to have the same dimensions (which are width: 350px and height: 205px, by the way). If another solution is to have the initial image be a clickable link to open the second image, that would be fine too. In fact, that'd be preferable.
2. I need to do this multiple times, each with different initial and secondary images, with float:right or a similar css function involving setting the sets of initial images being wrapped to the right of my first div container.
3. I need to maintain the set of initial images (buttons), in two rows, with overlap-y: hidden and overlap-x: scroll.
My css for the button images is this, and must either stay this way or have a similar effect:
div.img {
margin: 10px;
**padding: 5px;**
**height: 38px;**
**width: 38px;**
float: right;
display:inline;}
div.img img {
**height: 38px**
**width: 38px**
display: inline;
float:right;
margin: 10px;
**border: 12px solid #ffffff;**
**border-radius: 8px;**
**box-shadow: 3px 3px 1px #888888;**
I put all the key points of the css that I need to keep (or display in a similar fashion) in bold. The part in question is the display: inline function. I need my set of images to be in two rows, wrapping to the right side of the container (or at least scrolling horizontally), but instead they are displaying as two rows of three, then one vertical column that is no longer aligned with the two rows of three.
To see the type of solution I'm looking for, here's the page: http://hellothisismelody.tumblr.com/codeconstruction/
As you can see, it's set up like a Nintendo 3DS. I'm looking to make functioning buttons on the bottom screen that make an image appear in the top screen, and looking to have those images set up like the home screen of a Nintendo 3DS, which looks like this:
Click for Nintendo 3DS Homescreen
Thank you for you time.
Regarding your first question, you can use this:
<div class=container1>
<img src='blah1.png'>
</div>
<div class=container2>
<img src='blah2.png'>
</div>
$('.container1 img').hover(function() {
$('.container2 img').get(0).src = 'blah3.png';
});
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%;
}
I am working on web application.
I wanted to apply auto height to textarea using CSS, dont want to use any script, jquery plugin and other stuff.
After applying class ( i.e. style property ) to textarea, it should automatically increase it's height not width as per content present it in.
In this case width should be fixed i.e. width: 98%; (In my case) only height needs to grow. So scroll bars should exist for text area.
I simply needed one CSS so that after applying to textarea, it should be auto grow like <DIV>.
Please folks do sugggest, is this possible using CSS. If this is not possible, then m okey if i get javascript statments to acheives my requirement.
Thanks,
Pravin
It's sort of semi-doable in html/CSS. There are, however, the usual caveats of browser support and, since it uses html5's contenteditable, it requires a fairly modern browser.
That said, the following works (in Chrome/Ubuntu 10.04):
<div id="wrap">
<div id="editThis" contenteditable>
</div>
</div>
With the following CSS:
div#editThis {
min-height: 4em;
height: auto;
width: 50%;
margin: 0 auto;
}
div#editThis:hover,
div#editThis:focus {
border: 1px solid #000;
}
Demo posted at jsbin
If you're only displaying text in a textarea and not using it to get more content input from the user then consider using a div and styling it to look like a textarea.
the other thing i have seen is an auto expanding textarea that grown in height as you type.
see here: http://james.padolsey.com/javascript/jquery-plugin-autoresize/
This is not possible with pure CSS, you will need to use JavaScript