Hi have a folding panel as one of the components of the divider box. It can be expanded and collapsed, and the divider box adjust itself on expand/collapse.
But once i manually move/adjust the divider the divider box doesn't auto-adjust when i collapse the panel. Empty space id hence created. Any help appreciated
i think you should use resizeToContent property of DivideBox
check the following code
<mx:HDividedBox width="500" height="200" resizeToContent="true"/>
resizeToContent property is used to adjust your container according to the child width, height
when you collaps the panel, according to the new height and width, a dividebox will adjust it self.
resizeToContent was set true. And it is working fine until I adjust the divider. Once it is adjusted, it wont get re-sized with the child size.
resizeToContent property will work when user not set width or height propery to container in above HDivdebox i set width and height propery thats why it doesn't work...
try following code...
here in below code i use HDivideBox and TitleWindow as its child... TitleWindow has its own height and width and HDivideBox's resizeToContent property is set to true. when user click on close button it's width decrease and HDivideBox is resize itself according to childrens total width
protected function t1_closeHandler(event:CloseEvent):void
{
t1.width = 50;
}
protected function t2_closeHandler(event:CloseEvent):void
{
t2.width = 50;
}
<mx:HDividedBox resizeToContent="true">
<mx:TitleWindow id="t1" width="150" height="100" showCloseButton="true" close="t1_closeHandler(event)"/>
<mx:TitleWindow id="t2" width="150" height="100" showCloseButton="true" close="t2_closeHandler(event)"/>
</mx:HDividedBox>
Related
According to the react-virtualized docs, "The AutoSizer component decorates a React element and automatically manages width and height properties so that decorated element fills the available space".
The suggestion is usually to add height: 100%; or flex: 1; to all parent elements in the DOM to render the table's full height.
What if one of those elements, e.g. an absolutely positioned full page overlay container, has height: 100vh; overflow: scroll; ?
In this case, the Table's parent height is 100vh, but allows overflow if the children have height greater than 100vh.
Say our table has many rows of varying height and exceeds 100vh when rendered. Autosizer will return a height in pixels that equals 100vh, as a maximum, meaning the last rows in our table will be cutoff as AutoSizer will not stretch its parents height to render all rows.
My current workaround is to use <CellMeasurer /> and CellMeasurerCache() to manually determine table height from this.cache; // (component instance of CellMeasurerCache) using private properties, for example in my table component:
componentDidUpdate = () => {
const { tableHeight } = this.state;
const tableRowHeights = Object.values(this.cache._rowHeightCache);
const newRowsHeight = tableRowHeights.reduce(
(height, nextRowHeight) => height + nextRowHeight,
0
);
if (tableHeight !== newRowsHeight) {
this.setState({ tableHeight: newRowsHeight });
}
}
Is there no way to accomplish this with react-virtualized components and APIs,without accessing private properties from the CellMeasurerCache() instance?
What if one of those elements, e.g. an absolutely positioned full page overlay container, has height: 100vh; overflow: scroll; ?
In this case, the Table's parent height is 100vh, but allows overflow if the children have height greater than 100vh.
I don't think this (overflow behavior) make sense in the case of react-virtualized. In most cases- unless you're using WindowScroller for a Facebook/Twitter like layout- react-virtualized components should manage their own scrolling.
So in that case, if 100vh height is available, you would want RV to fill exactly that amount and- if there's more content than will fit into that area- (which is likely, if you're using RV in the first place)- it will setup the scrolling styles within itself.
On the other hand, if you tell a react-virtualized component that its height is numRows * rowHeight then it's going to render everything, and completely defeat the purpose of windowing. :)
I'm trying to create an SVG element with a width defined by a percentage of the parent and a fixed value, say 50% + 20px. For normal html elements, in the CSS you can use calc(50% + 20px). Is there an equivalent way to do this for embedded SVGs? Specifically, I'm using snap.svg, though I'm not sure if this capability exists with SVGs in general.
EDIT:
Tried setting <svg> width with percentages and px, which I couldn't get to work. I tried both:
<svg width='calc(50% + 20px)'>...</svg>
<svg width='50% + 20px'>...</svg>
I also tried setting it in CSS:
svg {
width: calc(50% + 20px);
}
It should be possible with the upcoming SVG2 as width etc. become geometry properties and then you can style them with calc
I want to put a rectangle around a text in SVG.
The height of the text is known to me (the font-size attribute of the text element). But the width is dependent on the actual content. Using getBBox() or getComputedTextLength() should work. But this only works after rendering.
Is there a way to specify that in an other way? For example defining the x and width attributes relative to other values? I didn't find anything like that in the SVG Spec.
Figuring where text ends presumably requires roughly the same underlying code path as the rendering itself implements - going through the width of each character based on the font and style, etc... As I am not aware the SVG standards define a method for directly getting this information without doing the actual full rendering, till such methods emerge or are reported here by others, the approach should be to render invisibly before doing the actual rendering.
You can do that in a hidden layer (z-index, opacity and stuff) or outside the visible viewport, whichever works best in experimentation. You just need to get the browser do the rendering to find out, so you render invisibly for that sake, then use getComputedTextLength()
I know this is old, but a few ideas:
If you can choose a mono-spaced font, you know your width by a simple constant multiplication with glyph count
If you are bound to proportional fonts, you can find an average glyph size, do the math as with mono-space, and leave enough padding. Alternatively you can fill the padding with text element textLength attribute. If the constant is chosen carefully, the results are not very displeasing.
EDIT: As matanster found it to be hacky
Predetermine glyph widths with getComputedTextLength() and build a lookup table. Downside is that it does not account for kerning, but if your cache size is not a problem, you can append glyph-pair widths to this lookup.
Going beyond that is to find some way to do server side rendering: Is there a way to perform server side rendering of SVG graphics using React?
It is possible using canvas with measureText():
// Get text width before rendering
const getTextWidth = (text, font) => {
const element = document.createElement('canvas');
const context = element.getContext('2d');
context.font = font;
return context.measureText(text).width;
}
// Demo
const font = '16px serif';
const text = 'My svg text';
const textWidth = getTextWidth(text, font);
document.body.innerHTML = `
<svg>
<text x="0" y="20" font="${font}">${text}</text>
<rect x="0" y="30" width="${textWidth}" height="4" fill="red" />
</svg>
`;
Adapted from https://stackoverflow.com/a/31305410/1657101
I have a huge svg 3200*1800. I only want to show a part of that image something like 400*1000, ensuring that the width is the dominant attribute and having a scroll bar for the height but when I set viewbox it increase the width to display the added height.
viewBox="900 550 400 1000"
Is their a way to stop this happening?
I worked it out you need to increase the height relative to the viewbox for example I ended up with something like this:
width="1400"
height="4000"
viewBox="966 555 350 1000"
Compared to what I used to have:
width="350"
height="1000"
viewBox="966 555 350 1000"
You just set 'preserveAspectRatio' to "none" along with your 'viewBox' attribute, then your problem is solved.
This answer builds on Shane's answer (which does not cater to variable window sizes)...
To have width-dominant overflows:
Let the 'viewbox' define the portion of the graphic to display (any known aspect ratio)
Let the svg element have default width and height (100%)
With javascript, dynamically set the height of the svg element every time the window resizes
The code below works for my learning project and is NOT production code.
In the head element:
<script type="application/javascript">
var svgRatio = ${viewboxRatio}; // ratio must be known
// From http://stackoverflow.com/a/13651455
if(window.attachEvent) {
window.attachEvent('onresize', resizeSvg);
}
else if(window.addEventListener) {
window.addEventListener('resize', resizeSvg, true);
}
else {
//The browser does not support Javascript event binding
}
function resizeSvg() {
var height = window.innerWidth * svgRatio;
var svg = document.getElementsByTagName('svg')[0];
svg.setAttribute("height", height.toString());
}
</script>
At the end of the body:
<script type="application/javascript">
resizeSvg();
</script>
I'm using DOJO's ContentPane module. I have a div element in one of the panes and I need to give it a certain height - 100 pixels less than the height of the ContentPane so that the div changes its height dynamically when you change the ContentPane size by dragging the splitters. I'm new to Dojo and would be happy if somebody could help me with this.
Thanks.
I think the best solution is via nested BorderContainers with properly set splitters, because that way dijit/layout will take care of resizing and you won't need to write any JavaScript code and your layout will be based solely on CSS.
It's kinda cumbersome to explain, so I created a working example for you at jsFiddle: http://jsfiddle.net/phusick/Ayg8F/ + a diagram:
NB: Do not forget to set height: 100% for html, body and the top BorderContainer.
The drawback of this solution is you will have to replace plain divs with ContentPanes. If you do not want to or can't you can use dojo/aspect and connect to BorderContainer or ContentPane resize method and resize your divs manually whenever the size changes:
require([
"dojo/ready",
"dojo/aspect",
"dijit/registry",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer"
], function(
ready,
aspect,
registry
) {
ready(function() {
var bc = registry.byId("borderContainer1");
aspect.after(bc, "resize", function() {
// calculate and set <div> size here
console.log("resize divs");
});
});
});