CODEWITHSUNDEEP
nativescript
relez
relez

Reputation: 790

Label text is being clipped in iOS

I have a drawer in my Dashboard page and every Label is being clipped, I have tried different things but no luck :(

This is my Drawer code:

<!-- >> sidedrawer-over-navigation-drawer -->
<dpg:DrawerPage.sideDrawer>
    <drawer:RadSideDrawer id="mainMenuDrawer" gesturesEnabled="true">
        <drawer:RadSideDrawer.drawerContent>
            <GridLayout rows="75, *" columns="300" class="mainMenuContent">
                <StackLayout row="0" verticalAlignment="middle" horizontalAlignment="center">
                    <Label text="Main Menu" class="mainMenuHeader" />
                </StackLayout>
                <lv:RadListView items="{{ menuItems }}" row="1" class="mainMenuItems">
                    <lv:RadListView.listViewLayout>
                        <lv:ListViewLinearLayout scrollDirection="Vertical"/>
                    </lv:RadListView.listViewLayout>
                    <lv:RadListView.itemTemplate>
                        <GridLayout rows="50" columns="50, *" class="mainMenuItems">
                            <Label class="fa mainMenuItemIcon" col="0" text="{{ icon | fonticon }}" horizontalAlignment="center" verticalAlignment="middle" />
                            <Label class="mainMenuItemLabel" col="1" text="{{ title }}" horizontalAlignment="left" verticalAlignment="middle" />
                        </GridLayout>
                    </lv:RadListView.itemTemplate>
                </lv:RadListView>
            </GridLayout>
        </drawer:RadSideDrawer.drawerContent>
    </drawer:RadSideDrawer>
</dpg:DrawerPage.sideDrawer>
<!-- << sidedrawer-over-navigation-drawer -->

In the image you will see what is going on.

Any idea what is going on?

Thanks!!!

enter image description here

Upvotes: 0

Views: 666

Answers (4)

Eddy Verbruggen
Eddy Verbruggen

Reputation: 3550

Always use <Label textWrap="true" to make those babies fit.

Upvotes: 2

MikeE
MikeE

Reputation: 1

Your alignment at the main menu is redundant, try to use vertical alignment instead and customize the size of columns of the GridLayout. Example: 

<GridLayout rows="50" columns="50, *" class="mainMenuItems">

set columns="(set column size) , (set column size) ".

Upvotes: 0

HHristov
HHristov

Reputation: 141

There is no verticalAlignment="middle". Its top, center, bottom or stretch. This may affect your labels. Also try removing the root GridLayout columns="300".

Upvotes: 0

JoshSommer
JoshSommer

Reputation: 2618

Try setting those labels to a width of a 100% or some width long enough to fit all your text. that will fix them truncating

Upvotes: 1

Related Questions