Flexible width on d3.js graph? - javascript

Please see http://jsbin.com/okUxAvE/28/
This has a width of 500px. The graph works as intended, with the nodes adjusting their position to stay in view as necessary.
How can I have this width be the arbitrary width of its parent instead of the specific 500px? For example, when viewing on a given device, the width might need to be 300px instead of 500px, but except for the change in width, everything should continue to work as in the example (i.e. no resizing of nodes).
Note that I don't care much about when the user resizes the window, although for orientation change it could be useful; so if anyone knows that it's a bonus, but not my main issue.
UPDATE, for clarification: I need 100% of the parent container, not 500px. I can't just use 100%. I know I could get the width of the parent, stick it into a variable and use that, but I'd like to know if there is a better way.

Related

CSS Grid Container Height Covers Other Content

I'm building a responsive CSS grid with items whose sizes match a desired aspect ratio. I've tried the padding hack among a few other techniques, but nothing has worked nearly as well for me as using JS to determine the pixel value of 1fr for the desired number of columns and the gap size, and then applying that to the row sizing using repeat(auto-fill, minmax(${width}px, 0)).
Unfortunately, this approach comes with a rather nasty side effect: the parent div (display: grid) doesn't know the height of its own content, so it never sizes correctly. As a result, it's never able to show more than one row of the grid. The rest of the grid items display as a line just below that first row.
To fix this, I've tried setting the height of the parent to 100%, but that covers all of the other content on the page. I've tried using containers to fix the sizing, but haven't had any luck there, either. I've also tried overflow: auto, to no effect. If I could calculate and manually set the height of the parent div in my script, that might work, but I've not been able to find a way to do so (and also seems like a messy approach).
Is there any (good) way to do this? Here's a demo of the issue: https://codepen.io/jmindel/pen/GRoMjEw
when you set the overflow: auto it will make a scroll bar in your element to show all of the content in the specified area. then in this case it won't help you. when you set the height of an element to 100% it's height will be the same as it's parent element. I had this problem before. if you want to set the height of an element you should set the height attribute of all the parents of the parents of your element. you can use % as the unit of height and width if you want your code be responsive and don't want to calculate the exact height of elements and if not you can use other units. try to set height with % unit for all of your parents. it helped me and I am sure it will help you too.
Here's what I wound up doing:
I tried wrapping .grid in another div and styling that wrapper such that it has overflow: scroll, which fixes the height not displaying (100% is fine in this environment--it doesn't cover anything, since it's limited to the height of its block-level parent).
I wrote a script that temporarily sets the grid's height to a very large number, finds the lowest element in the grid, and uses its position to determine the grid's height, which gives it a forced pixel height until the next resize.
A few shortcomings of this approach:
The grid must be contained to a scrollable subcontainer, which works well for my use, but might not for others.
The grid's height should size properly, but didn't without a forced pixel height. min-content and max-content did not work.

Changing flex box width with javascript issue

I'm working on a user interface based largely on flexbox, that can basically be broken down into a content area and a sidebar which can be toggled (its width is changed by adding/removing a class).
When the sidebar is toggled, the content area is manually resized through javascript. It contains an svg canvas which needs to be redrawn, so this cannot be done through CSS. Chrome handles this code perfectly.
Firefox and Safari, however, behave very strangely, and interestingly not in the same way.
I was able to reproduce the behavior in a fiddle: http://jsfiddle.net/q1yp6ssw/21/
It also happens with a regular <div>, it's not just <svg> as you can see here: http://jsfiddle.net/mqok5exb/2/
toggleSidebar() calls the function resizeSvg() which resizes the "svg" element using the size of its parent.
function resizeSvg() {
var width = $svg.parent()[0].offsetWidth;
$svg.attr('width', width);
$svg.find('text')[0].textContent = 'width: ' + width;
}
If you're testing these fiddles in Firefox, you'll notice that the content area resizes too early, and becomes larger than it should be, pushing the sidebar outside the container's original dimensions. Using setTimeout to delay the resize did not work.
It seems to be a problem with timing and when each browser renders the updated size of the parent element. The behavior is the same without the transition, so that's not the problem.
My question: What is causing this and how do I fix it, or at the very least find a usable workaround? If it turns out to be a flexbox problem, then flexbox can be replaced.
Thanks!
I know this is old, but I'm trying to do something similar and in my case changing width with javascript (angular) results in 50px lower than calculated width.
If you want to set exact value for flex you should set both width and min-width with your javascript code.
here is a code which solve my problem:
el.style.width=String(newWidth)+'px';
el.style.minWidth=String(newWidth)+'px';

Do you really need a width on floated element?

Say you have a Div (id="toolbar"), and inside that toolbar you have a Div (id="ButtonHolder") that contains 2 buttons. If you float the #ButtonHolder to the right and don't set an explicit width on it, is that kosher?
I've read on stack overflow that you should always set a width on a floated element. The buttons text might change, from save to apply, and I don't want to have to adjust #ButtonHolder's width every time.
I thought about setting #ButtonHolder's width to auto, but the browser does that by default so it seems unnecessary to set it's width to auto. I'm worried the browser might not always float #ButtonHolder the way I think it should.
A change from "save" to "apply" isn't going to take up much more room, to be honest.
In principle, yes you should always set a width - if you don't, then say you have the button float:left; and another <div> float:right;. If you don't set widths, they're not going to take up the full screen width, so any elements you put in below are going to try to position themselves in the gap between the two.
It is also a good idea to have a 100% width container element for this particular scenario to prevent the described effects.
float and position usually come with a cost. You should try to first find other ways to position elements within your layout. You can should consider other options such as margin, padding, display: inline-block;, text-align ... etc.
I would recommend reading this.
To answer your question directly. Setting width for floats is not written on stone but not doing so, usually means trouble later. At least in my personal point of view.

how to make the webpage follow the size of the browser window and when resized, the layout does not get distorted?

I am currently working on a webpage and I have achieved fitting it in the whole browser window by using percentage(%) values in the width and height properties of my css. The problem now is that when I resize the window, everything gets scrambled and distorted (e.g labels,links, etc.) Is there a way to have a minimum height and width so as when the window is resized, there is a limit those properties to prevent the layout being distorted?
Thanks is advance!
You actually answered the question yourself. You can use the CSS properties min-width and min-height to set minimum width and height, respectively, for a block level element like a container.
A better solution would be to use responsive design, though, which will continually adjust itself as the window grows and shrinks.
Check out the css properties min-height:
http://reference.sitepoint.com/css/min-height
and min-width:
http://reference.sitepoint.com/css/min-width
You may also look into a simple css framework like StackLayout:
http://stacklayout.com/

Size element so it is exactly as tall as it needs to be to not scroll

Size element so it is exactly as tall as it needs to be to not scroll
I am working on a tool to allow creating small "notes" that I then turn into Ext.Draggable items. What I would like to do is to have these items be sized no taller than they need to be.
The elements are absolutely positioned: set position: absolute with top and left and height and width values in-line. The problem is that the height values are not really very reliable.
Is it possible to set the size at something very short (say 3px), then increment the height until the scrollbars disappear? How can I tell when that occurs, and can I do it in a way that's reliable across browsers?
Code: http://github.com/artlung/ArtLung-Notes/blob/master/v2/index.js
In general, see Ext.util.TextMetrics.getHeight(). Note that you can't use the singleton for height determination.
However, I think that removing explicit height should generally solve your problem. That's unless you need to synchronize something like shadow overlay's size, though.
If an element's style.position is absolute and the style.width is determined, setting its style.height to 'auto' will make a containing box for its content and padding, with no scrollbars.

Categories