13

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.

Andrew Puglionesi
  • 945
  • 1
  • 11
  • 16
  • 1
    what if there is no space to set `center me` and `pull me to the right` in one single line? – bhavin jalodara Jul 06 '18 at 19:03
  • @bhavinjalodara just assume there is definitely enough space. So the text might just be "c" and "r" for the labels, and the font size very small, guaranteeing that space won't be an issue – Andrew Puglionesi Jul 06 '18 at 19:13
  • Is there a particular reason you don't just want to use Flexbox to achieve this? Make the container flex, center the first label and add ``margin-left: auto;`` to the second label fill in the extra space with margin. – CodeSpent Jul 06 '18 at 20:22
  • 2
    @CodeSpent I can easily do this with [HTML/CSS](https://jsfiddle.net/thm0er28/1/). However, it won't work with NativeScript's FlexboxLayout (even with `display: flex`, which isn't necessary in a FlexboxLayout). They're limited in what they can do because it has to have correlates in iOS and Android – Andrew Puglionesi Jul 06 '18 at 21:46
  • Actually, I was in a rush and didn't check that against the goal here; I forgot to center the first item... but the margin tricks fail in NativeScript anyway – Andrew Puglionesi Jul 06 '18 at 22:04

2 Answers2

29

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.

bhavin jalodara
  • 1,470
  • 9
  • 12
0

There are pre-defined classes in NativeScript that can handle left/center/right alignement. In order to align right you could use "text-right" class. There is more here https://v7.docs.nativescript.org/ui/theme#class-names

It is for V7 but working for V8 as well

luk
  • 205
  • 3
  • 14