HI, all
I'm looking simply approach to prevent scale thumb within flex scrollbar'
According to our wireframes we should display scrollbar without up-down arrows and cycle (without scale) as a thumb;
You just need to skin the scrollbar component.
http://www.gskinner.com/blog/archives/2008/05/designer_scroll.html
http://www.axelscript.com/2008/02/20/custom-scroll-bar-using-css/
http://www.pixelbox.net/2008/06/02/skinning-scrollbars-in-flex-3/
In my experience though, skinning the scrollbar is painful and frustrating. They have internal hacks regarding the orientation (VScrollBar vs. HSCrollBar) and the sizes of the bar. But you can officially change everything.
Related
I am farely new to both HTML & CSS (maybe 4/5 months experience.),
I have started developing several websites as a learning basis,
& then I realised
that all of my designs were not 'responsive', so subsequently, I have started to replace all my 'px' values with vw, vh, vmax & vmin.. I have run into some sort of brick wall with my learning curve and wondering if anyone else has experienced this or knows any good sources that could help enlighten me..
Using the 'vw' property is at first sight going well, when I change the browser size everything shrinks, as intended to the viewport width, but getting the vertical scaling of objects, divs, inputs & options is proving to be somewhat difficult. I have attempted playing around with calc() vmin, vmax, vh etc, but they don't seem to be interchangeable unless I stick all of these into css variables. I know that flex-box and grid are designed to be responsive but these still don't seem to do much for the vertical scaling on smaller devices.
I have heard of em's & rems as unit's for font but these are not "responsive",
in the same way Vw & Vh are. ie, changing size on window resize.
Is there something I'm missing, Youtube searches for responsive design only yield hundreds of results for both flex-box and grid. But nothing much for general scaling down of both height and width (proportionatly)..
the first main question is which one is better out of the two
for proportionate scaling
(Vmin or Vmax)? across a range of devices?
if I am currently not intending to use any media queries?
I've tried multiple variations of calc(vw -*/+ vmin/vmax) + px/em/vh/vw/rem..
but the vertical measurements still stay the same... Can Anyone point me towards a good resource or video on youtube for this subject..
I'm finding the inspect element/test by device app in firefox very usefull, but need a shove in the right direction....
Any Ideas??
The first thing would be to check if you have set the viewport meta in your index.html file. If not that should be your very first step.
Secondly before writing the css for a website, you should go through the flex box and grids in css. You could spare with grids but flex box is of utmost importance. Then you could go further and study a little about the BEM model for css. Playing around with percentages and REM’s or vh may not help as you would have a web page which would shrink and expand according to the content that you tend to render. You should therefore make not of the layout of your website and what all things need to stay fixed and what all is going to change when you switch to another device. You should also go through using min-height , max-height and min-width, max-width with flex box that should make your life easy. Good Luck!!!!
try to search about bootstrap because when it comes responsiveness of the website bootstrap is your friend.
Is there a way to adjust the thickness of the scrollbars of a WebView using the stylesheet used by the whole JavaFX application?
I am a bit confused since
on the one hand I read that the scrollbars are not part of the JavaFX UI control and therefore can only be customized by a stylesheet set on the web engine (webview.getEngine().setUserStyleSheetLocation(..)) which means I have to write another CSS trying that the scrollbars look like all other scrollbars in the application
and on the other hand I can see that the scrollbars are obviously correctly customized using the JavaFX CSS except the thickness of the scrollbars (and that the vertical scrollbar is always shown even if the loaded page requires no scrollbars at all)
So where am I wrong and which is the correct way to solve this problem?
Thanks in advance!
I'm developing a presentation tool for AIR (to be used together with, or as a replacement to, PowerPoint) but I'm quite a newcomer to flex layouting.
As you can see from the image, the presenter can open various apps from the main window.
Each of these apps open up in new windows which have different visual characteristics; some use the main content area to show graphics, others bullet points. Most app windows have buttons and view stacks with embedded Flash assets (using s:SpriteVisualElement).
My questions are the following:
1a. When developing a PowerPoint-like presentation tool with Flex, which layout type (basic, vertical etc.) will provide most flexibility?
1b. How do I make sure no clipping occurs on various projector screens - which aspect ratio should I have in mind?
2a. How can I resize children sprites in the SpriteVisualElement container proportionally to the window resolution?
2b. And where do I place this resize logic - on each component (sprite) with resizeHandlers or in one resizeHandler / window?
Please use the comment thread if you want me to elaborate further. Thanks.
Since you're new to Flex, I strongly reading up on the Flex Component LifeCycle.
1a. When developing a PowerPoint-like presentation tool with
Flex, which layout type (basic,
vertical etc.) will provide most
flexibility?
The layout you choose will depend on what you want to display. I don't see layouts as "Flexible". They do their job and position their elements appropriately. I can easily envision using all types of layouts in such a complicated application, each for different purposes.
1b. How do I make sure no clipping occurs on various projector screens -
which aspect ratio should I have in
mind?
I'm not quite sure I understand what this question means, but I take it to mean you want to avoid the presence of scroll bars in your app. To do that, you'll have to develop layout code that sizes and positions your children so that they do not extend past the height and width of your available content space. In Flex 3 (Halo) architecture, this would be done by writing an updateDisplayList() method for your component. In the Flex 4 (Spark) architecture, this would probably be done by writing an updateDisplayList() method for your skin class.
2a. How can I resize children sprites in the SpriteVisualElement
container proportionally to the window
resolution?
I believe my above answer already addresses this.
2b. And where do I place this resize logic - on each component
(sprite) with resizeHandlers or in one
resizeHandler / window?
In a resize handler, I would most likely use invalidateSkinState and/or invalidateDisplayList. The resizing code would be in the skin and/or updateDisplayList.
I'm working on a Flex 4 application and I started customizing the interface with skins to give a whole new look.
So, I've created two scrollbar skins in Flash Catalyst (one horizontal, one vertical).
Its working great when I test the application through Catalyst so I took it and imported it on Flash Builder, copied the components and defined the new skins in my css file for the HScrollbar and VScrollbar.
The skin is working, all the buttons are ok. But, the scrollbar isnt resizing for some reason. It remains in the same height I've designed it to be regardless of the content it is bound to.
It scrolls the content in all the ways it should be but it doesnt resize and the thumb isnt getting all the way down.
Also I've noticed the following.
I have a custom component acting as a list. It extends Group and contains a Scroller. So at one place of the application the Scrollthumb is getting lower than on another place where the same custom list is used.
I also have to mention that this scroller works perfectly without a custom skin.
Anyone else having similar problems?
Okay, I know you posted this a while ago but I have been scouring the internet for days looking for why the scrollbar's thumb wasn't scaling like the default scrollbar.
There are a couple things to check, first is there a set height on your thumb's skin?
If not, and this is what I was overlooking, go to your scroller skin and at the point where you add the vertical and horizontal scrollbar set the "fixedThumbSize" property to false.
I suppose that your graphic elements are defined as every single part of the scrollbar (top arrow, bottom arrow, track, etc...): in this case you should check that the elements dimensions are not fixed... they should be in % to be able to change the dimensions based on the container.
Is there an easy way to replace the ScrollPane scrollbar with the OS's native scrollbar?
Flash applications look much more integrated if they have the same skinning as the user's operating system -- which isn't always easy to detect (Vista Aero vs. Classic?).
Have you guys come across any examples of Flash apps doing this?
To set up something like this would be a big and dirty job. If you're that concerned with OS look-and-feel integration, you're probably better off using native browser controls rather than Flash or another plugin.
Arguably, you could break up your Flash application into separate SWF modules and put each of them into their own scrolling div or iframe in the page. You'd then have to communicate through ExternalInterface or LocalConnection to pass data between the SWFs. Personally, I'd only be willing to try that as a technical challenge to myself, but I doubt it would be worth the effort for a production application.
For the curious, we separated the scrollpane component into a self-contained swf and placed a set of two nested divs along the right and bottom side of the widget.
Using the vertical scrollbar as an example, the outer div was set to the height of the scrollpane and had a CSS overflow-x of hidden, and an overflow-y of auto. The child div was then set to some arbitrary width and a height equal to the height in px of the scrollpane's content.
The browser would display an appropriately sized "scroll grip" and we could quickly read the vertical scroll offset on the outer div to know how far to offset the Flash scrollpane. The same technique, with appropriate modifications, was used for the horizontal scrollbar.
We also included some logic to auto-hide the containers based on their overflow. The result matched native OS behavior pretty closely.
While this may sound like a huge hack, we were able to widely deploy the solution (scribd.com) without any major issues.
Hate to say it, but there is no way to do this. You could use an OS inspired skin/theme, but even then there's possibilities that the user could have modified their appearance settings with custom colors, sizes, etc.