How can I set button width to wrap content?
Default html button wraps content, but default sencha button use all width of parent.
Next question. If button width wraps content, how to align button?
Thanks
As far as I know, there is no Ext.Button config like textWrap: true in Sencha Touch 2. But you can try a work-around. Normally you can use width and height config to set absolute size of the button, and minWidth, maxWidth or minHeight, maxHeight for the lowerbound and upperbound of width and height, you should combine them with CSS styles of your text.
About alignment: Ext.Button is just like other Ext components, if it belongs to a parent container, then the config centered:true should align it to the center of the parent container.
Related
I am trying to set a fixed height for a scroll container. The problem is, that I don't know the height from the beginning. I have to wait for the backend to tell me and after that the height should stay fix.
I already tried the value auto for the height property of the scroll container. This way the scroll container takes the height needed, but I doesn't stay like that.
Any time the screen size changes, the container takes the height to it's content. So it's not scrollable anymore.
Any ideas? Thanks for your help!
Wait for the server response and set the scrollcontainer height in success handler:
oModel.read("/Entity", {
success: function (oResponse) {
this.getView().byId("myScrollContainer").setHeight(oResponse.heightFromBackend + "px");
}.bind(this)
I am trying to resize elements in canavas using konva js plugin concept. But the resized width and height are not saved to database. My actual height width are not being replaced by resized height widths for any of the elements whether a image,layer,stage
Do you change sizes with Konva.Transformer (https://konvajs.org/docs/vue/Transformer.html)?
If so - Transformer tool doesn't change width and height directly. Instead, it is changing scaleX and scaleY of a node. So you just need to save that attrs too into a database or change width/height to match new scaling:
const newWidth = rectangle.width() * rectangle.scaleX();
// set new width
rectangle.width(newWidth);
// reset scale:
rectangle.scaleX(1);
I want to create a Ti.UI.TextArea object which would dynamically adjust its height to content but would have default height set (if no content). In Appcelerator if you don't specify height then it will automatically adjust its size to content but if there is no text then its size will be similar to textField. This is to small for me.
If you specify height property, then TextArea height won't change even if text will be longer than editable region.
I would like to have something like this:
var textArea = Ti.UI.createTextArea({
minHeight: 30,
});
or like this:
var textArea = Ti.UI.createTextArea({
minLines: 3,
});
I am looking for solution both for Android and iOS.
Is there any workaround for that?
You can change the height of the textField dynamically.
Add onChange event handler and change the height of the textField dynamically according to the number of lines in the text field.
Starting with 7.5.0.GA you can use maxLines on Android to be able to extend the TextArea to when pressing return. For iOS you have to create a work-around since there is no parity at the moment.
I have a button that is 40x40, now this button has an active state where the container of the button extends and menu items come in. The active state has no specific width to it and should extend to accommodate for the content (something like width: auto; in CSS).
Is there a way how I could use animate this width change using Animated?
Thanks in advance
Below is the markup i am using to render an EXT.NET container containing a collapsible panel(west) and another panel containing my content (center).
how do i make it resizable when i resize my browser?
currently its not resizing as i specified width and height and if i do not specify Width and Height, it does not show me anything, it shows blank.
#Html.X().Container().Layout(LayoutType.Border).Width(500).Height(300).Items(
Html.X().Panel()
.ID("Panel1")
.Region(Region.West)
.AutoDoLayout(true)
.Collapsible(true).Border(true).Title("West Panel").Items(
Html.X().Label().Text("Item 1"),
Html.X().Label().Text("Item 2")
),
Html.X().Panel().ID("Panel2").Region(Region.Center).Title("Center")
)
EDIT : I Cannot use ViewPort as its distracting my layout
I am not ure container support this but viewport.
Use instead of the container an viewport
#Html.X().Viewport().Layout(LayoutType.Border).Items(
Html.X().Panel()
.ID("Panel1")
.Region(Region.West)
.AutoDoLayout(true)
.Collapsible(true).Border(true).Title("West Panel").Items(
Html.X().Label().Text("Item 1"),
Html.X().Label().Text("Item 2")
),
Html.X().Panel().ID("Panel2").Region(Region.Center).Title("Center")
)
another solution I can imagine ,to get the resize event and set the width and height of container with the appropriate values