I use ngbootstrap for popovers, but I want to override all the default styles it comes with. I have a form that should be displayed as a popover on a button click which has its own styles.
When I use [ngbPopover] it renders an element with the default class of 'popover' applied, instead of overriding each of its properties to align with my expectation, is it possible to remove it all together while rendering on the page and then I could use a custom class with popoverClass property.
<ng-template #popContent><user-form></user-form></ng-template>
<button type="button" class="btn btn-outline-secondary" [ngbPopover]="popContent">
I've got markup and bindings in my popover!
</button>
Looking into the popover source code I see lots of classes nailed without a chance to change them. I suppose the only promising approach would be exclude the css for the popover component from the import.
How to do it depends on how you import the Bootstrap css
Related
I'm developing a web app using Angular 12 and PrimeNG 13.
However, I'm faced with a weird issue. Consider the two simple buttons defined below:
<p-button label="Delete" icon="pi pi-trash" class="mr-1 p-button-danger"></p-button>
<button pButton label="Delete" icon="pi pi-trash" class="mr-1 p-button-danger"></button>
According to PrimeNG documentation, these two should behave the same way. However, this is not the case for me, here's how those two buttons render in my app:
Basically, when using the component directly (the first one in the code sample above) most style classes seem to not work. For example, in the sample above the p-button-danger class does not apply the appropriate red background. Same goes with the other style classes I've tested. If instead I use the pButton directive (second one in the sample) everything works as intended.
I've used PrimeNG in the past and I'm pretty sure I didn't have this problem before... any idea of why this is happening?
this is because they both do not work exactly the same.
For the p-button directive, you must use the styleClass attribute, because it's not directly applied to the element :
<p-button styleClass="p-button-sm p-button-raised mr-2" label="Something" icon="pi pi-upload">
</p-button>
Cheers
I have used 'react-collapsible' library to implement collapsible feature.
<Collapsible trigger = "MyData" className = "addcss" >
<p>I am the content.<p>
<Collapsible />
I need to style the header-MyData when it's clicked differently inside a css. I tried with .collapsible__trigger but it changes the view for both.
I need to change css for .collapse__trigger isopen.
How do I do that?
Thanks!
I am trying to add a custom css class directive to my button, but whenever I do that, the angular material design goes away and the button goes back to its default ugly state. How can I make sure that my custom css class gets added to the button without it removing the mat-buutton effects?
<button
mat-button
[class]="todoItems.completed ? 'delete': null"
(click)="deleteTodo(todoItems._id)"
[disabled]="!todoItems.completed">
<mat-icon >delete</mat-icon>
</button>
Here is the css
.delete:hover {
color: red
}
I want my class to be applied only if the completed property is true and when that property is true the delete button will turn red when I hover on it.
The hovering part works fine but the problem I have is that the material design disappears and it turns into the default style of button
mat-button applies its own css classes to the <button> at run time.
When you are doing [class]="todoItems.completed ? 'delete': null" it is hard overridding these classes.
To append your class to the existing ones, you need to use ngClass instead.
When using ui-select with theme Bootstrap, the "select" looks the same size of a Bootstrap button, ie: btn btn-default
I want the select to look like a "btn-sm" button.
How can I do that? what classes should I modify?
A solution someone gave in the Github site of ui-select:
Wrap the directive in a div with form-group-sm, eg:
<div class='form-group-sm'><ui-select>...</ui-select></div>
https://github.com/angular-ui/ui-select/issues/169#issuecomment-298361767
I have the following elements I have applied the Bootstrap btn and default-btn classes to:
<input class="btn btn-default add-to-cart-btn" type="submit" name="addcart" value="Add to Cart" />
<div class="btn btn-default enquire-btn" >Enquire</div>
My CSS selectors look like:
.add-to-cart-btn, .enquire-btn {
//CSS
}
However, only the add-to-cart-btn CSS overwrties the Bootstrap CSS.
Would anyone know why this is or if/why Bootstrap has issues with overwriting styles on divs?
Your CSS must be more specific than the css you are trying to overload.
Your are doing .add-to-cart-btn, .enquire-btn.
So bootstrap might be doing "div.enquire-btn". This is more specific than your CSS.
To overload it div.enquire-btn.
I would try making two different classes.
.add-to-cart-btn {...}
.enquire-btn {...}
Your first issue is that for your input class you've spelt "btn-default" incorrectly. So the bootstrap.css for that class isn't being used, which is why your custom code is working for that and not the other.
Without seeing the rest of your document, I can only assume that your custom css is being loaded before the bootstrap stylesheet which is why that is receiving preference. Try making your custom selectors more specific by adding the btn class to them.
eg;
.btn.add-to-cart-btn, .btn.enquire-btn {
//CSS
}
This is quite strange. But I will try to do this instead to see if it's working or not.
input.add-to-cart-btn, div.enquire-btn {
/* Your Style Here */
}