Is there a way to detect when an html element (native element) is done with resizing after the style: width property has been changed trough the use of the angular renderer2?
I have currently implemented a font sizing system based on the width of the parent container, but I have to use a timeout seeing the innerwidth of the parent element is not final when the font sizing is called. This parent uses css-grid properties set trough the renderer2.setStyle method.
so what i want boils down to this:
renderer.setStyle(element, cssGridStyleProperty).
(wait on renderer and browser to finish rendering).
renderer.setStyle(element, fontSizeParentBasedProperty).
Related
I want to subclass Grid to use the yogalayout library to calculate its children's positions and locations. I'm following instructions to create a custom panel. I see that when a child changes size, Grid knows to do a layout, but my control does not (ie, neither MeasureOverride nor ArrangeOverride() is called).
How can I know when a child (or, worse, a child of a child) size changes?
I have created a sample project https://github.com/arolson101/PanelTest that reproduces the issue I'm talking about.
(Note: I'm changing the question which previously mentioned StackPanel to instead mention Grid; I'm not convinced that it's unique to the Grid, but that was the way I was able to make a simple repro case.)
I see that when a child changes size, StackPanel knows to do a layout, but my control does not (ie, neither MeasureOverride nor ArrangeOverride() is called).
If you have not specific width and height property for the children element, when you get it's property, it will return NaN, And you could not set value with Width = newWidth, it can't also invoke the size change event, please call SetValue method to change the element size like the following. Then it will make MeasureOverride invoked.
MyTextBlock.SetValue(WidthProperty, 15);
I'm working on a GTK program in Rust (someone can probably answer this if they don't know Rust, as I can figure out how to translate between different bindings and the native C API) via the gtk-rs bindings for which I want to have a non-editable TextView who's contents are constantly updated in my code. I want the user to be able to resize the TextView to any size, after which my code will re-calculate its contents accordingly. Unfortunately, GTK prevents any resize from taking place that would hide any contents that are current in the TextView. I can't use a ScrolledWindow because I don't want visible scrollbars, and disabling the scrollbars on a ScrolledWindow prevents the resizing behavior that I want. I also tried calling set_size_request to set the size to both 1, 1, and 0, 0 after every text change, but this does not change the behavior at all either — the user still can't properly resize the TextView (by resizing the window).
How can I enable the resizing behavior that I want?
Probably this is not possible. What would be the point of resizing the text view smaller, if the user can never see the text that is outside of the viewport because you don't want scrollbars? That seems like it would confound the user's expectation of how such a component would usually work.
Maybe an approach could be that you pick a certain number of lines to show, make that the size of the viewport, and delete the old contents of the text view that scroll outside of the viewport?
I'm using jQuery Isotope and I'm wondering if there's a built-in (or at least "easy") way to have it dynamically resize elements via a user control, like a slider.
There's a fluid/responsive demo in the documentation, but it resizes elements based on the size of the browser window. I'm looking for something where the window/container would stay the same size, and the user could control the size of the elements by dragging a slider (like the thumbnail size slider in iPhoto).
Is this even possible? I haven't been able to find any examples of Isotope used in this way.
You should try this link: http://isotope.metafizzy.co/demos/relayout.html This sample shows you how an item resizes onclick, but you can transfer this code to make it work with a slider. But as far as I know this plugin uses predefined width and heights via css-classes for its animations, so you might add a lot of css-classes different sizes and it won't work stageless but I am insecure about this. You'll probably need to set the size of an element dynamically. For example you can use the following code to increase the size of an item 5px in width and height:
/* resizing and relayouting the list */
$container.on('click', '.item', function(){
$this = $(this);
$this.width( $this.width() + 5);
$this.height( $this.height() + 5);
//reorganizes the elements in the list
$container.isotope('reLayout');
});
$container is your wrapping element and ".item" is the class of an item. You should probably use a named function for this event handler to bind and call it with your scroller. Hope that helps.
How can I allow scrolling in this Dojo/Dijit page:
http://www.olexe.com/html/DijitScrollTest.html
I might have 60 or 100 rows to display in the tabControl (id="topTabs").
I think there must be a property such as AllowScrolling but I cannot find it.
Or do I need to add a child control, and then turn on scrolling in the child control.
(If you could also point me to the Dijit doc where it is document, that would be appreciated. I have been hunting for over one hour for it).
In general scrolling is easily activated by setting the CSS style overflow to "auto". However, I have looked through your page a little and I have a few questions.
First, you add a TabContainer in the center region of the BorderContainer, but then you never add any tabs to that Container that I can see. TabContainers are usually populated with several ContentPanes to acts as different Tabs.
So if you want tabs, then I would add an additional child element in the form of a ContentPane that holds all the content, otherwise I would change the existing TabContainer into a ContentPane.
Either way, it is the ContentPane that should have the overflow: auto; attribute set to allow scrolling within that element.
the contents of TabContainer should scroll by default. Try looking at the declarative example in the docs and use ContentPane children with a title attribute for each.
I'm using a TabLayoutPanel in a GWT application, attached to the RootLayoutPanel of the page.
Inside each tab I have a ScrollPanel, which is used to display a FlexTable.
Is it possible to make the TabLayoutPanel grow vertically, so the user can scroll the entire page using the browser scroll bar, instead of using the internal ScrollPanel ?
The short answer is: It's not possible with LayoutPanel's. The reason: LayoutPanel's are specific for applications that need to fill the browser client area, or in other words the part that is visible by the user. One of the problems with browsers is to have a widget that has exactly the height of the visible area and also automatically resizes when the browser window is resized. This is one of the problems the LayoutPanels solve.
If you want to use the browser scrollbar and be able to create pages longer than the visible area use the 'normal' Panels.
BTW just FYI you are aware the FlexTable is slow in rendering and if possible better use Grid.
Just add a new style to the TabLayoutPanel:
this.addStyleName("tab-style-content");
And define in your CSS as:
.tab-style-content .gwt-TabLayoutPanelContent
{
overflow: auto;
}
Thus, the property overflow will be overwritten in the gwt-TabLayoutPanelContent and the scrollbar will be shown automatically.
If you make the TabLayoutPanel bigger than the root panel, you will get a browser scroll bar.
If I want to achieve something like this, I always put the TabLayoutPanel in a SimplePanel and add the SimplePanel to the RootPanel. I guess this is not the best way, but it works.
public void onModuleLoad() {
//Create TabPanel
TabPanel tp = new TabPanel();
tp.add(new HTML("Foo"), "foo");
tp.add(new HTML("Bar"), "bar");
tp.add(new HTML("Baz"), "baz");
tp.selectTab(1);
// Create SimplePanel and add TabPanel
SimplePanel sp =new SimplePanel();
sp.add(tp);
// Add SimplePanel to the root panel.
RootPanel.get().add(sp);
}