Troubleshooting: Issue with Button Layout in Ionic's ItemSliding Component

How can I create a list item that allows swiping to reveal an archive button?

The requirement is for the icon to appear to the left of the text.

I'm referring to the documentation on Button Layout: https://ionicframework.com/docs/api/components/item/ItemSliding/

<ion-item-options icon-start>
  <button ion-button (click)="archive(item)">
    <ion-icon name="archive"></ion-icon>
    Archive
  </button>
</ion-item-options>

Even after following the code snippet, the icon still overlaps the text. An example can be seen here: https://stackblitz.com/edit/ionic-fhhzdy?file=pages/home/home.html

What might I be overlooking in this setup?

cssangulartypescriptionic2ionic3

Answer №1

It seems like there is a bug causing the CSS rules to be applied incorrectly. However, you can temporarily fix it by adding the icon-left attribute as well.

<ion-content padding>
    <ion-list>
        <ion-item-sliding #item>
            <ion-item>
                Swipe me!
            </ion-item>
            <ion-item-options icon-left icon-start> <!-- Here! -->
                <button ion-button (click)="archive(item)">
          <ion-icon name="archive"></ion-icon>
          Archive
        </button>
            </ion-item-options>
        </ion-item-sliding>
    </ion-list>
</ion-content>

View working stackblitz project here

Additional Information:

After some investigation, I discovered that a specific style rule was causing the problem. To resolve this issue, make sure to include both the icon-left and icon-start attributes in your code:

// This style rule is causing the problem...
ion-item-options:not([icon-left]) .button:not([icon-only]) .button-inner, 
ion-item-options:not([icon-start]) .button:not([icon-only]) .button-inner {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

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

Two-column list using XSLT

I am seeking assistance with xsl transformation. The xml generated by SharePoint Server control is as follows: <rows> <row>A</row> <row>B</row> <row>C</row> <row>D</row> <row>E ...

jqueryhtmlcssxmlxslt

Narrow down your search results with date range filtering in Angular Material

Seeking guidance as a newcomer to Angular Material, I am trying to implement a date range filter for a table of N results. The options in the filter select are (1 day, 5 days, 1 week, 15 days), which are populated using a variable JS vm.rangos=[ {id ...

angularjshtmlcssangular

Design a Hover Mega Menu - click outside to close

Although there are similar topics on stackoverflow, the code I have is different from them. I am trying to achieve the following: If I click on the search box (the white square on the site), my search box should open If I open the search box and then cl ...

jquerycss

How can I achieve a stylish scrolling header similar to a Google Blog for my website?

Google's blog features a unique header design - as you scroll down, the gray bar in the header moves up until it locks at the top of the screen. While CSS's position:fixed can achieve a similar effect, Google seems to have used a combination of p ...

javascripthtmlcss

Establish a primary background color for the React application, with the majority of the display content

I have been working on styling a React project where App.js mainly handles routing and navigation to its components: App.js import {useState, useEffect} from 'react'; import Models from './pages/Models'; import Loadingpage from ' ...

javascripthtmlcssreactjsfrontend

Tips for organizing a multi-dimensional array based on various column indexes

I am looking to organize a multidimensional array by multiple column index. Take, for instance, the test data provided below: var source = [ ["Jack","A","B1", 4], ["AVicky","M", "B2", 2], [ ...

javascriptarraystypescript

Is there a way to use javascript to ensure that CSS variables stick even when overwritten by onclick events?

I have successfully implemented a method to change CSS variables using advice found here. However, I am running into an issue where the changes do not persist. After clicking on a navigation link, the styles momentarily switch to the new values but quickly ...

javascriptjqueryhtmlcss

Tips for preventing circular dependencies when using combineSlices in Redux-toolkit

When utilizing combineSlices with createAsyncThunk condition, I find it challenging to avoid circular dependency. My store initiation thunk looks like this: thunk.ts export const initiateFx = createAsyncThunk< InitiatePayload, string, { state: R ...

typescriptreduxredux-toolkitcircular-dependency

Can HTML text areas be designed to adjust their width automatically, as well as their height?

Among the numerous StackOverflow examples showcasing an auto-height Textarea, one noteworthy example can be found here: <textarea oninput="auto_grow(this)"></textarea> textarea { resize: none; overflow: hidden; min-heig ...

javascripthtmlcsstextarea

Curves are unable to form on borders using the border-radius property

While working on a webpage, I encountered an issue with CSS attributes and table borders. Despite using the border-radius attribute, the border didn't round along with the background; it just stayed at a corner. Below is my code snippet, any help is g ...

htmlcsshtml-table

After a brief delay, I aim to eliminate a className or restart the class animation when a certain condition is satisfied

Objective: My goal is to create a feature where the price number highlights with a color for a brief moment when there is a price change using toggleClassName. Challenge: The issue arises when the iteration is UP UP or DOWN DOWN, as the element already ha ...

cssreactjs

Facing the issue of "Protractor not syncing with the page" while trying to navigate an Angular website

I'm currently attempting to follow the tutorial for Protractor on the official Protractor website, but I've hit a roadblock at step 0. My setup involves using protractor and webdriver-manager version 6.0.0. I am running Linux (Ubuntu 18.06) as m ...

javascriptangularseleniumprotractor

Tips for integrating a custom handler to the close icon in Material UI TextField component

In my Reactjs/Typescript project using Material UI, I have a search input component rendered with TextField. The built-in "x" icon clears the input value, but I want to create a custom handler for making an API call when the search value is deleted. I&apo ...

reactjstypescriptmaterial-ui

Avoid using the FONT tag with the execCommand function

Is there a way to hide the next element using execCommand configuration? Font Tag <font color="xxxxxxx"></font> I am facing an issue while creating a simple editor for a project. I am struggling with CSS formatting and the font tag is not he ...

htmlcssfonts

Ratios for Sizing Bootstrap Columns

The Bootstrap grid system consists of 12 columns in total. I am looking to utilize all 12 columns on the page. However, my goal is to have the first 6 columns on the left side be half the width (50%) of the columns on the right side. This means that the ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4css-grid

Dynamic horizontal div elements laid out in a repeating pattern using CSS Grid

I'm fairly new to CSS/Html/JS and I'd like to create a row of Boxes (loaded from a json file) displayed horizontally. Something similar to this: https://i.sstatic.net/ZgxMR.png Here's the code snippet I've been using: <style> ...

htmlcsscss-grid

What steps do I need to take to resolve the issue with the coa npm library version 2.1

While working on my Angular project, I encountered an error in the console logs: Error: 404 Not Found - coa-2.1.3.tgz I have not listed this library in my package.json file and the latest version available is 2.0.2. I am unsure about what steps to take ...

angularnpm

Guide on aligning a non-fixed child within a fixed parent container

I am working on a project with a fixed container (div#popup) that has some CSS styling. The container is set to position:fixed, with specific dimensions, border radius, and background color. Within this fixed container, there is a form element that I am h ...

htmlcss

After upgrading from angular version 7.0 to 8.0, I realized that the target in the tsconfig.json file remained unchanged

After running the command ng update @angular/cli @angular/core, I successfully updated my Angular 8 version. The updated versions are as follows: Angular CLI: 8.0.1 Node: 10.15.3 OS: linux x64 Angular: 8.0.0 ... animations, cdk, common, compiler, compiler ...

angular

What steps can I take to concentrate on a particular mat-tab?

<mat-tab-group mat-stretch-tabs #tabGroup (focusChange)="tabChanged($event)" [selectedIndex]="0"> <mat-tab label="DATOS EXPEDIENTE"> <div class="example-large-box mat-elevation-z4"> <app-informe-expediente></app ...

angulartabsangular-materialmat-tab