Full width divider for Ionic 2 lists

I am currently facing an issue with my Ionic 2 app where the divider is only full width on the last element in the list. I would like all elements to have a full width border, but I couldn't find any information about this in the documentation. Any help would be greatly appreciated!

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

In addition, here is the code snippet I am working with:

<ion-list no-padding="">
    <ion-item *ngFor='let like of likes' (click)="goTo(like.qrcode)" text-wrap>
        <ion-thumbnail item-left>
            <img class="item item-thumbnail-left" [src]="like.logo">
        </ion-thumbnail>
        <h2>{{like.name}}</h2>
        <h3 class="establishment">{{like.type}}<br /></h3>
        <p class="establishment">{{like.city}}<br /></p>
        <!--<button ion-button clear item-right>View</button>-->
    </ion-item>
</ion-list>
angulartypescriptionic2ionic3

Answer №1

To achieve this, you can utilize the no-lines attribute to hide the borders without affecting the full width. Additionally, you can apply a custom style rule to add borders to specific items. Here is a helpful example on Plunker for reference.

For instance, in your view:

  
  <ion-list>
      <ion-item no-lines class="bottom-border" *ngFor="..">
          ...
      </ion-item>
  </ion-list>

Subsequently, in the .scss file:


.item[no-lines].bottom-border { 
    border-bottom: 1px solid grey; 
}

Answer №2

When I encountered this issue in Ionic 4, I came up with the following solution.

HTML

 <ion-list lines="none">
    <ion-item class="bottom-border" *ngFor="..">
      <ion-label>Pokémon Yellow</ion-label>
    </ion-item>
  </ion-list>

.SCSS

.bottom-border{
  border-bottom: 1px solid #e8e8e8;
}

Remember to include lines="none" to eliminate existing lines.

Answer №3

/* Version 3: Complete line below items with no line */
.product-image {
    border-bottom: 1px solid #dedede;
}

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

Retrieving information from BlobStorage using Service.ts and triggering the NgOnit function

Within the service.ts module, I am fetching data from Azure Blobstorage and attempting to read its contents. service.ts import { Injectable } from '@angular/core'; import { environment } from '../../environments/environment'; import { ...

angulartypescriptweb-servicescallback

TypeORM Error: Trying to access property 'findOne' of an undefined object

I've been working on implementing TypeORM with Typescript, and I have encountered an issue while trying to create a service that extends the TypeORM repository: export class UserService extends Repository<User> { // ... other service methods ...

javascriptnode.jstypescripttypeorm

The information in Vuex Store and Vue Component is not aligning and syncing properly

I am encountering an issue with a specific component in my Quasar project. I am currently utilizing a Q-table to display data pulled from a data field, which is supposed to sync automatically with the Vuex store. However, I am noticing that the data does ...

typescriptvue.jsvuexquasar

Tips on mocking an ngrx selector within a component

Within a component, we utilize an ngrx selector to access various segments of the state. public isListLoading$ = this.store.select(fromStore.getLoading); public users$ = this.store.select(fromStore.getUsers); The fromStore.method is formed using the ngrx ...

angularjasminengrx

Fast + Vue3 + VueRouter Lazy Load Routes According to Files

I am currently working on implementing Domain-Driven Design (DDD) to Vue, and the project structure looks like this: src - App - ... - router - index.ts - Dashboard - ... - router - index.ts - ... The goal is for src/App/router/index.ts to ...

typescriptvue.jsvuejs3vite

Creating dynamic checkboxes and dropdown menus in Angular 8 by fetching data from an API

Take a look at my Stack Blitz project: here I am trying to achieve two things: hide the dropdown if the divisions are empty, and set the default value of the dropdown to the first one in the list. Can anyone guide me on how to accomplish this? Your help ...

angularangular7angular8

Angular Error: Argument must be included in the dependency array

While making changes to a dialog form, I encountered an error. Instead of using a dialog form, I want to switch to a regular form. However, when I remove @Inject(MAT_DIALOG_DATA) from the constructor, I get an error. Any suggestions on how to resolve thi ...

angular

Tips for concealing a chosen alternative from the menu of options when utilizing mat-select

I am currently working with the latest version of mat-select, version 16. I have a requirement where, when a specific option is selected and the select drop-down is clicked again, that selected option should not appear in the options list. Below is the HTM ...

htmlcssangularmat-select

Discovering the parameter unions in Typescript has revolutionized the way

My current interface features overloaded functions in a specific format: export interface IEvents { method(): boolean; on(name: 'eventName1', listener: (obj: SomeType) => void): void; on(name: 'eventName2', listener: (obj: Som ...

javascripttypescripttypescript-typings

Efficiently search and filter items across multiple tabs using a single search bar in the Ionic 2

I am currently working on implementing a single search bar that can filter lists in 2 different tabs within Ionic 2. The search bar is functional, and I have a method for filtering through objects. However, my goal is to allow users to select different tab ...

javascriptangularjstypescriptionic2filtering

The Vue store array declaration triggers a TS error stating that it is not assignable to a parameter of type never

I'm puzzled as to why this error keeps showing up: Argument of type '{ id: string; }' is not assignable to parameter of type 'never'. ... appearing at const index = state.sections.findIndex((section) => section.id === id); T ...

arraystypescriptvue.jsvuextypescript-typings

Unable to establish connection through MQTT 1884 protocol

Currently, my website's messaging system is powered by MQTT. While everything is functioning smoothly on my local machine, I encounter an error when trying to use the system on the production site: vendor.bbaf8c4….bundle.js:1 WebSocket connection ...

javascriptnode.jsangularmqttpaho

What could have caused the sudden halt of fetching on all server branches in the backend?

Following a code refactor on a separate branch, the fetch function ceases to work in any branch despite everything else functioning correctly. The error message reads: ...server/KE/utils.ts:44 const response = await fetch( ^ ReferenceError ...

node.jstypescriptvue.jsexpressnodemon

Redirect users in Angular 9 when query parameter is missing

When a user clicks a link from an email, they should be directed to a specific route only if the URL contains a valid query parameter. If the parameter is missing, I want to redirect them to a 404 page not found component as shown below. this.route.queryP ...

angularrxjs

The module X is experiencing a metadata version mismatch error. Version 4 was found instead of the expected version 3 while resolving symbol Y

I am in the process of creating an Angular 4 application using angular-cli (ng build) and incorporating ngx-clipboard. Recently, I have encountered a sudden error that has persisted for a few days despite there being no changes to my source code: ERROR in ...

angularnpmangular-clingx-clipboard

Why does my Visual Studio Code always display "building" when I launch an extension?

https://code.visualstudio.com/api/get-started/your-first-extension I followed a tutorial to create a hello world extension. Why does my VSCode always display 'building' when I run the extension? Executing task: npm run watch < [email p ...

javascriptnode.jstypescriptvisual-studio-code

Discovering identical objects in two arrays in Angular using TypeScript is a breeze

I've hit a roadblock with a TypeScript problem in my Angular service. I have an array of ingredients: private ingredients: Ingredient[] = [ new Ingredient('farina', 500), new Ingredient('burro', 80), new Ingredient('ucc ...

javascriptarraysangulartypescriptobject

Error: Type '() => () => Promise<void>' is not compatible with type 'EffectCallback'

Here is the code that I'm currently working with: useEffect(() => { document.querySelector('body').style['background-color'] = 'rgba(173, 232, 244,0.2)'; window.$crisp.push(['do', 'ch ...

reactjstypescriptnext.js

Using Typescript for testing React components: successfully passing an array of objects as props

My current approach involves passing an array of objects to mock component data for testing: const mockPackage = { id: '1232-1234-12321-12321', name: 'Mock Package', price: 8.32, description: 'Mock description', glo ...

reactjstypescriptreact-testing-library

Angular frontend failing to send authorization cookie for cross-origin requests, despite using withCredentials

Today, I've been facing a persistent issue that I just can't seem to figure out. I have my Angular frontend running on localhost:4200 and a Spring Boot backend on localhost:8080. When I call the localhost:8080/api/login endpoint from my Angular ...

angularspringauthentication