One cannot adjust the opacity of the arrow in ionic 4 ion-item details

Currently, I am dealing with a project that was not originally coded by me and have come across an issue that is proving to be challenging to resolve.

Please review the code snippet below:

<ion-item detail *ngIf="c.cv" [routerLink]="['/contact',c.uid]">
        <div class="avatar-voyant">
          <div class="group-circle">
            <div class="circle opacity-100" style="margin-left: -2px; margin-top: -2px; width: 62px;"></div>
            <div class="circle opacity-50" style="margin-top: 1px; margin-left: 7px;"></div>
            <div class="circle opacity-35" style="margin-top: 6px; margin-left: 13px; width: 45px"></div>
            <div class="circle opacity-20"
              style="margin-left: 0px; margin-top: 11px; width: 45px; height: 45px; border-radius: 13px;"></div>
            <div class="circle opacity-35" style="margin-top: 5px; margin-left: -10px; height: 45px;"></div>
            <div class="  circle opacity-20"
              style="margin-left: -7px; margin-top: 0px; border-radius: 50%; height: 35px; width: 35px;"></div>
            <ion-thumbnail>
              <ion-img [src]="c.picture"></ion-img>
            </ion-thumbnail>
          </div>

          <div style="padding-bottom: 15px"></div>
        </div>
        <ion-label class="ion-text-wrap">
          <h3 class="text-rose-pale padding-bottom-5"><b>{{c.username}}</b></h3>
          <h5>{{c.competence1}} - {{c.competence2}} - {{c.competence3}}</h5>

        </ion-label>

        <ion-badge slot="end" *ngIf="c.nbMsg">{{c.nbMsg}}</ion-badge>
        <ion-icon name="mail" color="tertiary" slot="end" size="small"
          *ngIf="c.m && c.m.fromUid!=profileServ.uid && c.m.lu<1"></ion-icon>

      </ion-item>

The main issue at hand is the requirement to use ion-item with the detail parameter, which adds an arrow on the right side of the list. However, the default opacity is set to 0.2, and my attempts to override it targeting the SVG or the ion-item have been unsuccessful. I also tried utilizing a variable in my global.scss file like this:


.item-detail-icon {
    color: var(--detail-icon-color);
    font-size: var(--detail-icon-font-size);
    opacity: var(--detail-icon-opacity);
}

Even after setting --detail-icon-opacity, the opacity remains at 0.2, as if the variable is not defined in the project. This leaves me puzzled on how to adjust the opacity to 1.0.

If anyone within the community has insights on resolving this issue, your assistance would be greatly appreciated. Thank you!

I have attempted to modify the value of --detail-icon-opacity or overwrite the opacity without success.

cssangularionic-frameworkionic4

Answer №1

I designed a component using the template below:

<ion-item detail>
  <ion-label>
    Label
  </ion-label>
</ion-item>

Afterwards, I implemented this rule in the global.scss file:

ion-item {
  --detail-icon-opacity: 1;
}

The rule was successfully applied. Consider trying out this approach for styling the ion-item component, just like in my example.

(Verified with 

@angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dab9b6b39aebecf4e8f4ea">[email protected]</a>
and 
@ionic/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="73101f1a33445d425d42">[email protected]</a>
)

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

Setting the default value in the Angular input select

books.component.ts export class BooksComponent implements OnInit { public sortOrder; ... books.component.html <div class="form-group"> <label for="selectOrder">Sort</label> <select class="form ...

htmlangular

What is the best way to transfer a base64 image string obtained from pouchdb to a different api as a file?

I have stored an image in base64 format within pouchdb, and I am now looking to upload the same file to a specific API on the server. Is there a way for me to extract the file path or convert the base64 image back into a regular file so that it can be acc ...

angularjsimagebase64ionic-frameworkpouchdb

Develop your project with Angular 2 using the powerful Angular CLI build tool

Hello there! I am new to Angular 2 and recently developed a small project with the help of angular-cli for packaging. The dist folder was generated successfully. However, when I deployed the app to the server and tried to access the index.html page, it co ...

node.jsangularnpmangular-cli

Is there a way to modify the default color when the header is assigned the "sticky" class?

Currently, I am in the process of building my own website and have implemented an exciting hover effect that randomly selects a color from an array and applies it when hovering over certain elements. However, once the cursor moves away, the color reverts b ...

javascripthtmljquerycssarrays

Tips on aligning a span element at the center of an image without losing its mouseover

<div class="pic"> <img src="image.jpg" height="250"/> <span class="text" style="display:none">text here</span> </div> <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </scrip ...

javascriptjqueryhtmlcss

The compilation process encountered an error: TypeError - Unable to access property 'exclude' as it is undefined (awesome-typescript-loader)

After successfully converting my existing Angular 2 project into Angular 4, I encountered the following error: Module build failed: TypeError: Cannot read property 'exclude' of undefined For more details, please refer to the attached image bel ...

javascriptangularjsjsonangular

Looking to implement date functionality for day, week, month, and year in Ionic using Angular

Is there a way to display the current day, week, month, and year in Angular? I want to be able to click on the current day and navigate to the next day by clicking a greater than symbol, and navigate to the previous day by clicking a less than symbol. Si ...

angulardateionic-frameworkangular-materialionic4

How can I create a custom elevation for a Vuetify v-menu?

I'm currently working with vuetify and v-menu as outlined in the official documentation here https://vuetifyjs.com/en/components/menus/ I'm struggling to figure out how to apply elevation only on the bottom left and right corners. When I add a ...

cssvue.jsvuetify.js

What is the best way to align flexbox to the left?

I'm having trouble aligning the FileCard component to the start of the container. I attempted using flex-start in my styling, but the FileCards are still centered. This is the current code snippet: <div v-if="posts" ...

cssvue.jsflexbox

Having trouble importing CSS in ReactJS?

While working on my project based on next.js, I encountered a situation where loading CSS in other pages was successful: import css from './cssname.css'; <div className={css.myclass}></div> However, now that I am implementing a ligh ...

cssreactjsjsxnext.js

Selecting the optimal data structure: weighing the benefits of using boolean check versus array .include (balancing performance and redundancy

My objects can have one or more properties assigned, with a total of 5 different properties in my case. To illustrate this, let's use a simple movie example where each movie can be assigned from 5 different genres. I have come up with two methods to ...

javascriptarraysangulartypescript

Turn off the ability to click on images, but allow users to access the right

https://i.stack.imgur.com/jriaP.png Example image sourced from reddit.com Illustration represents the desired effect using CSS and possibly JS. In essence: I aim to make an image on a website unclickable to its imageURL There should be a context menu ...

javascriptjqueryhtmlcssimage

The Angular component fails to load in the browser because of a problem with the Observable subscription

Whenever I try to execute the getCurrentSalahOrIqamah function in the ngOninit lifecycle hook of this component, my browser gets stuck and the component doesn't load properly. I've attempted using both lazyloaded and eager loaded components, but ...

angularangular-servicesangular-components

Programmatically populating the date picker in angular material

I have implemented the Angular Material date picker in one of the components of my Angular project. This specific component consists of two tabs, and I am using *ngIf to display only one tab at a time based on user interaction. When a user selects a date i ...

javascriptangulartypescriptangular-material

Refresh the content of an iframe (local HTML) by clicking on buttons

When a user clicks on a button, I am loading an HTML file into a DIV (iframe). The issue arises when the user clicks another button and wants to reload the iframe with a different HTML file. This is the current code snippet: <script type="text/javasc ...

javascriptjqueryhtmlcssiframe

What is the best way to create a box in the shape of an octagon

Trying to achieve the unique box design shown below using CSS. I researched various resources, such as https://css-tricks.com/examples/ShapesOfCSS/, but encountered an issue with the purple border cutting edges. Attempted using an octagon shape without su ...

htmlcsscss-shapes

Oops, looks like there was an issue parsing the date. Can you please ensure that the datetime you

After saving the date in a server database as a timestamp, I attempted to convert the timestamp to a date using the following code: completeDate : new Date(timestamp); It displayed the date as: Wed Feb 28 2018 00:35:06 GMT+0530 (IST) However, when I tr ...

angularjsionic-frameworkionic2

Retrieve the file from the REST API without using the window.open method

I'm looking for a method to download files from an API without using window.open(). I want the download process to start immediately upon calling the API. Currently, I am downloading an .xls file generated by a REST API using window.open() API Endpo ...

javaangulartypescriptrest

Troubleshooting CSS keyframe animation issues in IE and Edge

I have created an animation that works perfectly in all browsers except for IE and Edge. You can view the page here. .progress-container { position: relative; } .background-progress-bar, .progress-bar { width: 100%; height: 10px; top: 0px; left ...

htmlcssinternet-explorercss-animationsmicrosoft-edge

How to selectively hide the menu button in Ionic framework when not within the <ion-view> element

Within the framework of Ionic, my goal is to dynamically hide the menu button based on certain conditions. However, due to other constraints, I had to separate the menu into its own controller to avoid completely re-rendering the menu and header bar every ...

angularjsionic-framework