Photoshop Question posted in
The official user guide can be found here.

css cursor: pointer doesn't work on div element – Photoshop

I’m working on an Angular app and I’m trying to make a div have the ‘cursor: pointer’ class. For some weird reason it doesn’t seem to work.

I’ve checked multiple similar questions and answers on stackoverflow, I also googled a lot for an answer, but none solved the issue. I’ve even read about a solution as ridiculous as ‘closing Photoshop on your desktop’ to solve the problem.

I wonder whether this could be a bug of some sort.

So this is a part of my template:

<div class="social-icons_container"
     fxFlex
     [fxLayout]="direction"
     fxLayoutAlign="space-between">

  <div class="icon_container"
      (click)="onFacebookClicked()">

    <svg class="icon"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 128 128"
         [ngStyle]="{ 'width': logoSize }">

     ...and so on ...

And here is the SCSS file:

.social-icons_container {
  width: 50%;
  margin: 0 auto;
  position: absolute;
  bottom: 1.2rem;
  left: 0;
  right: 0;

    .icon_container {
      cursor: pointer;
    }
  }



<div _ngcontent-c12=""
     class="social-icons_container"
     fxflex=""
     fxlayoutalign="space-between"
     ng-reflect-fx-layout="row"
     ng-reflect-fx-layout-align="space-between"
     ng-reflect-fx-flex=""
     style="flex-direction: row;
     box-sizing: border-box;
     display: flex;
     place-content: stretch space-between;
     align-items: stretch;
     flex: 1 1 0%;">

<div _ngcontent-c12=""
     class="icon_container">

<svg _ngcontent-c12=""
     class="icon"
     viewBox="0 0 112.196 112.196"
     xmlns="http://www.w3.org/2000/svg"
     ng-reflect-ng-style="[object Object]"

 ...and so on...

UPDATE: I’ve temporarily solved it with an ugly workaround – I’ve added an [ngStyle] that sets ‘cursor’ to ‘pointer’. I’d appreciate if somebody posted an answer with a reasonable & clean solution. I’ll be waiting 🙂

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you for your help attempts guys, but I found out what the problem was. I had some 'leftover' code in my scss file with the same class resetting the cursor pointer to its default.

    .icon_container {
   cursor: default;
}

    It was my stupid mistake - I removed the code block and now it works with the following:

    .icon_container {
   cursor: pointer;
}

  2. 0

    Try this way may be it will fix your problem

    .social-icons_container {
      width: 50%;
      margin: 0 auto;
      position: absolute;
      bottom: 1.2rem;
      left: 0;
      right: 0;

        .icon {
          cursor: pointer;
        }
      }
    Login or Signup to reply.
  3. 0

    I created a Stackblitz using your code except the svg part.

    It is working correctly as long as the icon_container gets
    valid dimensions.

    You can try updating it with your actual svg and test it.

    Please refer: https://stackblitz.com/edit/angular-6xlagm

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search