Adjusting the height of an Ionic list item when the text overflows is not functioning properly

Snippet of Code:

<ion-header-bar align-title="center" class="bar-positive">
    <div class="button button-clear" ng-click="closeGlobalTaskModal()">Cancel</div>
    <h1 class="title">Add Global Task</h1>
    <div class="button button-clear" ng-click="saveAndCloseGlobalTaskModal()">Done</div>
</ion-header-bar>

<ion-content>
    <form class="list item-text-wrap">
        <!-- GLOBAL TASK NAME BOX START -->
        <label class="item item-input">
        <input type="text" placeholder="Enter Global Task Name" ng-model="globalTask.taskName" ng-keyup="maxLengthValidation()">
        <h6 class="eag-character-count">{{globalTask.taskName.length}}/{{maxLength}}</h6>

        </label>
        <!-- GLOBAL TASK NAME BOX END -->
        <ion-item class="item-divider">Category:</ion-item>
        <!-- SEARCH BOX START -->
        <label class="item item-input" name="Search">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="search" placeholder="Search" ng-model="globalTask.task">
        </label>
        <!-- SEARCH BOX END -->
        <!-- GOBAL TASK CODES (ng-repeat) START -->
        <label class="item item-radio" collection-repeat="globalTaskItem in globalTaskList | filter:globalTask.task">
            <input type="radio" name="group" ng-model="SelectedValue" ng-click="selectedGlobaltask(globalTaskItem)" ng-checked="{{checked}}">
            <div class="item-content">
                {{globalTaskItem.standardCodeName}}
            </div>
            <i class="radio-icon ion-checkmark"></i>
        </label>
        <!-- GOBAL TASK CODES (ng-repeat) END -->
        <!-- NO RESULTS MESSAGE START -->
        <label class="item" ng-if="results.length == 0">
            <strong>No results found...</strong>

        </label>
        <!-- NO RESULTS MESSAGE END -->
    </form>
</ion-content>

Screenshot for reference: https://i.sstatic.net/aryO1.png

I'm facing an issue with a list of radio buttons using ng-repeat. Some text in the items is too long and gets truncated with ellipsis because it exceeds the width of the item. I have already applied the Ionic class "item-text-wrap" at the list level, but the height of the item does not adjust according to the content when it wraps onto a new line.

Can anyone suggest why this might be happening or provide a solution to fix it?

Thank you in advance!

Answer №1

Let me assist you with this.

 text-wrap: none;
 text-clip: ellipsis;
 white-space-restriction: nowrap;

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

The XPath for the span element

Is there a way to obtain the Xpath of the specific element below? <div class="datum"> <span>180 KM</span> </div> The desired value is "180 KM". I am struggling to extract it because the span element lacks a name at ...

Using Vue.js within Cordova platform allows developers to create dynamic

Having trouble integrating a Vue.js app into Cordova. Everything seems to be working fine, except I'm unsure how to capture Cordova events (deviceready, pause, etc.) within my Vue application. Using the Webpack template from vue-cli. This is my file ...

Is it true that by utilizing Vue's v-for, every line of HTML code becomes a

I'm struggling to utilize v-for in order to create multiple div elements, but no matter how I attempt it (even trying to iterate over a list), the v-for doesn't seem to function properly and always turns the line into a comment when executed. No ...

Assigning a value to a variable using conditional IF statements and the Alert function in JavaScript

How can I set a variable value based on conditions and display an Alert in JavaScript? Hello, I have a code that utilizes Alerts to display the results of evaluating the visibility status of two controls using jQuery. If pnlResultados is visible, it will ...

What methods can be used by the client-side to determine whether a file has been successfully downloaded or received from

When a client-side file download request is initiated, I dynamically create a form element with hidden attributes and submit it to the server via POST. During this process, I need to display a loading spinner that will be hidden once the download is comple ...

What is the most efficient way to transfer form data from one JSP page to another?

I need to transfer information from one webpage (1.jsp) to another webpage (2.jsp). The data that needs to be transferred includes checkboxes, radio buttons, and drop downs. This data will be used in 2.jsp to generate the appropriate page. Is there a way ...

Having difficulty retrieving values while using async-await

Utilizing the code below has been successful for me. I managed to retrieve the data in the spread (then), returning a http200 response. Promise.all([ axios({ method: 'post', url: 'https://oauth2.-arch.mand.com/oauth2/token&a ...

What steps should be followed in order to replicate the border design shown in the

Checkboxes Border Challenge I am looking to connect the borders between my checkboxes. I attempted to use pseudo-borders, but encountered issues with setting the height for responsiveness across various screens. If anyone has suggestions on how to tackl ...

Showing a div with a smooth fade-in effect while switching its display property to inline using jQuery

Currently, I am working on a project that involves implementing a "side pop up". To ensure it doesn't flicker like it does with jQuery's "hide()" method, I want to start by setting the display property to none using CSS. My main question is: - Ho ...

Choosing the Angular5 model

I'm currently working with an Angular5 project that has a <select> element bound to an array of customers. Here's the code snippet: <select class="form-control" [ngModel]="record.customer_id" (ngModelChange)="setCustomer($event)" name=" ...

Google Maps Shifting Focus

I'm currently working on an AngularJS app that involves multiple locations, and the goal is for users to click on a location which then redirects them to the specific spot on Google Maps. However, I've encountered an issue when trying to relocate ...

Switching back and forth between fluid text fields

Is there a way to navigate between dynamically generated textfields using an iterator from struts-tags? <s:iterator value="aList"> <td width="50px" align="center"> <s:textfield name="solField" size="2" maxlength="1" style="text-transform ...

Utilizing Weather APIs to fetch JSON data

Trying to integrate with the Open Weather API: Check out this snippet of javascript code: $(document).ready(function() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { $(".ok").html("latitude: " + ...

Adding Data to a Database Using Ajax with PHP

I am trying to use Ajax to insert data into a database, but I keep encountering this error: Uncaught ReferenceError: insertData is not defined at HTMLInputElement.onclick (Modal.php:105) Error screenshot: https://i.sstatic.net/AmXka.jpg The HTML and ...

Achieving equal height and width for 2 divs through Bootstrap/CSS techniques

I'm attempting to ensure that these two divs within a table have the same height and width using the following code: <div class="container"> {{#if orders}} <div class="filter"> <ul class="nav nav ...

Retrieve the highest value from 4 different JSON source URLs

After retrieving values from a JSON URL, using the following code: $(document).ready(function () { function price(){ $.getJSON('https://poloniex.com/public?command=returnTicker', function(data){ document.getElementById('Polon ...

Using JQUERY to handle event bubbling in the DOM after an AJAX call

I have been attempting to dynamically append content to a specific div using .ajax() and then utilize the new content within a jQuery Dialog. I believe that my usage of .on() is correct, but it appears that the DOM is not being properly updated. Here is t ...

When two rectangles are created at the same coordinates (x, y) in SVG, it results in an unexpected border appearing

.rect-x { fill: red; } .rect-y { fill: pink; } <svg viewBox="0 0 1024 768"> <rect class="rect-x" x="0" y="0" width="100" height="100"></rect> <rect class="rect-y" x="0" y="0" width="100" height="100"></rect> </svg& ...

Tips for successfully incorporating a jQuery plugin into your React project

I'm attempting to incorporate the Air Datepicker library by t1m0n into my React application, but I'm encountering difficulties. import React from 'react'; import AirDatepicker from 'air-datepicker'; class Datepicker extend ...

Mastering CSS: Optimizing Div Placement Across Sections

I am currently working on developing a sleek and modern landing page with multiple sections, each designed to catch the eye. This style is all the rage at the moment, featuring large headers, ample padding, bold text, and a visually appealing divider betwe ...