Center and right/left align items in a NativeScript Layout

nativescript
Andrew Puglionesi picture Andrew Puglionesi · Jul 6, 2018 · Viewed 9.7k times · Source

In the context of a NativeScript app, I've been struggling to find an efficient, non-hacky way to do what seems pretty simple: have one item in the center of a layout, and another item all the way to the right or left of the layout--something like the images in this question: Center and right align flexbox elements. The items should all be in a single row as they are there. (I've looked through those solutions, but I don't want to add a pseudo-element, and a lot of CSS just doesn't work with NativeScript.) Is there some kind of clean, canonical way to do this with the default layouts? In case this isn't "specific" enough, say I have a scenario like this:

<SomeLayout>
  <Label text="Center me"></Label>
  <Label text="Pull me to the right"></Label>
</SomeLayout>

The text properties of the labels describe what I'm looking for. Please test any suggestions or be sure that they work.

Answer

bhavin jalodara picture bhavin jalodara · Jul 7, 2018

you can use horizontalAlignment with GridLayout by applying same row number to both the labels.

<GridLayout rows="auto" columns="*">
  <Label row="0" horizontalAlignment="center" text="Center me" class="center"></Label>
  <Label row="0" horizontalAlignment="right" text="Pull me to the right" class="right"></Label>
</GridLayout>

you can also set horizontalAlignment property from CSS by using horizontal-align attribute.

.center{
    horizontal-align:center;
}
.right{
    horizontal-align:right;
}

main trick is that you have to give same row number to labels so that they overlap each other.

Related questions

repositories.cfg could not be loaded in Windows 10

while installing native-script i got repositories.cfg could not be loaded error , please help me debugging it. It would help me if you can give the way to download the file externally. The code i used was..... @powershell -NoProfile -ExecutionPolicy …

Read More
Difference between Xamarin and Telerik's native script

Xamarin Write the model in C# Write the views for each OS in their own native way Xamarin promises that the new functionality in libraries is added the same day Telerik Native script Write in javascript and call native script's …

Read More
Attempted to assign to readonly property even though same command works elsewhere?

I have a Javascript function (in an Angular 2 NativeScript based mobile app) which is triggered on a button press, it should hide the button and show an activity indicator in its place, carry out a Bluetooth scan, which when completed …

Read More