I'm not an CSS Expert but until now I've not seen any "problem" like this.
So, I am using Vuetify and I added a for my search form..
Now that component is creating:
<div input-group input-group--prepend-icon input-group--text-field primary--text>
<label for="search"></label>
<div class="input-group__input"></div>
<div class="input-group__details"></div>
<div class="input-group__messages"></div>
</div>
Now my problem is that class .input-group__messages has a min-height and I want it to have 1px or not show at this case, but I can't manage to edit that from my component... there is the way to go to root style but I don't want to do that I want to learn or to know what's the problem what am I missing.
Looking forward for a reply from someone
You need vue-loader version 12.2+ and use Deep selectors
Using CSS (also works with stylus but your IDE might throw syntax errors):
>>> .input-group__messages {
min-height: 1px;
}
Or SCSS:
/deep/ .input-group__messages {
min-height: 1px;
}
See this answer for explanations, and other possible solutions if the above did not work.
Related
I try to do as what tailwindcss not using my custom class inside breakpoints said, but it's still didn't work for me.
Here is my code:
<template>
<div class="img-box-md overflow-hidden rounded-sm lg:img-box-lg">
...
</div>
<template>
......
<style lang="postcss" scoped>
#responsive {
.img-box-lg {
height: 9.2vw;
}
}
</style>
I tried to use #responsive to make the class to be responsive, but failed to find it works in console in large width
I know where the problem is: I use windicss as my alternative to Tailwind, but there is some strange differences between their grammar. For example, the correct grammar of the windicss is
#variants lg {
.lg\:img-box-lg {
height: 9.2vw;
}
}
Code you provided is correct.
Demo: https://play.tailwindcss.com/HIvIPglMqf
Comment under question about using #variants responsive instead of #responsive can be misleading - they are the same (second one is just shorter alias).
Docs: https://tailwindcss.com/docs/functions-and-directives#responsive
Restart compilator and check again. My guess is that you are using new JIT mode where problems in recompiling config is common issue.
How do I change the style of the accordion headers in ngx-bootstrap?
I tried everything. I copy pasted the code from the documentation for customizing the headers but it does not work. The tag generates a bunch of other tags with classes (mostly bootstrap classes). I get the css path to the heading from the Chrome's Inspector, but I can't change it.
The heading/link is in a <button> tag and even when I say button { color: red !important; } it does not work.
I tried everything, but it does not work.
Thanks in advance!
accordion-group {
::ng-deep {
div {
&>div.panel-heading.card-header.panel-enabled {
background-color: rgba(52, 58, 64, 0.15); // change the background of every accordion heading
.btn-link {
color: rgb(6, 10, 9); // change the accordion heading buttons style
}
}
&>div.panel-collapse.collapse.in.show>div {
background-color: hsla(210, 10%, 83%, 0.10); // change the expanded content style
}
}
}
}
::ng-deep{} - that's how you can change the styles of the component that comes from imported library.
The solution I gave is made with SASS (.scss file). I don't know if you can apply changes to the /deep/ components' styles in a regular CSS. If your Angular project is configurated with CSS you can change it to use SASS syntax with the following line:
ng config schematics.#schematics/angular:component.style scss
You can provide some custom CSS class to the accordion using the panelClass property.
Example
<accordion>
<accordion-group heading="Static Header, initially expanded"
[panelClass]="customClass"
[isOpen]="isFirstOpen">
This content is straight in the template.
</accordion-group>
<accordion-group heading="Content 1">
<p>accordion 1</p>
</accordion-group>
<accordion-group heading="Content 2" panelClass="customClass">
<p>accordion 2</p>
</accordion-group>
</accordion>
Then you need to set the css rules in the global style sheet in you project.
style.css
.card.customClass, .card.customClass .card-header, .panel.customClass {
background-color: #5bc0de;
color: #fff;
}
For more information visit the ngx-bootstrap documentation (Accordion Styling).
Just dealt with this issue after upgrading to most recent versions of angular, bootstrap, etc. and I want to provide a more detailed answer.
My experience is that there's really two main ways to do it
using the [panelClass] attribute and then supplanting the existing styling in the accordion component and its children.
This way is more finicky and will likely take a lot more trial and error to configure to your desired specs.
html:
<accordion>
<accordion-group heading="test" [panelClass]="'custom-class'"></accordion-group>
<accordion-group heading="test2" [panelClass]="'custom-class'"></accordion-group>
</accordion>
note the extra set of quotation marks in the [panelClass] - Angular looks for presets otherwise. You can get around this by initializing a string variable that contains the name of the custom class you desire and popping that in there, instead.
possible css (might not be precise):
accordion-group::ng-deep .custom-class>a{background-color: black !important;}
accordion-group::ng-deep .custom-class>a:hover{color:white !important;}
Track down the specific classes the components utilize (your web browser's developer tools are useful) and use the usual css specs (::ng-deep, !important, '>', etc.), as necessary. In the accordion-group, for example, the headings for accordion-groups utilize .btn, .btn-link, etc.
E.g., if you wanted to change the default underlines in an accordion-group's heading to only display on the (hover) event:
html:
<accordion>
<accordion-group heading="test" id="blah"></accordion-group>
<accordion-group heading="test2"></accordion-group>
</accordion>
css:
#blah .btn{text-decoration: none;}
#blah .btn:hover{text-decoration: underline;}
I find method #2 to be simpler, it just requires a little investigation into the components you use (probably not a bad thing anyway).
I was following a drag and drop example in (you can find it here: https://stackblitz.com/edit/draggable-part-6)
After implementing the code I tried to move the "box" into a component.
<div class="box" appDroppable >
MyBox
<div class="box box-helper" *appDraggableHelper>MyBox</div>
</div>
And I noticed it doesn't render correctly. Looking at the chrome dev console I notices that when the element renders outside the box it has the following rule:
When inside the component, it renders the following way:
summary, the "_ngcontent-c0" attribute in not in the html and consequently the rule doesn't apply anymore.
the scss is defined the following way and does not contain any _ngcontent-c0
.box {
background: #BADA55;
border: 1px solid black;
padding: 10px 20px;
display: inline-block;
&.dragging {
background: coral;
}
}
the question is, why is the _ngcontent-c0 being added to the rule dynamically?
That's because Angular hides these classes and limits them to just the component these classes are written for. It's called ViewEcapsulation in Angular.
From Angular's Documentation:
An encapsulation policy for the template and CSS styles. One of:
ViewEncapsulation.Native: Use shadow roots. This works only if
natively available on the platform.
ViewEncapsulation.Emulated: Use
shimmed CSS that emulates the native behavior.
ViewEncapsulation.None: Use global CSS without any encapsulation.
By default, a class that you've defined in the .css file for a component will only be available for use in that component. If you want to use it in some other component, it won't be available. Angular automatically adds these texts to the classes so that they are not accessible outside the component.
thoughtram.io has an amazingly enlightening article on this which you can read here to understand this better.
In my Angular2 project, I extract some common css into a global-style.css file and link this in index.html.
I also link third-party css in index.html but third-party css conflict with my global-style.css.
Let's see a concrete example.
In my global-style.css I have a style
.display-none { display: none; }
In bootstrap css there is a style
input[type="file"] { display: block; }
When I want to hide file picker I write the code
<input class="display-none" type="file">
But file picker still display because input[type="file"] have higher specificity than .display-none. (according to https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
There is a Plunker live demo: https://plnkr.co/edit/7HOT1if3ZhtSGu0UXOZX?p=preview
My question is, how to make my global-style.css have higher priority than other third-party css?
I know the way declaring !important but is there any other more elegant way? Thanks for any answer!
Here are some things you might be looking for:
Put the bootstrap link before your 'global-style.css'. This will solve your problem as the order of the links is the order that the CSS will be brought in.
Just use !important. A 10 character solution isn't not elegant.
Today I am facing a problem of restricting the scope of css. The
<div class="parent">
<div id="childWithNoCss">
<p>No css</p>
</div>
<div id="childWithCss">
<p>Apply css</p>
</div>
</div>
My css is:
div{
color:red}
p{color:blue}
I need to apply the css specific to the id childWithCss.
The css is fixed (I cannot change it) just need to limit its scope only to a specific element.
I cannot use scope attribute since it is incompatible in some browsers.
Is there any other solution?
Regards
Are you trying to find a workaround for this?
<style scoped>
p {
//some style
}
<style>
If so, there are some jQuery plugins that do the same thing and work for IE, at least for IE 9 and above. Here's one example:
jQuery scoped CSS plugin
If that's not what you're trying to do, can you not just add some nested css? Does this help at all with what you are trying to do?
Load an external CSS for a specific DIV
You can reset the CSS of an element with the css code: all:initial.
You could use some javascript to do this at runtime for the elements you want to reset. I see you tagged your question with angularJS, so jquery should be available.
jquery solution to reset all css for the p in the divs WITHOUT #childWithCss within .parent:
$('.parent div:not(#childWithCss) p').css('all','initial')
http://jsfiddle.net/2yXsL/3/
You should be able to do it with a bit of jquery
if ($('.parent').has('#childWithCss')) {
$('#childWithCss').find('p').css('color', 'red')
}
Reset the color of everything except #childWithCSS to the default text color with a bit of jQuery.
$("p:not(#childWithCSS p)").css("color", "initial");