NativeScript GridLayout not rendering as expected

Issue with NativeScript Screen Layout

I have been attempting to design a screen in NativeScript, but I am encountering some complications. Initially, I aimed to replicate the following screen:

https://i.sstatic.net/tfa7w.png

Despite following the recommendations and closely adhering to the documentation, I was unable to achieve the desired outcome. Instead, this is the screen I ended up with:

https://i.sstatic.net/eePwB.png

As you can see, the discrepancy is quite significant. Here is the XML code I used:

<Page
    navigatingTo="onNavigatingTo"  
    xmlns="http://schemas.nativescript.org/tns.xsd">

    <ActionBar class="action-bar customActionBar">
        <NavigationButton ios:visibility="collapsed" icon="res://menu" tap="onDrawerButtonTap"></NavigationButton>
        <ActionItem icon="res://navigation/menu" 
            android:visibility="collapsed" 
            tap="onDrawerButtonTap"
            ios.position="left">
        </ActionItem>
        <Label class="action-bar-title" text="Settings"></Label>
    </ActionBar>

    <GridLayout columns="2*, auto, auto" rows="75, auto, auto" width="100%" height="100%" backgroundColor="lightgray" >
    <Label text="Notifications" row="0" col="0"/>
    <Label text="Push" row="0" col="1" />
    <Label text="Email" row="0" col="2" />
<Label text="Messages" row="1" col="0"/>
<Switch checked="true" (checkedChange)="onCheckedChange($event)" class="m-15" row="1" col="1"></Switch>
 <Switch checked="true" (checkedChange)="onCheckedChange($event)" class="m-15" row="1" col="2"></Switch>
  </GridLayout>
</Page>


After adjusting various parameters, the layout still fails to meet the desired specifications. It is evident that I am missing something crucial in my implementation. Any assistance or guidance you can provide would be greatly appreciated.

Thank you in advance.

Regards, John

Answer №1

Try experimenting with something similar to

columns="4*, *, *"

and see if it produces the desired outcome. After that, you can adjust the css to include padding and centering for the columns.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize dynamic CSS application within an Angular application

In my Angular application, I dynamically load URLs inside an iframe and want to apply custom.css to the loaded URL once it's inside the iframe. I attempted using ng-init with angular-css-injector function in the iframe, but the CSS is not being applie ...

Center navigation bar text with the class `.justify-content-center`:

Can someone explain why, when I add the class justify-content-center to my Navbar in Bootstrap, the text remains in the left position? https://i.sstatic.net/8x0Yc.png I came across an instruction in the Bootstrap documentation stating that after adding t ...

Is there a combination of 'auto' and 'none' values in any CSS properties?

Is it safe to assume that if a property is set to auto, it cannot have the value of none, and vice versa? Or if a property has none, can it not have auto as well? I understand that these values have distinct meanings, but I am curious if this concept has ...

What causes the unexpected outcome when applying theme overrides in Mui V5?

I am looking to adjust the border radius of all input fields in my project. Specifically, I would like the TextField component to have a border radius of https://i.stack.imgur.com/ULEGj.png instead of https://i.stack.imgur.com/NWmUe.png. According to the M ...

Protruding button on the surface of the form

I'm struggling with a form layout issue. Here's what it looks like: https://i.sstatic.net/arfJQ.png Removing the mb-3 class doesn't solve the problem, it just removes the spaces between the inputs. How can I make sure the button remains in ...

Enhance the Search Box with a Vibrant Glow Effect When in Use

I need help adding a glow effect color around a search field when a user clicks on it to type. I want the border to have a shadow and the glow effect to be orange. I have included the CSS below, but I'm unsure of what to change or add. Any assistance ...

Ways to apply a border-bottom to tr elements without affecting td elements

Is there a way to add a bottom border to <tr> elements without affecting <td> cells that have no border? I attempted the following approach, but setting border: 0 for <td> overrides the border for all <tr> elements as well, leaving ...

Switch effortlessly between one animation and another with Angular.js

I have two animations named "prev" and "next". Upon clicking the prev button, the "prev" animation should play. Similarly, when you click on the "next" button, the "next" animation should be triggered. I am using ng-class to achieve this behavior. How can ...

Adding borders to div elements for mobile display

Almost done with my website homepage, but I'm noticing some pesky borders/outlines on mobile devices. This issue doesn't seem to pop up on computers, so you'll need an iPhone, tablet, or smartphone to see what I'm talking about. Check o ...

The <span> element stubbornly resists aligning inline within a flexbox container

Within a flexbox a element, I have a div that contains a span with the class .time-pretext: <a class="option-container option-edit-time" href="#"> <div class="option-icon"><canvas id="time-canvas" width="128" height="128"></canvas&g ...

Combining ng-repeat with the float property set to left

I am attempting to create two rows of divs using ng-repeat. Each div is styled with a float: left attribute, and at the end, I add a clearing div with clear: both. <div class="interval" ng-repeat="interval in intervals"> <div class="text-cen ...

Using CSS3 translate will result in children becoming relatively positioned

I am facing an issue with a sidebar that contains 2 divs. <div class="sectionsContainer clearfix"><-- Sidebar --> <div class="leftSection pull-left"> <p>Maor</p> </div> <div class="rightSection pu ...

Ways to recover HTML elements that have been eliminated by jQuery's remove

$(document).ready(function() { $('#remove').click(function() { $('.test').remove(); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test-wra ...

Moving the layout container towards the left: a quick guide

I am currently attempting to display the legend contents in a horizontal alignment within the layout container. The issue is that while the layout containing the legend aligns horizontally as desired, it extends beyond the screen border. I do not want the ...

Display website content with a Bootstrap modal popup

When using the bootstrap modal popup, it's important to ensure that the content displayed does not already exist on the page. The issue of images from the page appearing on the popup is demonstrated in the image linked below. Can someone provide guida ...

Tips for implementing a single function across multiple HTML classes using JavaScript

For the past few days, I've been struggling with a JavaScript issue as a newcomer to the language. $(document).on('click', '.content-click', function(){ $(".content-click span").toggleClass("clicked"), $(".content-view") ...

Conceal the parent div from its sibling within the same parent container

My goal is to conceal a parent component from its child element. I attempted to achieve this by using the parent component as a background while adding additional backgrounds to the child elements for overriding purposes. However, this method did not work ...

What is the best way to deactivate div elements once an overlay has been applied to them?

My goal is to place an overlay on my form to prevent users from accessing the content. Even though I have added an overlay, users can still interact with input fields. How can I prevent that? .overlay { background: rgba(0, 0, 0, .75); text-align: ce ...

Creating a customizable Sass Mixin for animation keyframes that incorporates various stages and the transform property

My goal is to generate the standard CSS using a SASS Mixin for efficiency. STANDARD CSS @-webkit-keyframes crank-up { 100% { -webkit-transform: rotate(360deg);} } @-moz-keyframes crank-up { 100% { -moz-transform: rotate(360deg);} } @-o-keyframes cran ...

Ways to prioritize HTML5/CSS3 navigation menu above the content

I am attempting to position my navigation menu on top of the content. Despite using z-index and overflow = visible, the desired effect is not achieved. I want to avoid setting the position relative as it will push the content downwards. Simply put, I want ...