I have Grid Layout which has three rows and I am using javascript to adjust height on the press of the button.
Code behind (xml):
<GridLayout columns="*" id="grid-id" rows="300, 40, auto">
....
....
</GridLayout>
Javascript:
var newHeight = 520;
myView.getViewById("grid-id").rows= newHeight + ", 40, auto";
Is it possible to animate this changes in height?
Related
Well going through {N} tutorial I want to achieve this :
But I have trouble showing this delete button.
There is no problem with the image it shows well somewhere else and I also tried putting a Label instead but same result.
Rad Listview component :
<RadListView row="1" [items]="groceryList"
swipeActions="true" (itemSwipeProgressStarted)="onSwipeCellStarted($event)">
<ng-template let-item="item">
<Label [text]="item.name" class="p-15"></Label>
</ng-template>
<GridLayout *tkListItemSwipeTemplate columns="*, auto">
<StackLayout id="delete-view" col="1" (tap)="delete($event)" class="delete-view">
<Image src="~/images/delete.png" ></Image>
</StackLayout>
</GridLayout>
</RadListView>
CSS :
.delete-view {
background-color: #CB1D00;
padding: 20;
}
.delete-view Image {
color: white;
height: 25;
}
TS
onSwipeCellStarted(args: ListViewEventData) {
var swipeLimits = args.data.swipeLimits;
var swipeView = args.object;
var rightItem = swipeView.getViewById<View>("delete-view");
swipeLimits.right = rightItem.getMeasuredWidth();
swipeLimits.left = 0;
swipeLimits.threshold = rightItem.getMeasuredWidth() / 2;
}
delete(args: ListViewEventData) {
let grocery = <Grocery>args.object.bindingContext;
this.groceryService.delete(grocery.id)
.subscribe(() => {
let index = this.groceryList.indexOf(grocery);
this.groceryList.splice(index, 1);
});
}
Deletion feature works well but all what i am getting when swiping is this :
What am I getting wrong here ?
I spent several days earlier this month wrestling with similar issues with RadListView, especially on iOS. It seems to defy logic. I ended up using a negative padding to get to where I could see my labels and icons. If that doesn't help, try removing height: from your css.
I have this simple layout markup :
<StackLayout orientation="horizontal" #myStack>
<StackLayout width="300" backgroundColor="red">
</StackLayout>
<StackLayout width="300" backgroundColor="green">
</StackLayout>
</StackLayout>
As you can see , both are same width of 300:
Let's see this :
Notice that green is also 300 but we only see a part of it since 300+300 > screen size.
Ok so let's try to animate #myStack (!!) to the left , in order to see the left green :
ngOnInit(): void {
setTimeout(() => {
this.myStack.nativeElement.animate({
translate: { x: -300, y: 0 },
duration: 2000,
curve: enums.AnimationCurve.easeIn
});
},1000)
}
Question:
What is this white area on the right ? there should be also a green section there
Basically this is the situation :
So i'm expecting the green from the right to be scrolled to the left , i'm basically trying to move #myStack left.
How can I make the green area slide from the right ?
PLAYGROUND
Copy/paste this answer so that the community can see the provided solutions:
#RoyiNamir this is expected behavior.
What is happening is that by default the root layout will have an effective width (and height) as the screen size.
You need to explicitly create the wider container if you want to have an effective width larger than the screen width.
There are several approaches on how to achieve that.
- use container with fixed width - demo Playground here
<GridLayout rows="auto, *" columns="600" backgroundColor="lightgray">
<Button row="0" text="animate" (tap)="animate()"></Button>
<StackLayout row="1" orientation="horizontal" #myStack>
<StackLayout width="300" backgroundColor="red">
<Label text="Label"></Label>
</StackLayout>
<StackLayout width="300" backgroundColor="green">
<Label text="Label"></Label>
</StackLayout>
</StackLayout>
</GridLayout>
Note that our container GridLayout has columns set to 600.
Another option is instead of creating fixed size container to use ScrollView (which will measure its children so the children should have predefined size - in your case width="300") - demo Playground here
In the example above the container element is not needed (used just to create the animate Button).
The ScrollView will measure its children (300 + 300 = 600 width) and will take the space needed.
I am trying to create a border-radius and border-color around a StackLayout but for some reason the styles doesn't get applied... I am using the Nativescript core-light theme, not sure if that can override my inline styles? Any idea what i'm doing wrong?
my code:
<StackLayout borderRadius="5px" borderColor="blue">
<Label class="body" [text]="'Description: ' + product.Description"></Label>
<Label class="body" [text]="'POS Description: ' + product.POSDescription"></Label>
<Label class="body" [text]="'POS price: R' + product.POSPrice"></Label>
<Label class="body" [text]="'Stock On Hand: ' + product.StockOnHand"></Label>
</StackLayout>
You need to set explicitly borderWidth and your code will work.
e.g.
<StackLayout borderRadius borderWidth="2" borderRadius="15" borderColor="blue">
Notice that I am using DPs (device independent pixels) instead of px which in the mobile world with different screen densities and resolutions should be the better approach.
You can also use CSS for your borders
e.g.
.borders {
border-width: 2;
border-color: red;
border-radius: 20;
}
How can I maintain the ratio of the space occupied by the components on the screen when the screen resizes.
I have the code that looks something like as written below,
where the size of the webview1 is reduced while size if webview2 is increased on screen readjustment.
I want that both the webviews occupy equal amount of space on the screen post screen readjustment.
Content = new StackLayout
{
Spacing = 0,
Padding = 0,
Children = {
wewbview1,
new StackLayout
{
BackgroundColor=Color.FromHex("#000033"),
Padding=2,
Children=
{
webview2
},
VerticalOptions = LayoutOptions.FillAndExpand
},
txt_Search
}
};
I would use an AbsoluteLayout to embed the two WebViews as you can than control the height ratio as a percentage and embed that into a StackLayout to bundle in your "text_search" at that bottom.
In the following example, AFTER removing the height of the "txt_Search" (I'm using a BoxView as a placeholder), the top web view gets 40% of the remaining space an the second web view gets 60%. Flip that to portrait and everything resizes correctly and maintains the 40/60 split after removing the space required for the "text_search".
Note: I did it in Xamarin.Forms XAML, but it is a simple conversion to code.
<StackLayout VerticalOptions="FillAndExpand">
<AbsoluteLayout
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<!--Top WebView-->
<BoxView
Color="Silver"
AbsoluteLayout.LayoutBounds="0, 0, 1, 0.4"
AbsoluteLayout.LayoutFlags="All" />
<!--Bottom WebView-->
<BoxView
Color="Maroon"
AbsoluteLayout.LayoutBounds="1, 1, 1, 0.6"
AbsoluteLayout.LayoutFlags="All" />
</AbsoluteLayout>
<!--Search txt_Search-->
<BoxView
Color="Green"
HeightRequest="50" />
</StackLayout>
I'm trying to display a small text (new messages count) over icon in toolbar button, something like Chrome and Opera extensions have with badge over the toolbar icons. Text should not cover the whole icon, it should be at the bottom so the user can still see main part of the icon and recognize what extension it is. How can I do this?
You can see what I want on this example image from Chrome:
I tried with description, span and div inside stack element but I couldn't get none of them to position at the bottom. Description and div always display text at the center, while span displays it on the right side of the icon making the entire button wider.
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton class="toolbarbutton-1">
<stack>
<image></image>
<description right="0" bottom="0" value="4"></description>
<!-- <html:div right="0" bottom="0">5</html:div> -->
</stack>
</toolbarbutton>
</toolbarpalette>
I had some time to waste while waiting for rain to stop in Formula 1, so I made this work with canvas:
UPDATED: Previous method was flawed when user would remove the icon from the toolbar, updated method is more robust and with less code.
XUL
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml">
<hbox hidden="true">
<html:canvas id="toolbar_button_canvas" width="24" height="24"></html:canvas>
</hbox>
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="toolbar_button" class="toolbarbutton-1" />
</toolbarpalette>
</overlay>
CSS
#toolbar_button {
list-style-image:url("chrome://your_extension/skin/icon_024.png");
}
toolbar[iconsize="small"] #toolbar_button {
list-style-image:url("chrome://your_extension/skin/icon_016.png");
}
JavaScript
show_status: function(display_text)
{
var btn = document.getElementById("toolbar_button");
var canvas = document.getElementById("toolbar_button_canvas");
var img_src = window.getComputedStyle(btn).listStyleImage.replace(/^url\("(chrome:\/\/your_extension\/skin\/icon_0\d{2}.png)"\)$/, "$1"); // get image path
var csize = img_src.replace(/^chrome:\/\/your_extension\/skin\/icon_0(\d{2})\.png$/, "$1"); // get image size
canvas.setAttribute("width", csize);
canvas.setAttribute("height", csize);
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function()
{
ctx.textBaseline = "top";
ctx.font = "bold 9px sans-serif"; // has to go before measureText
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);
if (display_text !== "")
{
var w = ctx.measureText(display_text).width;
var h = 7; // 9 = font height
var rp = ((canvas.width - 4) > w) ? 2 : 1; // right padding = 2, or 1 if text is wider
var x = canvas.width - w - rp;
var y = canvas.height - h - 1; // 1 = bottom padding
ctx.fillStyle = "#f00"; // background color
ctx.fillRect(x-rp, y-1, w+rp+rp, h+2);
ctx.fillStyle = "#fff"; // text color
ctx.fillText(display_text, x, y);
//ctx.strokeText(display_text, x, y);
}
btn.image = canvas.toDataURL("image/png", ""); // set new toolbar image
};
img.src = img_src;
}
my variant with html:div
P.S. you can also try play with z-index
How it's looks http://f3.s.qip.ru/fTUvr2Cj.jpg
XUL
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml">
<toolbar id="nav-bar">
<hbox>
<html:div style="color: #000000;
font-size: 10px;
font-weight: bold;
margin-right: 10px;
margin-top: 16px;
position: fixed;
right: 0;">5</html:div>
<toolbarbutton insertafter="search-container" type="menu">
<menupopup>
<menuitem class="menuitem-iconic" label="&count;"></menuitem>
<menuitem class="menuitem-iconic" label="&size;"></menuitem>
<menuitem class="menuitem-iconic" label="&time;"></menuitem>
<menuseparator></menuseparator>
<menuitem class="menuitem-iconic" label="&settings;"></menuitem>
</menupopup>
</toolbarbutton>
</hbox>
</toolbar>
</overlay>
I just used the libraries from browser-action-jplib
And it worked fine on my simple addons
If you use the library, you may got some problems with AMO-review
It can be solved by the issue