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?
::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; }
}
complete 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 :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.