admin 管理员组

文章数量: 1086019

I need to bind the CSS class property value dynamically for desktop. i have using ng-deep in angular. if i use the ng-deep inside the @media query is not working.

i have tried below code in css

 @media (min-width: 1025px) and (max-width: 1280px) {

   ::ng-deep.bs-datepicker {
    left: var(--my-var) !important;
   }

  }

ng-deep CSS is not working at media query syntax. where i need to place or what i need to do?

I need to bind the CSS class property value dynamically for desktop. i have using ng-deep in angular. if i use the ng-deep inside the @media query is not working.

i have tried below code in css

 @media (min-width: 1025px) and (max-width: 1280px) {

   ::ng-deep.bs-datepicker {
    left: var(--my-var) !important;
   }

  }

ng-deep CSS is not working at media query syntax. where i need to place or what i need to do?

  • javascript
  • css
  • angular
  • typescript
Share Improve this question edited Mar 16, 2022 at 22:20 Akber Iqbal 15k12 gold badges53 silver badges75 bronze badges asked Jul 23, 2019 at 10:42 ManikandanManikandan 511 silver badge11 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 4

::ng-deep does work inside a media query... something else must be off for your specific case;

relevant CSS in typeahead-basic.ts:

  ::ng-deep .dropdown-menu.show { background:lightblue;}
  ::ng-deep .dropdown-item { color:red !important; }
  @media screen and (max-width:768px){
    ::ng-deep .dropdown-menu.show { background:lightgreen;}
    ::ng-deep .dropdown-item { color:orange !important; }
  }

plete working stackblitz here

update: for your shared stackblitz, the correct syntax is below... you gotta check your page on the widths between 1025px and 1280px and you will see the effect in action:

@media  (min-width:1025px) and (max-width: 1280px) {

::ng-deep .third-party-content{
  left:30px;
  position: absolute;
  color:red;
}

}

I just found out you can do it like this in scss

::ng-deep.bs-datepicker {
  @media  (min-width:1025px) and (max-width: 1280px) {
    left:30px;
    position: absolute;
    color:red;
  }
}

I might be late to the conversation but eh, If you still need it or anyone else like me still looking... I hope it works for you too :)

本文标签： javascriptHow to use ngdeep at media query syntax insideStack Overflow

版权声明：本文标题：javascript - How to use ng-deep at media query syntax inside? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744008874a2517785.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。