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’.
Related
I'm using a v-slider in a Vuetify context. The component has a message area that takes some space below the slider and makes it impossible to align the actual slider (the "line") in the vertical center to line up with other neighbouring components.
There seems to be a number of way to customize the message, but how do I get rid of that area completely? There will never be any messages to display there.
I've now resorted to adding a padding on top of the slider, align the components and then add a negative top padding on the group. But that seems just like a hack that I'd like to avoid.
Add the prop "hide-details" to the slider
<v-slider v-model="volume" label="Volume" hide-details></v-slider>
You can find all the possible props in the API-Section for the sliders.
Is it possible to create a UI controller that would look like a home screen? Or is there one already?
I am trying to make one using a Grid controller, but I am struggling with sizing - I could not find exact sizes for tiles, margins, only for their content, and it appears that margins and tile sizes change on over-scroll.
I would like to use this to display something like a picture album.
Your answer for photo album is WrapPanel.
One of the new controls in the Silverlight Toolkit is WrapPanel. It enables users to position child elements sequentially from left to right or top to bottom. When elements extend beyond the panel edge, they are positioned in the next row or column.
For more Refrence how to use it go here
Application requires more than one window (Lets call A,B,C). Each window has more than one view (table views, image views as well as web view). Lets say window A has three views (x, y,z) and window B has three views (d,e,f). Application needs to display images of different size on orientation change.
I have achieved the same using gesture event listener and looping through windows for views and replacing the view with new images. The problem I have is when we navigate from one window to other and the orientation changes, the loading of view after looping goes for a toss. Is there a better way to achieve the same ?
Is there a method in titanium like following code to replace a view ?
var self=Ti.UI.currentWindow
var newView=Ti.UI.createImageView({image:'abc.png'})
self.replace(self.children[1],newView )
Unfortunately there is now replace method.
You need to remove the whole view and add it again but this can cause a wrong layout if you have more than one view on a same level. The implementation then depends on the layout which was set (vertical, horizontal, composite etc).
For example in vertical layout removing an item and simply add a new one would remove your specified item but appends the new one at the end since you can't specify in which order it should be added.
If you have a composite layout you can specify absolute positions but adding a new view causes a higher zIndex for this view so that it will hide views that were previously added at the same/similar position.
Why not simply change the image link ?
var self = Ti.UI.currentWindow;
self.children[1].image = 'bcd.png';
Well you could always lock the orientation of your window. But this isnt exactly good practice (especially for iOS).
Generally orientation changes are handled pretty well if you define the width and height of your views to be percentages or Ti.UI.FILL, if you have a composite layout. Check that you are not giving the views absolute coordinates as this could cause layout problems. If you have a vertical or horizontal layout you usually don't have to worry about orientation change, unless you did not nest your views in a main container correctly.
Prasad,
If this is about just ensuring that the images look good on different orientations,you can make use of the different folders provided by Titanium in the android/images folder.You can just make different images for each of the orientations and device sizes.For IOS you can change just the images on orientation change as you are already doing.
https://wiki.appcelerator.org/display/guides/Using+density-specific+resources+on+Android
If you are concernced about the layout there are couple of things you can do:
1.Give all the height or width values in percentages.This way all elements will be re sized once the orientation changes automatically.
2.On each window open check if the orientation is vertical or horizontal by default and accordingly set the image attribute of the imageView.
Ti.UI.orientation
This property will give you the orientation of the window by default.Values of this property could be this
Ti.UI.PORTRAIT
Ti.UI.UPSIDE_PORTRAIT
Ti.UI.LANDSCAPE_LEFT
Ti.UI.LANDSCAPE_RIGHT
Use "if else" and accordingly set the images.
I'm creating a sample login screen to practice Auto Layout. In portrait mode, it looks like this.
However when I rotate to landspace mode, it looks like this.
Below are the constraints I have set in this layout.
I understand why this is happening. It is because I have a constraint for the User ID UILabel [ Vertical Space(196) ]. How can I position the UIlabel+UITextField set slightly below the horizontal center line of the screen when turned to Landscape?
I assume I can set maybe the middle label to Horizontal Center in Container and then have the other 2 labels positioned relative to that one. But what I'm looking for is a way to position them without the help of center positioning in container. I want them to position slightly below the horizontal center line. How can I do that?
Thank you.
I don't think there's any way to do that in IB, without using the center property -- you could make your views appear below the center by putting another label above User ID, but with no text in it, so it will be invisible. Center that one, and have all the others positioned relative to it.
select all controls and select Top space to superview
Now select only textfields and select Widths Equally
This should work. If not, then let me know i will send you sample code or screens of constraints.
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.