I have an application control bar at the bottom of my Flex application (with attributes width="100%", dock="false", left="0", bottom="0", height="50"). It contains a lot of elements (like buttons and labels). The width of the SWF is the width of the browser.
When the user makes the width of the browser window smaller, after a certain point, the components on the application control bar gets "squished": they are forced on top of each other. And so, it becomes confusing and ugly. To ensure that that doesn't happen, I've set the minWidth attribute to a value so that it'll always display the components without them overlapping each other.
But then, a horizontal scrollbar appears and hides the bottom half of the application control bar.
I've googled and I found this article: flex verticalscrollpolicy bug (referenced by this SO question: Flex: Prevent scrollbar from covering content when automatically displayed).
But that seems to apply only to a fixed size component. My component's width is a percentage. Any ideas on how to have the horizontal scrollbar appear and have it not cover up the application control bar?
Thanks!
See if adding the following code to the overriden validateSize method (as in the scrollpolicy bug page you linked to) solves the problem.
if (width < measuredWidth)
{
height = normal-height + height-of-the-horizontal-scrollbar;
}
else
height = normal-height;
(Find the normal height of the application control bar and the scroll bar (trace them out) and use those values).
So this happens when the ApplicationControlBar is fixed at the bottom: bottom=0 and left=0. The easiest solution is to make the bar a lot taller (that'll push the content way higher than the scrollbar height). But that makes it kinda ugly.
So another solution: in the MXML file, I capture the Resize event. And in that function, I do this:
if (width < bar.minWidth) // width is the width of the SWF
{
bar.height = ORIGINAL_SIZE + 10;
hbox.setStyle("verticalAlign", "top");
hbox.setStyle("verticalCenter", -10);
} else {
// normal case
box.height = ORIGINAL_SIZE;
hbox.setStyle("verticalAlign", "middle");
hbox.setStyle("verticalCenter", 0);
}
And the horizontal scrollbar doesn't hide the content anymore! Also, the Resize event doesn't get triggered when the bar has a minWidth & the width of the stage is less than that.
I had this come up today and I slightly tweaked sri's if statement like this:
if (buttonContainer.horizontalScrollbar)
{
// Change height & style properties
}
else
{
// Return to original properties.
}
Related
I'm having a problem which at first I thought it was the general configuration of my app and the height I was giving to my page wrapping classes. But I made a simple out of the box material ui tab example and it seems this is natural to material ui Tabs Component.
Material UI tabs component gives their tab container the same height, being that height the largest of all its containers. So if you have one tab content with lots of content in it, it makes the other tab contents just as large, even though they may only have one text field and a button in them.
How can I make it that the height of the container adjusts to the content of its own tab?
Here is a visual
Here is why TAB ONE is so large, TAB TWO is setting the height
Here is a webpackBin for you to see the code working and mess with it.
One hack I've done so far is setting a definite height and overflow, but I don't want to do that because it creates a double scroll bar (one in the tab container, one in the body) besides, it's buggy looking.
I would like it if the tab container (the one with the green border) adjusts to the content as it does in TAB TWO, BUT individually.
Thanks in advance!
If you set the height based on the given element's current visibility you will be able to resolve this issue.
Example
.react-swipeable-view-container > div[aria-hidden="false"] {
height: 100%;
}
.react-swipeable-view-container > div[aria-hidden="true"] {
height: 0;
}
Note: this solution could be improved by using a better selector, something more descriptive like a class name. I suppose it's subjective though, using an attribute selector is not technically wrong and actually more specific than just a class.
Demonstration: https://www.webpackbin.com/bins/-Ky0z8h7PsdTYOddK3LG
animateHeight will animate height on tab change. if all tabs have different height it will show height accordingly.
Example:
<SwipeableViews
animateHeight // it will animate height on tab change
>
<div>{'slide 1'}</div>
<div>{'slide 2'}</div>
<div>{'slide 3'}</div>
</SwipeableViews>
Happy Coding ...!
There's a merge request that have been accepted here on the lib that could be interesting with a new method called updateHeight https://github.com/oliviertassinari/react-swipeable-views/pull/359
<SwipeableViews
action={actions => {
this.swipeableActions = actions;
}}
animateHeight
>
<div>{'slide n°1'}</div>
<div>{'slide n°2'}</div>
<div>{'slide n°3'}</div>
</SwipeableViews>
Then:
componentDidUpdate() {
this.swipeableActions.updateHeight();
}
I want to shorten the thumb in the scroll panes through CSS, I have used the min, max, and pref height but it does not seem to work, am I missing something or does this edit needs to be done at another level of the container (.track or .track-background).
.scroll-pane > .scroll-bar:vertical > .thumb{
-fx-pref-height: 5;
-fx-min-height: 5;
-fx-max-height: 5;
This cannot be done from CSS. The ScrollBar skin simply resizes the thumb to the size required based on visibleAmount and the track size. The CSS properties are simply ignored for the thumb.
It's unclear, why you would attempt to do something like this in the first place. If this worked, it would lead to unusual/unintuitive behavior of the ScrollBar, i.e. not being able to move the thumb down until the bottom reaches the end of the track and the size of the thumb not being chosen according to the size of the content of theScrollPane.
Unfortunately, as Fabian pointed out, it is not possible to do this using CSS. You can however do it by creating a copy of the ScrollBarSkin class and setting thumbLength explicitly there.
You then change the skin like so -
for (Node node : yourScrollPane.lookupAll(".scroll-bar")) {
ScrollBar s = (ScrollBar) node;
s.setSkin(new YourScrollBarSkin(s));
}
I would also recommend adding the following to disable the scrollbar when there isn't enough content to make it scrollable -
if(this.snapSizeY(Utils.clamp(this.minThumbLength(), this.trackLength * visiblePortion, this.trackLength)) == this.trackLength)
{
incButton.setDisable(true);
decButton.setDisable(true);
thumb.setDisable(true);
track.setDisable(true);
}
I'm creating a UI. Right now I'm working on generic boxs that dynamically add and remove scrollbars as they are resized.
I draw the scrollbars along the bottom and right inside edge. The inside edge is important.
So at some point the box is resized. If it's resized I check to see if the new size is smaller than the size needed for the contents, if so, scroll bars are added.
My problem stems from when only one scrollbar is needed; and the size for the other dimensions/axis is very close to the size needed for the contents.
What happens is that this scrollbar is drawn on the inside edge. Now that removes area that can be used for the contents. The problem is then that if a scrollbar is shown I would have to check the area available again to see if the other scrollbar is needed. And then again.
This seems like a recursive problem; but I'm not sure how it will help me.
Some code:
void Box::UpdateVisibleRegion()
{
// if the dimensions of this box is smaller than what the widget needs, display horizontal scrollbar
if(GetDimensions().x < m_widget->GetDimensions().x)
{
m_scrollbarH->SetVisibility(true);
m_scrollbarH->SetSize(utils::coord<int>(GetDimensions().x,m_scrollbarH->GetDimensions().y));
}
else
{
m_scrollbarH->SetVisibility(false);
}
// likewise for vertical scrollbar
if(GetDimensions().y < m_widget->GetDimensions().y)
{
m_scrollbarV->SetVisibility(true);
m_scrollbarV->SetSize(utils::coord<int>(m_scrollbarV->GetDimensions().x,GetDimensions().y));
}
else
{
m_scrollbarV->SetVisibility(false);
}
And there's the problem. If the height of the box is just over the widgets height; and the width is far under it; then the horizontal scrollbar is displayed. But now the check for vertical scroll bar should have been:
if(GetDimensions().y - m_scrollbarH->GetDimensions().y < m_widget->GetDimensions().y)
Because the scrollbar is drawn on the inside edge, there's less room. But obviously I can't know that until I've checked the other. And both the horizontal and vertical are going to affect each other.
I'm sure recursion is the answer; but I can't see it.
I could probably do this with one or two big nested if statements...
i am building a AS3-Class extending SkinnableContainer. Vertical scrolling only.
public class Part extends SkinnableContainer {
public function Part() {
var scroller : Scroller = new Scroller();
scroller.percentHeight = 100;
addElement(scroller);
var content : VGroup = new VGroup();
scroller.viewport = content;
fillContent();
}
protected function fillContent():void {...}
}
Several instances of them are placed in a HGroup, everytime
the height of the HGroup or
the content in one of the instances
changes, the widths of the instances vary because some of them get a ScrollBar depending on their height.
How can i preserve the space which will be needed for a forthcoming ScrollBar?
scroller.measuredSizeIncludesScrollBars=true
does not lead to success.
Thank you for any hint.
My understanding is that you want there to always be a scrollbars width of space to the right of each component, so that your scrollbars will just slot in without causing repositioning, correct? If that is wrong you can stop reading now!
You should be able to achieve this by setting the verticalScrollPolicy style to ON (default is AUTO):
scroller.setStyle("verticalScrollPolicy", ScrollPolicy.ON);
This will mean that scrollbars are always visible, but when scrolling isn't possible they are disabled. If you need to hide disabled scrollbars you may need to reskin them or something similar.
Hope that helps!
I have such problem: I'm creating a container and it's content at runtime. Here's a rough structure:
--VBox
----Form
-------FormItem
...
-------FormItem
----ControlBar
I have fixed maxHeights for the form container to keep it in bounds of screen. But when I get vertical scrollbar, the horisontal also appears (seems like it's not enough place for this VScrollBar).
To escape this problem, I've created a listener for horisontal scroll appearing, so if it appears, I'll increase container a bit, so it would feet the other scrollbar normally:
form.addEventListener(Event.ADDED, function(event:Event):void{
if(event.target is HScrollBar){
while(form.horizontalScrollBar && form.horizontalScrollBar.visible && !(form.width > form.maxWidth)){
form.width += 10;
form.validateDisplayList();
}
}
});
I've tried also validateNowand other similar methods. What I have here:
1. The HScrollBar is being added.
2. We increase a bit the width of container, so it disappears.
3. When it disappears, the validating throws the null-pointer exception when it tries to measure the non-existing scrollbar. I've also tried to add validateProperties before validation, but it didn't worked either.
Can anyone help to get rid of this annoying scroll? :)
The problem is - if your scrollPolicy is set to auto Flex does not take scroll dimensions into consideration while calculating layout. So when scroll appears it is displayed over the content that it's already there. And when the content is hidden by the scroll a horizontal scroll appears so all content can be accessed via scrolling. The way I usually deal with that is to always set paddingRight (or right when parent is Canvas) style property to 20 (scroll usual width is 16) so when the scroll appears it doesn't overlap anything.