Responsive Ionic columns for listing items

Can you please try resizing this code snippet: http://codepen.io/anon/pen/zxGbbx

<ion-content>
  <ul class="list">
    <a class="item" ng-repeat="thread in data" ng-href="{{thread.url}}" target="_blank">
      <li class="">
        {{thread.title}}
        <span class="desc">{{thread.desc}}</span>
        <span class="item-note badge badge-assertive">{{thread.replies}}</span>
      </li>
    </a>
  </ul>
</ion-content>

I've been trying to figure out where I should apply the classes 'row responsive-sm' and 'col', but so far, I haven't had any success. The issue is that my thread titles are too long and causing overflow on the screen.

Answer №1

If you are looking to implement the grid structure for each item in a list, here is a way to use rows and columns effectively.

Below is an example of how you can apply row and col classes:

<ul class="list">
  <a class="item" ng-repeat="thread in data track by $index" ng-href="{{thread.url}}" target="_blank">
    <li class="row">
      <div class="col col-80">
        <span class="row responsive-sm item-text-wrap">{{thread.title}}</span>
        <span class="row responsive-sm">{{thread.desc}}</span>
      </div>
      <div class="col">
        <span class="item-note badge badge-assertive">{{thread.replies}}</span>
      </div>
    </li>
  </a>
</ul>

You can view the updated Plunker here.

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

Utilizing AngularJS: Incorporating a Service into a Directive

I am facing an issue with injecting a service into a directive, even though it works fine with my controller. The documentation suggests that it should be straightforward. Service: priceGraphServices = angular.module('priceGraphServices', [&apo ...

Exploring anchor hover effects and navigating adjacent sibling elements

Consider this html structure: <p><a></a></p> <div><a><img></a></div> To hide all images inside a div after a p tag, you can use the following code: p + div {display:none;} However, attempting to sho ...

Achieving consistent margins across various browsers for UL elements

UL element margins are the same, but Firefox and IE are displaying differently. FULL CODE: <html> <head> <style> body { background-color: Red; } ul ...

I am facing an issue where the text on my website is failing to display properly

I am facing an issue where the text on my website renders normally on Android or Windows, but when I run it on iOS, the text disappears completely. It's as if all the text has been set to display: none; The other elements seem to be tucking in just fi ...

What steps can I take to resolve the CSP errors I am experiencing?

I am currently working with NextJs@12 and I am attempting to set up CSP for my application. Unfortunately, I keep encountering errors in my console and I cannot figure out where I am going wrong. Below is the current policy that I have in my next.config fi ...

PHP: Issues with displaying data from a SELECT * FROM query in tables

My goal is to style tables pulled from my database so that the columns in the rows align with the column names for better readability. I attempted to use PHP to achieve this by creating a table outside a while loop to display the names and then starting t ...

How to place a circle below text using CSS

I'm attempting to center a 5px x 5px circle under the links in a navigation bar to indicate the current page, but I'm uncertain about how to achieve this effect. Here is the current outcome: Link to Image This is what I aspire to accomplish: Li ...

The div needs to be positioned above another div, not beneath it

Just returning to the world of coding and struggling with a basic problem. Any help would be greatly appreciated. I am trying to position the 'header-top' (red) div at the top, and the 'header-bottom' (blue) div at the bottom. However, ...

Concealing a form after submission using JavaScript

After submitting the form, I am attempting to hide it and display a loading GIF. I've experimented with various methods, including changing ClassName to Id, but haven't had success. This is for a school project, and I've spent a significant ...

Navigating between divs with a 100% height using up and down movements

I am working on a website that is structured into different sections using divs with shared classes but unique IDs. Each div is set to take up 100% of the viewport height. To navigate between these sections, I want to provide Up/Down arrow buttons for user ...

What is the best way to expand this HTML5 canvas script to fill the entire screen?

I am having issues adjusting the canvas to fill the entire window. Currently, it is set to 500x500. As a beginner in coding, any assistance would be greatly appreciated! Thank you. Below is the code snippet: <!DOCTYPE html> <html> <head& ...

The div has extra white space at the bottom due to the Hide/Show content feature

Having trouble stretching a scrolling div to 100% of its parent container's height? The Hide/Show content feature is causing whitespace at the bottom of the div. Check out the jsfiddle here: http://jsfiddle.net/fkvftff2/1/ LATEST UPDATE: The issue a ...

What is the best way to close the space between a box-shadow and a div background when incorporating semi-transparent rgba() values?

There seems to be an issue arising when applying partially transparent rgba() background-color and box-shadow color values to an element with a non-fixed (percent-based) border-radius. This combination results in a minuscule transparent gap appearing at th ...

What is causing my Bootstrap Controls to malfunction?

I'm trying to create a Bootstrap carousel that shows 3 items at once and includes controls to switch between them. The carousel I've made does display the three items, but for some reason, the controls are not responding when clicked. I'm un ...

Starting point for Angular 2 app setup

What is the best way to handle data initialization in my app? For instance, if a user logs in and presses F5, I need to retrieve the current user data from the server before any other queries are executed, such as getting the user's orders. In Angular ...

What is the process of adding information to a JSON file?

I'm looking to store my data in an external JSON file and have it update the list when the page is reloaded. Can anyone assist with this? Below is my code: $scope.addUser = function() { var user = { id: null, login: '', ...

Rearrange the order of items on mobile devices

I currently have a row in Bootstrap with two columns that stack on top of each other for larger screens. However, the order of the columns is reversed on desktop, with 'one' appearing before 'two'. Is there a simple way to rearrange the ...

What is the best way to incorporate regular, light, and bold fonts into your project using links from Google Fonts

I am looking for three specific styles of Ubuntu font without having to download them. To access these fonts, I inserted this link in the <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700" rel="stylesheet"> According to Google& ...

Adding a new element to a list using md-autocomplete

I am seeking guidance on how to utilize md-autocomplete to search for an object within an array. If the object is located, I want to populate an edit form; however, if the object is not found, I would like the user to have the ability to add a new one usin ...

Adjust the margins of an image within a text box

I've come across a simple yet widely used code online. I tried placing an image inside a textbox with the type of "text", but the image is touching the border of the empty box. Is there a way I can adjust the positioning of the image to the right to p ...