How can I allow scrolling in this Dojo/Dijit page:
http://www.olexe.com/html/DijitScrollTest.html
I might have 60 or 100 rows to display in the tabControl (id="topTabs").
I think there must be a property such as AllowScrolling but I cannot find it.
Or do I need to add a child control, and then turn on scrolling in the child control.
(If you could also point me to the Dijit doc where it is document, that would be appreciated. I have been hunting for over one hour for it).
In general scrolling is easily activated by setting the CSS style overflow to "auto". However, I have looked through your page a little and I have a few questions.
First, you add a TabContainer in the center region of the BorderContainer, but then you never add any tabs to that Container that I can see. TabContainers are usually populated with several ContentPanes to acts as different Tabs.
So if you want tabs, then I would add an additional child element in the form of a ContentPane that holds all the content, otherwise I would change the existing TabContainer into a ContentPane.
Either way, it is the ContentPane that should have the overflow: auto; attribute set to allow scrolling within that element.
the contents of TabContainer should scroll by default. Try looking at the declarative example in the docs and use ContentPane children with a title attribute for each.
Related
I need to be able to animate drag and drop in my vertical list. I used vuedraggable, wrapped my list in a transition-group and it all worked sweet. Until I fetch new data from the server. Now because of the introduction of transition-group for a split second the old data and the new data live together in the DOM causing the expansion of the list and pushing subsequent div down and back up.
This is kind of expected per the docs:
the DOM operations for insertion and/or removal will be executed
immediately on next frame (Note: this is a browser animation frame,
different from Vue’s concept of nextTick).
Regardless of being able to drag and drop the element, if we were to fade in/fade out the new/old elements they will co-habitate for the time of the animation, which is not great as seen in this pen
Anyway to fade out, change the data, then fade in the new one, while maintaining the height of the list?
Note that without fade the problem is still obvious:
Pen of my issue: click the switch data button to see the issue.
Turns out it's pretty know issue. By reading through this thread and toying with this example, i was able to achieve something to my liking by using:
list-leave-active {
display: none;
}
Resulting Pen
A css fix may be to wrap the contents within a box of some height and set overflow hidden.
So, even when new elements co-exist the jump in scrollbar can be avoided.
I have a ComboBox with thousands of items bound to it.
The problem I'm facing is when I run the app on a tablet the scrollviewer's scrollbar is very thin hence I cannot hold and drag it and can only swipe to move inside the ComboBox.
Hence I was wondering is there a way to change the style template of the ScrollViewer inside the ComboBox inorder to make the ScrollBar width larger.
You'll have to dig in to the style template and change some hard set properties for Width / Height that sit on the parts like the Thumb that you will find on the default style template. You can extract a copy via selecting a Scrollbar -> Right Click -> Edit Style -> Edit a copy. Save the copy wherever you need it, like a resource dictionary if you plan to use it multiple places or to the instance where you need it.
(Note: Generally folks start at the ScrollViewer level, then find a Scrollbar in it, and apply the style changes there so they can apply the style directly to ScrollViewers)
Once you have your changes made to the control template you then need to pass them to your ComboBox. If you only need it for the one ComboBox, You can just put the style template in it's Resources and remove the x:Key name you gave it so it hits the instance of the TargetType via inheritance for just that ComboBox.
However if you want it to hit EVERY ComboBox, then you'll need to edit the ComboBox style template and add a reference to the Style template you just made to it's embedded ScrollViewer.
You'll find long tutorials out there for stuff like WPF/Silverlight that pretty much the same concept but little nuance differences in the templates and syntax of properties.
Hope this helps, give it a shot and if you get stuck come on back and we'll get you sorted.
How can I create horizontal layout with fullscreen scrollbar? Like "Store" app in Windows 8. I use WinJS
Try this, flexbox:
http://msdn.microsoft.com/en-us/library/ie/hh673531(v=vs.85).aspx
There is a property called ‘flex-direction’which allows you to change a row to a column, i.e. the elements would be aligned vertically. It is also possible to reverse the direction, i.e. the last element in the container would appear first in the list. This property can take the values – ‘row’, ‘row-reverse’, ‘column’ and ‘column-reverse’.
I am having trouble trying to get a jquery ui tab panel's height to grow with floating divs within the panel.
the divs have specific data returning to these divs and I need them to float left and right to save ui real estate.
Does anyone know how i can fix this?
Actually, this is a well-known css issue. A discussion is here:
http://www.quirksmode.org/css/clearing.html
To summarize the article, any <divs> that you wish to function as both a tab pane and a float container should have these styles added to them either in your <style> or css <link> files:
overflow: auto;
width: 100%
This isn't a bug. It's intentional. The floating div literally lifts out of the container, and the container will not be aware of the floating div. At least, that was the goal.
You should do a search on here for "clearing floats" or other related css rules, because using the above will cause issues with certain browsers (in short: 'take care to test this, all the same').
As I understand it, a Panel isn't meant to have any visible "chrome." The StackPanel, Grid and Canvas don't have any visible elements (with the exception of the gridlines, which they say are only for debugging layout.)
In my example, I am going to create a Custom Panel that uses Attached Properties to lay out its children controls. However, I want my Custom Panel to present a visible "grid" of sorts in the background. The look of the grid (sizing and positioning) will depend on the size and position of the child elements.
What are some of the ways to achieve this? Being very new to Silverlight and XAML in general, my first guess was to create a Custom Control which includes my custom panel for layout.
I think I'll be able to figure out the specific code, but I need to be pointed in the right direction in terms of what building blocks are appropriate for this scenario.
You are correct that custom Panels cannot show any extra chrome; they can only display their Children (Grid being an exception).
To do what you want to do, you could create a custom Panel which just adds extra Children to display the chrome. This would not be a good design though (since users of the Panel would see these extra items in the Children collection).
The best idea is to do what you said: create a custom Control that exposes a Children property. This control could internally use a private custom Panel to lay out these elements (e.g. TabControl uses a special TabPanel for laying out the tabs). In the Controls default template, you might want to use TemplateBinding on the Panels' Children property to your Control's Children property.
Panel can add Adorners to its children, read this article about adorners: http://msdn.microsoft.com/en-us/library/ms743737.aspx