I am creating a tablist for a website, and am looking to modify the experience on a mobile.
I am looking to create a select list for the navigation tab items.
Is is valid to keep arai roles such as role='tab' for option's
Thanks in advance
Ok im thinking that an accordion on mobile may be a better fit. That way i can use the same aria roles, similar markup and have a better ui on the mobile.
Anyone have anything to add?
EG.
http://test.cita.illinois.edu/aria/tabpanel/tabpanel2.php
Related
This web app has 2 menus essentially, the one on the left hand side (3 items) and the the user profile menu also on the left (drop-down opens once you click on picture).
What would be the best way to display these on mobile? Hide both elements, move them around? Looking for the best practices for something like this. Thanks!
Not sure there's a 'best way', here's one idea to get you started though.
We have a requirement where we have to use edit view in place of show view in tabbed show layout, something like below image.
In react-admin documentation is it clearly stated that The Show view displays a record fetched from the API in a read-only fashion
Need suggestions to achieve this.
Gone through several react-admin documentation did not find any relevant solution.
It was there in documentation
Achieved it using <TabbedForm>
document
I've spent most of the day on this and got nowhere. On a mobile handset the gallery is displayed with the nav arrows superimposed on the image. These are not necessary since swipe is enabled and spoil the look of the image.
I need to hide the arrows for mobile only, is there a recommended way to do this? It seems like a common thing one might want to do, but I can't find anything current on the web.
I've tried some js code to alter the options for the library to no avail, and can't figure out how to do it with a media query to modify the css.
There is an option arrows that you can use to toggle navigation arrows. You could set it by yourself for mobile devices or you can use handy mobile option, like this:
$('[data-fancybox="images"]').fancybox({
mobile : {
arrows: false
}
});
Ok. Starting over with this. I see that the SocialBoo theme has something similar in what I want to achieve. If I find that I can work and improve. I Added a new socialboo theme and created blank GUI. Assumed it would be a Commandbehavior but that didnt do the trick, so did adding tabs. Seems like those components are not for that specific bar... However did notice another issue.
How do I get the social actionbar as displayed in the socialboo theme? (Screen shot). Assuming those images etc are part of the default theme, right.
Also, If I create a TouchCommand = bar, title or native. It displays fine in Gingerbread but not ICS. DO you know why is that? (screen shot)
Thanks, in advance.
Those images aren't a part of the theme, they are a part of the specific demo. If you add a Tabs component to the center of the border layout UI you will get thee tabs where the "icon" property will allow you to customize the unselected icon and you can customize the selected icon as well. You can see the full source/resource file of the social boo demo in the docs and demos zip in the download section.
Generally customizing commands is a bit complex because of platform specific constraints, when running on an Actual Android 4 device we use the native ActionBar by default to provide the experience Android users are used to. This is hard for us to simulate so you will only see this properly in the device build. I suggest not relying on commands, it seems that what you are trying to achieve is easily doable with tabs and its possible that's why you had difficulties in your other question.
I'm building this website using bootstrap.
The problem is that i have nested drop downs. The dropdowns look nice and not cluttered in desktop version.
However this is how it looks in mobile:
They look cluttered, and you can't fold/unfold the deepest level of dropdowns. It just doesn't allow this.
I'm thinking there are better ways to represent information in mobile view. My approach was when person touches 'buildings/land' tab, i replace bottom navbar with contents of Buildings/Land, thus reducing one level of dropdowns.
Question:
I'm really not experienced in developing UI. Is my approach sufficient?
How should i solve this problem?
I use a sweet JS plugin that plays nicely with Bootstrap, called Snap.js. If you've ever used the Facebook iOS app, you'll be familiar with this layout. There are some great demos here.