I have a tab control and when there are too many itmes, I get tab item headers on multiple lines.
So it will be like
[TabItemAA1] [TabItemAA2]
[ TabItem3 ]
[TabItem4AAAAAAAAAAAAAAA]
I don't mind them stacking but when this happens, TabItem3's header stretchs to fit the width of tab control.
How can I prevent this or make the tab item content which is TextBlock to fit the extended width?
Thanks
That's kind of the way people expect to see it, though. The tab labels should be centered so you can easily read them. I assume you want to left or right justify instead. Changing the dominant UI paradigm is only a good idea if you're going to improve upon it.
It could get very messy, but you could nest another container inside the header and explicitly specify the size and alignment of the objects it contains.
For a different UI style where the tabs scroll horizontally instead of splitting into multiple lines, you could also check out this guy's article, titled "WPF Single Row Tab Control": http://rickdoes.net/post/2009/11/06/WPF-Single-Row-Tab-Control.aspx
Related
If I make button relatively small, it's caption turns to ellipsis.
How to turn off this feature?
Don't let the button go below it's preferred size, then it will never need to elide the text of the button label:
button.setMinSize(Button.USE_PREF_SIZE, Button.USE_PREF_SIZE);
I want to make very small button
You can use any of the below either separately or in combination:
Apply CSS to use a very small font in the button.
Make the label text for the button very short.
Use brian's answer which proposes explicitly setting the ellipse string to empty.
Use a small graphic icon instead of text.
You can use setMinSize as documented above in all cases (if you wish the button not to go below a preferred size truncating or eliding content).
In all cases, if you wish, you can also apply CSS to minimize the padding between the label and button the border.
From your previous comment (I want to use simple captions like "<" and ">"), I think option 2 (Make the label text for the button very short) is what you want.
You may also be interested in Joel's Designing for People Who Have Better Things To Do With Their Lives which would indicate, usability-wise that very small buttons are usually a pretty bad idea.
in your label/button you can use the textOverrun property to turn off ellipsis.
textOverrun.set(OverrunStyle.CLIP);
this is probably a bit late for you, so i am putting it here for lone wanderers digging up this question.
It puts ... because there's no room for the text. You can use bigger buttons or a smaller font but if you really want the dots gone use button.setEllipsisString(""); , but then you just get truncated text.
Got this basic issue..
I have two tab navigation bar in Oracle APEX 4.0. The parent tab and the standard tab.
The standard tab which is below parent tab starting from left, I would like to put a text or image made of text on the right side which describes the overall application.
The Text or Image of made of text will be "BASIC PROGRAM" in a Green color with big font size.
Can anybody guide me how to proceed..
I was thinking using substitution strings such as #tab_cells# may work, but not sure where to put and how to do it?
appreciate your help..
Tabs are long due an overhaul, the customisation you can do on them is extremely limited. Short of completely overhauling your menu system, i'd alter this one tab through javascript/jquery.
Please take care with selectors for tabs. I have no idea which theme you are using, i did this for theme 21 with 2 level tabs, selecting a 2nd level tab. Inspect your HTML and adapt this to your requirement.
$("ul#tabs li").each(function(){
if($(this).text().indexOf('Maatregelen')!=-1){
$(this).children('a.tab_link').css(
{"background":'url()', "background-color":"green", "text-shadow":"none"}
);
};
});
I wouldn't change the template per se. There is not much you can do there to the tab generation, since you can not use plsql code. Rather, you could put the tab label in an attribute on a higher level than the a-tag, to have an easier jquery selector. Or you can put the javascript code in to run on-load. Or have a dynamic action on page zero to run on-load, and this will affect every tab in each page.
Scroll bars are really boring. I've seen a few really inventive new user interfaces for updating these. I believe there are many better ways to spend 10px then with a solid color and static buttons. Here are two examples I've found:
http://www.youtube.com/watch?v=-PnXY4wjuH8
http://chikuyonok.ru/u/demo/infoscroller/
(credit for this link goes to this question uses HTML5 Canvas )
Do you have any other ideas to add to this list? How can we give a better idea of view-status in the document, without wasting so much real estate? How can we add more functionality to the notorious dead space on the right?
Firstly, one should be very careful about “updating” the scrollbar. The scrollbar is a great success story, a simple, elegant, powerful control that is critical for successful computer use and almost universally understood by users. Trying to improve the scrollbar is like trying to improve the ballpoint pen. It’s stayed the same for so long because there’s really not much more you can do. Being "boring" is not a good reason to improve it. Users don’t use an app or site because it has new and "cool" controls. They use an app or site because it lets them accomplish their tasks. To improve the scrollbar, consider how changes can improve task completion.
Good things the humble scrollbar has:
Capacity to scroll one pane-full.
Capacity to scroll one line (fine tuning).
The capacity to do each of the above repeatedly without moving the mouse (so a user reading some content only has to click occasionally after initially placing the mouse over the right spot).
Allows random access to anywhere in the pane by simple linear drag and drop.
Intuitively shows the relative position in the content (e.g., allowing the user to judge how close s/he is to the end).
Intuitively shows the relative size of content by the size of the slider relative to the track.
Supports intuitive keyboard activation via the cursor keys -good shortcuts, and good for accessibility.
Supports clickamatic (pressing down and holding the mouse button to scroll multiple lines or pane-fulls).
Very smooth real-time feedback on user actions.
All in a remarkable compact and unobtrusive control that doesn’t distract from the content (what the user is really interested in).
You don’t want to mess with any of that. In particular, the pop-up scrollbar you link to is probably a bad idea because it interferes with the capacity to scroll by a pane-full by clicking the track. That is perhaps the most common user action so it deserves the greatest number of pixels (i.e., the track).
On the other hand, building on existing scrollbar capability, like the Infoscroller you link to, is a something worth investigating further. For the original research on this concept, see:
McCrickard DS and Catrambone R (1999)
Beyond the scrollbar: An evolution and
evaluation of alternative navigation
techniques. Georgia Institute of
Technology Technical Report
GIT-GVU-97-19.
Obviously, what you show in the scrollbar track depends on your content. A thumbnail of the content won’t work well for a text table or list. For that, Greg Raiz has suggested indicating the values for the current sort order. If there’s not enough space, maybe tooltips or callouts can appear pointing to key places in the track to drag to. MS Word does something similar with this, showing a tooltip indicating the page and section of the current drag-to point.
Here’re some other ways we could build on the scrollbar:
More Buttons. I’ve seen suggestions to include both up and down buttons at the top and bottom so the user can transition between scrolling down and up without having to slew the entire height of the pane. Or you could have buttons to scroll immediately to the beginning and end of the content, handy for users who don’t know about Ctrl-Home and Ctrl-End, saving them from making a long drag of the slider. MS Word includes buttons to execute the last Find or Goto, among other possibilities.
Split bar. On the subject of MS Word, MS Word and Excel scrollbars include a split control to allow you to divide the window into two panes. That would be handy for a lot of other applications, such as browsers and large lists and tables.
Expert activation. If you don’t want to clutter the scrollbar with more buttons and controls, consider providing expert shortcuts via meta keys. Ctrl-clicking an arrow button could scroll the user to the beginning and end of the content. Ctrl-clicking the track could instantly scroll to the corresponding position in the content, particularly useful if you’ve implemented Infoscroller. Ctrl-clicking the slider could pop open a mini dialog or text box to enter a page number, list item identifier, or Find criteria to jump to.
Left side scrollbar. There is some research suggesting we should usually be putting vertical scrollbar on the left side, rather than the right (see Kellener E, Barnes GM, & Lingard R (2001), Effects of scroll bar orientation and item justification, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting). Having the scrollbar position consistent with the content alignment means less average slew distances for faster scrollbar use. In the same vein, putting the scrollbar on the left in a browser would shorten the distance between the scrollbar and the Back button for faster navigation. However, the advent of the scrollwheel may have made this idea obsolete.
Great question. Please see RockScroll, which is now standard in Visual Studio 2013 Preview: http://www.hanselman.com/blog/IntroducingRockScroll.aspx
RockScroll in turn inspired MetalScroll:
which in turn inspired RockMargin.
Also, Jetbrains Resharper plug-in for Visual Studio puts a vertical affordance to the right of the scrollbar. The information is displayed as little horizontal bars of different colors. These bars indicate a piece of code that can be improved. Clicking on a bar scrolls the code page to bring the code in question into view:
Also, most file comparison software uses fancy scrollbars. See Scooter Software's Beyond Compare 3.0, which puts an "infoscroller"-like affordance separate from the scrollbar. The affordance on the left is draggable like a scrollbar. In addition, to reduce the need for horizontal scrolling, there is a bottom pane which puts the current line from the left pane on top and the current line from the right pane below. Moving the info-scroller allows the user to scroll both documents simultaneously, which makes "merging" changes between two versions of the same document MUCH easier. Please see:
WinMerge has a different, equally scrollable, left-pane that functions like a scrollbar and duplicates the existing scrollbars. http://winmerge.org/about/screenshots/filecmp.png
Finally, Google Chrome integrates search functionality (the "find bar") into the scroll bar.
And Greg Raiz came up with the ABC Scrollbar:
And Overlay Scrollbars which minimize the non-client area:
And a research, gaze-enhanced scrolling techniques.
I like the Google Wave scrollbar- it seems like they've reconciled scroll bars with Fitt's Law.
VS2008 seems to have a new feature that allows one to split a website into the source code and design aspects on the same page. This feature seems great, however it defaults to having the design part on the bottom half of the screen and the code part on the top half.
Unfortunately, my brain doesn't work this way and it ends up being more of a hassle than to just continue switching back and forth when needed like I've done in the past.
Is there a way to swap them so that the design part is on the top and the code part on the bottom? Most other tools in VS are drag and droppable, so I can't see why not, but I'm not finding the setting anywhere. I did a quick google search and found a way to make the split vertical, but thats not what I'm looking for. I'm just looking for the same horizontal split with the design part on top.
Thanks
Here's an alternative approach that may help. If it's a traditional .aspx page (one that has a codebehind), you can open both documents simultaneously. Then right click one in the tab area at the top and select New Horizontal Tab Group. You can manipulate it so that the design window is on top of the code window.
I would be very surprised if this possible, since I have never seen a window configuration that changes the vertical alignment of the Objects and Events drop-down-lists.
I could be wrong, though.
It does seem rather strange - in the xaml designer you can split the screen whichever way you want as there is a button to switch the position of the panes. The options for the html designer only seem to allow a vertical or horizontal split though, there isn't anything in there specifying whether to have code or design at the top, it does seem a little backwards as I imagine most people find it more natural to have the visual designer at the top with the code below.
I have this Win32 user-drawn tab control that is created as:
CONTROL "Tab1",IDC_TAB_CONT,"SysTabControl32",TCS_BOTTOM |
TCS_OWNERDRAWFIXED | NOT WS_VISIBLE,0,14,185,88
I'd like for this control to have its tabs resize as never to have to see the "sliding arrows":
Now, pretty much everything about this control works as expected, except for that fact that it won't respond to TabCtrl_SetItemSize. Try as I may, the size I get for the tabs when I get to draw them (in the DRAWITEMSTRUCT passed to WM_DRAWITEM) is always the size that fits the longest caption in them and never the size I've set with TabCtrl_SetItemSize.
However, in the TabCtrl_SetItemSize documentation, it says that:
[TabCtrl_SetItemSize] sets the width and height of tabs in a
fixed-width or owner-drawn tab
control.
The only way I've managed to have a decent resizing is by setting a dummy string of the desired length in it by sending the control a TCM_SETITEM message, and writing the desired text in it at draw time. This is rather inconvenient and not a particularly nice hack.
Is there anybody who would know
Why TabCtrl_SetItemSize isn't working as expected? and/or
How to set the tab size properly?
Many thanks,
joce.
Setting TCS_OWNERDRAWFIXED style is not enough, you have also to add TCS_FIXEDWIDTH style.
The minimum size of a tab is at least icon width + 3 if icon is present.
If you have icons (imageList attached to tabControl), you might get those "sliding arrows" even with fixed width (if there is less space available than: number of tabs*(icon width+3)