Troubleshooting problem with list rendering in a Nativescript-vue GridLayout

As a newcomer to nativescript, I am utilizing GridLayout in an attempt to optimize layout nesting for better performance. In my template, I have an image followed by a vertical list of four items next to it. However, only the first item on the list is visible, with the others extending beyond the bounds of the GridLayout. How can I ensure that all list items appear below one another?

Here is my template:

<GridLayout width="100%" height="175px" rows="auto,auto,auto,auto" columns="auto,*,20" backgroundColor="green" style="padding:10px 10px;">
    <Image row="0" column="0" src="res://logo" loadMode="async" stretch="aspectFit" style="background-color:red; width:175px; height:175px; border-radius:10px; margin:0px 20px 0px 0px;"></Image>
    <Label text="Pacome1" fontSize="18" row="0" column="1" class="c_light" style="margin:5px 0px;"></Label>
    <Label text="Pacome2" fontSize="18" row="1" column="1" class="c_light" style="margin:5px 0px;"></Label>
    <Label text="Pacome3" fontSize="18" row="2" column="1" class="c_light" style="margin:5px 0px;"></Label>
    <Label text="Pacome4" fontSize="18" row="3" column="1" class="c_light" style="margin:5px 0px;"></Label>
    <Label :text="'fa-star' | fonticon" row="0" col="2" class="fa c_light fs_small" style="margin:10px 0px;"></Label>
</GridLayout>
javascriptvue.jsnativescript

Answer №1

Just a few points to consider:

  1. The final Label should have "column" instead of just "col."
  2. When using the grid layout, setting auto in the rows/columns field means that the component will adjust its size according to its dimensions. Using * indicates that the item will take up the remaining available space. You can also specify multiples like 2* to allocate 2 times more space than other items.
    1. If the components are exceeding the bounds of the GridLayout, it could be due to the total height of all items within the GridLayout surpassing the height of the GridLayout itself. Consider assigning specific heights to your labels or expanding the height of the GridLayout.

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

What steps should I follow to ensure that the processData function waits for the data returned by the getData function in Angular?

After calling the getData function, each object is stored in an array and returned. Now I need the processData function to await these results from getData and then further process them. However, when I try to console.log(cleaningData), I don't see an ...

javascriptangularasynchronousobservable

Implementing translation functionality within an AngularJs controller

Utilizing angular translate for translating certain words in the controller, with translation stored in json files within the html. // LABELS var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "Septe ...

javascriptangularjstranslationangular-translate

Looking to utilize space-separated values in AG-Grid filter for returning individual matches

I've been assigned the task of transitioning UI-Grids to AG-Grid. I want to enable users to filter columns using a space delimited string such as "1 4 23 88", which should return all rows with values 1, 4, 23, or 88 in that column. While AG-Grid has t ...

vue.jsag-gridag-grid-vue

Convert the assignment of a.x=3 to the setter method a->setX(3) using the provided script

As I transition a portion of my code from JS to C++, I find the need to refactor direct instance variable assignments into setter methods: a.xx=3; to a->setXx(3); along with getter methods: ...a.xx... to ...a->getXx()... Currently, I am utilizing ...

javascriptc++regexnode.jsshelljs

The close button is not functioning properly

I created a script to close my div element by clicking on the 'x' icon, but instead of deleting the div only, the whole page gets deleted. I'm not sure where I went wrong, can anyone help me? HTML <div class="note"> <span id ...

javascriptjqueryhtmlcss

How can I retrieve the text from two DIV elements simultaneously using JS/jQuery?

Is there a way to loop through all <TD> elements in order to store the Title and Link from each element into separate variables using JavaScript / jQuery? Sample HTML: <td> <div class="class_Title row border-bottom" name="name_Title" i ...

javascriptjqueryhtml

When constructing a file directory URL, it is important to utilize the forward slash "/" in the filename

As I am creating a URL, the process involves taking the filename and using it to create a folder with that name. However, an issue arises if the name contains "/", as it causes the URL to break and creates an undesired location. For example: var fileDir ...

javascriptjquery

Is it possible to retrieve the chosen options text from a select menu using jQuery with the feature of "Dynamic option values"?

I need assistance with displaying dynamic drop-down values where only the id values are presently available. What would be the best approach to achieve this? <div class="form-group"> <select class="wp-form-control" id="joblocation" name="jobl ...

javascriptphpjqueryajax

Transform the selected component in Material-UI from being a function to a class

Hello, I am currently learning about React and I have started using the select button from material-ui. The code I found on the material ui page is for a functional component, but I am more comfortable with class components. Here is the code snippet provid ...

javascriptreactjsreact-routermaterial-ui

The issue with the material design checkbox change functionality not functioning as expected

Currently, I am attempting to dynamically set the state of checkboxes to either true or false. The following code snippet demonstrates what I have tried so far: for(var i = 0; i < bookmakers.length; i++) { $('#' + bookmakers[i].id + &apos ...

javascriptjquerycheckboxmaterial-design

Does CSS delayed visibility transition fail to activate JavaScript transitionend event for elements' visibility changes?

My current approach involves using a clever method to delay the transition of visibility, in combination with opacity. So far, everything is working smoothly: <body> <button>run</button> <div class="box"></div> & ...

javascriptcsscss-transitions

Nested v-for problem confusion

I am encountering an issue with my code and I'm wondering if anyone can help me troubleshoot it. The problem is that whenever I click on the content of one panel, all panel contents with the same index expand or collapse instead of just the one I clic ...

javascriptvue.jsvuetifyjs3

Tips for retrieving the text value on keyboard enter press without triggering form submission

I am currently working on a feature where hitting the Enter key in a textbox should not automatically submit the form. The textbox is located within a form: @Html.TextBoxFor(model => model.ID, new { @class = "form-control input-sm", placehold ...

javascriptjqueryasp.net-mvcdom-events

Presenting a video from local storage (Vue)

Currently, I'm tackling a Vue project that requires displaying a video from a local directory. <video width="320" controls src="internal_path.mp4" type="video/mp4" height="240" autoplay muted loop> I've implemented the code snippet to dis ...

vue.jsvuejs2local-storagevue-component

Looking to locate or track duplicate values within a multi-dimensional array?

In a multidimensional array, I am looking to detect and count duplicates. If duplicates are found, an alert should be triggered. Arr =[[2,"sk"],[3,"df"],[7,"uz"],[3,"df"],[7,"gh"]] Suggestions: One way to ...

javascriptnode.jsarraysjsonreactjs

What is the proper way to write an xpath expression in Selenium with C# to retrieve a date from a text node?

<dd> ::before <strong>Test Date:</strong> " 7/6/20 - Monday" ::after </dd> Here is a sample snippet of HTML code. I am looking to find the date that comes after the text "Test Date:". As there are multiple dates on the p ...

javascriptc#seleniumselenium-webdriverxpath

PHP: AJAX request triggers 500 Internal Server Error

I currently have a dynamic MySQL database that receives regular updates from an AI-generated text. My goal is to display this continuously updating text on a web platform. In order to achieve this, we conducted a simple test as shown below: <head> ...

javascriptphpmysqlajaxpdo

Challenges Associated with Promises in JavaScript

I'm having trouble with the last line of code in my program and I need some help figuring out how to fix it. Specifically, I know that the second "then" statement needs to return resolve() but I'm not sure how to go about implementing this. Any t ...

javascriptecmascript-6es6-promise

Synchronization-free API and callback functions

I am in need of utilizing an asynchronous service. My current approach involves sending data to this service using PHP and CURL, as well as receiving data from a URL provided by the service. How can I effectively respond or wait for feedback from this serv ...

javascriptphpajaxcurlasynchronous

Develop a personalized event using JavaScript and activate it

I have encountered a problem with a Google ad that expands on click and closes when the close button is hit. However, due to changing conditions, I now need it to expand first and then automatically close after a certain time. Additionally, every time it e ...

javascriptjqueryhtml