The application I'm working on has several spark dropdownlists. If the list is too long and a scroller appears then "holes" appear in the list. Scrolling up and down with the scroll bar or arrows does nothing other than normal scrolling, but scrolling with a mouse wheel fixes the problem.
Image of an open drop down with holes
The code for the dropdownlist itself is:
<s:DropDownList id="yearCombo" dataProvider="{yearDataPro}" change="getAllTicketsInYear()" width="100%" selectedIndex="{selectedYear}" chromeColor="0xFFFFFF"/>
The end result is that yearDataPro is an array of strings from "2006" to "2015" as of right now.
Related
This is my first time on SlackOverflow, i hope that you can help me.
I'm trying to achieve something tricky regarding my skill on development and specifically on Bootstrap.
I've created a template with dual Navbar (top and left).
The left one is a fixed navside where there is 3 kind of experience : Expanded, Not Expanded, Not visible.
As you can see, my Expanded NavSide is working perfectly with Scrollbar and Dropdown inside the nav
Expanded SideBar with Dropdown
The not visible experience is also working perfectly.
Not Visible SideBar
When i'm working with my not expanded SideBar, everything is perfect if i don't have too many item menus. If i have too much items i can't scroll on the Sidebar because i've only activated my css for expanded js.
Not Expanded SideBar without Scroll
Where is the issue ? I want to keep the same experience for the not Expanded version with Dropdown displayed on the right of my navside. But if i put the overflow-y scroll on my navbar, the dropdown on the right side is not displayed anymore (but the scroll is working well).
Not Expanded Sidebar with scroll but no Dropdown
Any idea if what i'm trying to achieve is possible ?
I can share my code if needed :)
Many thanks !
I'm using bootstrap for whole website, and i need to have floating sidebar.
Unfortunately, fast scrolling using e.g. "overscroll" method causes bug - when sidebar should have "affix-top" class, it still has just "affix" class.
Also, just a little bit of scrollbar movement fixes problem immediately.
Regular scrolling using mouse wheel or touchpad/trackpoint works perfectly.
Using word "overscroll', i mean the behavior while scrolling using left mouse button, when cursor reaches bottom of the window and some margin (50px?), then scrollbar immediately reaches top.
How should I create a horizontal list of links such that overflowed links are still available through a dynamic dropdown menu at the end of the list?
I want to be able to create an list of links (or buttons) such that when there is enough horizontal space all links are shown. When there is not enough horizontal space the overflowed links will appear in a drop down menu at the end of the link list. I am using Flex SDK 4.5.1.
This desired behavior is shown below.
After experimenting with creating a multi-part custom component, using a custom layout and fairly extensive but not successful research on the internet I have not come any closer to a workable solution.
How should I create a horizontal list of links such that overflowed links are available through a dropdown list at the end of the main list
After a lot research, reading, and many prototypes, I worked through a solution that functions well enough for this specific scenario; albeit, the coupling between components and skins is a bit higher than I would have liked.
I created a custom component based on the spark BorderContainer. The component layout is roughly:
-- BorderContainer
-- Scroller
-- Group
-- DataGroup
-- Button
-- PopUpAnchor
-- Group
-- Rect
-- DataGroup
The first DataGroup contains the primary list of items. These are the ones that are displayed horizontally. By overriding updateDisplayList in the custom component I can measure each item in the DataGroup and determine whether or not it will fit in the available area. Those that do not fit are made invisible (not removed) and added to a do not show list.
Those items in the do not show list are added to the second DataGroup. This is the drop down list. Wrapping up this DataGroup in a PopUpAnchor allows me to add drop down menu like behavior. The Button is used to pop up and close the second DataGroup.
calculate the visible width plus the scrollable width
divide the scrollable width by the width of each link plus the separator to decide how many items to move
pop the hidden items from the list dataProvider to remove the scrollbar
and push them to the popupMenu dataProvider
How to scroll Spark list with a disabled scroller bar?
I created two buttons to scroll up and down, but it is unclear what methods can be used to scroll the list.
You shouldn't try to disable the scroll bar. You should create a custom skin for the scroll bar that uses your custom buttons and places them appropriately based on the design you want.
More info on skinning a Scroller
All that said, you can scroll a list by setting the horizontalScrollPosition or verticalScrollPosition on it's dataGroup. Conceptually something like this:
myList.dataGroup.horizontalScrollPosition = newPosition;
I am trying to make a menu with many items, sub items. I want to display scroll bar along with the items if they are increased. I want to do same with sub menus and so on.
Here is the example about what i am doing.
The problem is, It is displaying horizontal scroll bar, if sub menu again have some items as child. I want to show only vertical scroll bar. and want to pop out sub menues.
Link of css i am using.
You can specify separate horizontal and vertical overflow behaviors:
overflow-x: hidden;
overflow-y: scroll;
Your CSS reference material should have told you that. This will of course make a complete mess of any submenus that try to pop out along the x-axis.
Scrollbars in a menu will also make your users hate you and possibly win you a place in the User Interface Hall of Shame or a post on http://thedailywtf.com/. If you're thinking about doing something like this in the real world, don't do it. Think of a less irritating way to organize your navigation.