i want to create a side bar using polymers paper tabs i want them stacked up and down not left to right. is this possible? if not is there another tab system i can use that can. I do not want to use links in my tabs.
AFAIK, material design doesn't have a design for this...which is why you don't see this option on paper-tabs.
It would be cool if paper-tabs easily supported a vertical property or allowed you to easily set the flex-direction of the tabs. However, that would require some work. If you'd like to see this added, I'd suggest filing a feature request (https://github.com/Polymer/paper-tabs/issues/new) and see what the designers think.
paper-menu could be a alternative if features like the underline transition aren't necessary?
Related
I'm trying to create a mat-accordion that has mat-expansion panels in for loop. The problem is, I need to do some customization like adding a checkbox in front of each expansion and the expansion icon should be placed after some specific text(in this case its book title). The alignments are a mess and as per my understanding, the expansion panels icon can be placed either at the end or beginning. As I think mat-expansion is the correct component to achieve the same. Need some guidance on how to achieve with mat-expansion or should I consider another approach?
Don't try re-styling the mat-accordion for such a huge changes - it was designed to strictly follow material guidelines. Instead, create your own component based on cdk-accordion - basically it's a mat-accordion without any styles, so it gives you much more flexibility.
You can read the official docs (including examples of implementation) here.
I currently use a Tab Navigator in my flex project and ideally I would like to continue to use it but the problem is there is quite a few tabs and almost all of them end in "..." because their is not enough space to display the entire header. is it possible to display the navigator over two rows?
I'm quite new to flex so if this is an easy thing then apologies.
I think the following link can help you out. Just Check this...
Hope it will help
http://flexponential.com/2011/10/23/enable-scrolling-in-the-tab-bar-of-a-tabbedviewnavigator/
If you are using Spark Tab Bar, the answer from the link above will work. If you are using the old Halo Tab Navigator, there is an excellent component, SuperTabNavigator available as a part of Flex lib.
I want to have a radio button input but instead of mere circles I would prefer another html element (including structure) to illustrate the choices. I thought this might work with the appearance style, but it does not work (probably because the input[radio] might not contain other elements.
Is there any way of styling an input radio, so it displays another HTMLElement instead of its circle?
Why not just leave them radio buttons but make the entire image clickable with label tags?
You might want to look at Uniform. Its a nice and easy way to have complete design control over form elements. Indeed it does require JavaScript but if its not enabled by default Uniform degrades gracefully offering the standard form functionality.
Some browsers allow you to override the settings, but you are going to have to do some super CSS tricks to get it to work.
http://acidmartin.wordpress.com/2009/07/17/using-css-to-style-radiobuttons-and-checkboxes-for-safari-and-chrome/
is a good site that describes how to do what you are talking about. They use a sprite sheet and the browser specific -appearance style to change the look of the box dependent on state.
I am designing a mobile website. On the homepage i have menu items say 'a' ,'b' ,'c',...,'h'.
I want to display only first three menu items and make a 'View All Items' button that on clicking expands to show all the items.Also the button should become 'Show Less Items' after clicking on it.
I want to do this using only HTML5 and CSS3 and no JavaScript.
Also i want this functionality to be reusable around the website.
How should i do it?
--Thanks in advance!
Modern mobile browsers all support JavaScript, but give end users (at least in Android's case, not sure about iOS) a configuration setting to disable it.
Your best bet as a developer is to use the "fail safe" strategy: Ship the HTML with the menu fully expanded, and use JavaScript to collapse the menu immediately on load (or on DOM ready). That way, if you have mobile users with JavaScript disabled, they will see the whole menu. Most of your users should have JavaScript enabled, in which case they will get the expand/collapse functionality you describe.
It's unrealistic to expect to implement this without JavaScript, and if you can find a workaround I don't believe it to be as stable as simply using JavaScript. In terms of hiding the menu items you could set their CSS property to display: none; and place a button which targets these menu items and toggles their display property.
I am on a mac running firefox. I have a website and the select dropdown box has a funny style:
When I look at other websites in the same browser they look different:
Or even at my code here: jsFiddle
What could possibly be causing my website to display how it is because as I understand it you have very little control over how select boxes are displayed?
Thanks
Are you using CSS to format <select>? Or a CSS reset?
If you use some rules like border or background, the default style disappears and you get this grey box..
You should remove those CSS settings.
The default dropdowns styling vary across browsers. Unfortunately there's no real CSS way to restyle them.
That said, you could use a jQuery plugin such as this: Custom Select Box which I've used in the past to good effect.
The second example is displayed using system presentation of select. The first one does not look like a system select because likely some custom styling applied which does not more than just resets the system presentation.
It is generally not possible to style HTML input fields other than text fields effectively. To do that developers usually re-implement input controls using complex HTML, this is suggested by Ian Devlin.