Actually I think it is a bit design issue.
Question is, if you have programmatically generated tabs -let's say by using repeater control- at the top of your masterpage, how do you handle them after you have too many -so that they do not overlap the view-port of the browser?
I don't want to reinvent the wheel if there are already some patterns for such an issue.
Any recommendations?
Thanks
If your tabs are going to be dynamic you should probably move them to a vertical side bar as opposed to a horizontal tab, this would make it more scalable. To maintain a consistent look and feel its probably a good idea to have static main tabs at the top with dynamic associated vertical tabs. Not sure if this helps at all?
If you want to maintain a horizontal layout, you will need to reduce the nav to viewable items and have some sort of < and > at the left and right edges of the nav to enable the user to scroll to the prior or next viewable set.
Not sure if this is what you are looking for.
Related
I have two scroll bars(Horizontal and Vertical) in web page(css+html). This scroll bars are browser default controls.
My issue is: Coded UI is not able to identify vertical scroll bar and identifying horizontal scroll bar as single control, so not sure where to click for scroll.
Developers are using css property for scroll bar. So it automatically detects the overflow of data in defined container(horizontal as well as vertical).
Appreciate help on this issue, please let me know how to scroll horizontally and vertically in a web page.
Best Regards,
Sunil
Coded UI allows you to move the scroll wheel on your mouse by using Mouse.MoveScrollWheel(). You can specify a number of wheel scrolls (which is actually just partial movements of the wheel), an optional modifier key to hold while the wheel is turned, and even a UITestControl to move the wheel over (useful if you have a text area within your page that has a scroll bar).
As far as horizontal scrolling, I wasn't able to find a method within Coded UI to do this, but this article covers using System.Windows.Automation to complete the task.
I posted a similar question where I wanted to scroll a page vertically by specific pixel. You can check the solution here. Scroll web page in codedui. The solution is not entirely CodedUI but by using the native control we can scroll the page both horizontally and vertically by required pixel.
I am building this form: http://codepen.io/anon/pen/gFoIG/
and so far I am satisfied. Unfortunately I have some issue that I seem not able to fix.
First of all, I want to enforce the label positions beside their respective inputs. Now the form breaks down easily (with the opera emulator for smartphone and tablet, the privacy label goes below the check, but I want that it stays beside it)
The other issue that I have is that I want it to fall back gracefully when there are small screens, like placing the second image below the first and placing the input controls one below the other and take the full screen width to be bigger and easier to interact with, but so far I only was able to break the layout with my tests.
This issue: the the form layout breaks, the internal control (input, button, etc) go outside the container div. How do I enforce the container to keep everything inside? I've experimented with blocks, floats and whatever, but if the layout breaks, the input boxes usually go outside the gray rectangle.
Last issue: If I insert this form inside an existing website (for example, a page in wordpress) the layout get completely destroyed because influences from the theme style. How do I enforce my style on my form, keeping it isolated from the other styles? I can think of the iframe as a solution, but it is the only one? It is a good practice?
Anyone can help me with that?
You might want to take a look here. Its a site I just set up to explain an approach to responsive using a jQuery plugin to manage redoing layout. I think it could work for your example quite easily. Also because it can target a container div at any depth in a web page, it could be helpful in the scenario where the layout you want to reflow is inside a 3rd party container (as long as you can run script on the page).
i am looking forward to make a welcome screen of my web app like the picture i shown..
here is a pic of example:
http://img600.imageshack.us/img600/4144/1j5h.png
The truth is i have tested many almost all the panels that GWT has to offer, and still i cannot make it.
For example:
The upper header, i made it with a DockLayoutPanel like this:
DockLayoutPanel Header = new DockLayoutPanel(unit.PCT);
header.setStyleName(¨fw¨);
header.setWidht("100%");
header.setHeight("35px");
header.addEast(ingresar,15);
header.addEast(pass,15);
header.addEast(user,15);
Using that panel, i can have all the 2 boxes and the button on the right corner of the screen, and with AUTO-WITDH.
*(even i cannot pad the red button)..
As you can check the horizontal Center Panel has a different style, i create it as Horizontal Panel, but when i do :
header.add(center_panel);
It is useless, the css from header will ofuscate the css from horizontal panel, also i cannot get the box right in the CENTER.
i have zero experience in GWT, i would like if someone can tell me the way, because i am using panels and i am not quite sure that i am using the right ones for this tasks, or the best ones.
THanks very much
Facundo
If you don't have much experience in GWT components try creating the UI with using GWT UI Binder. Its much more similar to creating a layout with html and css. Also you can use most of the html elements such as divs,spans etc.. GWT Uibinder
You can give styles on individual panels like,
for horizontal,
HorizontalPanel hp=new HorizontalPanel();
hp.setStyleName("");
Hi I want to create an application has this sort of function:
http://looklet.com/create
In this application when you click the button (or some tilelist) on the right the model on the left update accordingly. I wonder how they achieve this. Originally i think it's some sort of image-only pop-up window but then pop-up window seems to update the entire view.
Then I think it might be only change view state, but then I still confused how it can be done using view state.
Flex expert please give me some hint !
Looks like transparent images drawn on Canvas. Each piece must have predefined offset and draw order.
Probably just images placed on one or more Canvas, with the z-order controlled for depth.
The body stays the same, so shirts probably have their own placement properties, as do skirts, underwear, hosiery, etc. as well as backgrounds, faces, etc.
I need help. My main page has a long table that will typically be approximately 2 screens "tall" (assuming a 1024x768 browser window).
I want
the user to be able to browse that table up and down, while always having a set of control buttons available in the currently visible portion of the page.
AND
to retain control over the color scheme of all elements on the page.
The problem is that both solutions I could think of that address the first point (using an overflown div or a frame) involve scrollbars that I cannot style. (At least on Firefox they will invariably be gray.)
I cannot implement a "pager" which breaks the data on the table into chunks which are served one at a time (eg, having a "next 40 results" link at the bottom). The user needs to refer to the full table to find and compare multiple rows throughout the table.
What are my options? My head hurts when I think of moving this entire page to Flash for this reason...
thanks in advance...
i would use jquery and a scrollable div.
Here are some resources to get you started.
http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div
http://flowplayer.org/tools/demos/scrollable/vertical.html
http://logicbox.net/jquery/simplyscroll/vertical.html
Don't change the styling of scrollbars unless you really know what you're doing! However, if you understand the usability implications (and try to make them as user-friendly as possible), try the following options:
If you use jQuery, try jScrollPane.
If you use MooTools, try MooScroll or MooScroller.
The following StackOverflow threads might also be useful:
How do I change the browser's scrollbar colours using CSS?
What's the deal with CSS and scroll bars?
How can one use scroll bar images?