I'm working with Bootstrap 4, and for the <select> elements i want to use Select2.
The problem is that it does not have a official Bootstrap 4 template, so i was looking and i found this project, which is awesome.
But i having one issue with is-invalid class.
When i use it, the <select> borders change to red when the page loads and then return to its normal state
I try to make a simple class to use with the same Bootstrap color like
.invalid-select2 {
border-color: #dc3545;
}
.invalid-select2:focus {
border-color: #dc3545;
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
But the result is the same;
You can see the problem in
JSFIDDLE
Someone has idea how can i deal with it?
Thanks so much!
The flikcering is because you're adding the class the the select box's class attribute so the style is applied immediately. Afterwards, select2 classes are applied which hides the select box (causing the flicker).
One way around this is to simply apply the class when the document is ready.
$(document).ready(function(){
$('#combo').select2
({
theme: 'bootstrap'
});
$("#combo + span").addClass("is-invalid");
});
EDIT: To fix the focus problem you're experiencing you need to over-ride a couple of classes.
.is-invalid .select2-selection,
.needs-validation ~ span > .select2-dropdown{
border-color:red !important;
}
.is-invalid .select2-selection selects the top part of the dropdown, and the second class (.needs-validation ~ span > .select2-dropdown) selects the actual dropdown list. Note that I've added .needs-validation to the top level div once the form is validated you can simply toggle that to was-validated
https://getbootstrap.com/docs/4.0/components/forms/#validation
Here is a fiddle
I was able to use some CSS to style a red boarder
.is-invalid + .select2-container--bootstrap .select2-selection--single {
border: 1px solid #f44336;
}
Did you try to add !important to css property?
Related
I have primeng and like the attached screenshot.
As you can see both these primeng html tags has div class "p-dialog-mask p-component-overlay p-dialog-mask-scrollblocker" in common. I want a different overlay for the parent pages when the dialog opens up and a different one when the confirmdialog opens up. I tried below:
p-dialog, .p-dialog-mask.p-component-overlay{
background-color: #000;
}
p-confirmdialog, .p-confirmdialog-mask.p-component-overlay{
background-color: #rgba(0, 0, 0, 0.4)!important;
}
This didnt work. I tried to use a different style with [styleClass] in p-confirmDialog tag but even that wouldnt work. Irrespective of what i give , it takes the css for p-dialog and not picking a different css for p-confirmdialog.
For now I have added class names like below:
.p-dialog-mask.p-component-overlay.ng-tns-c45-0,
.p-dialog-mask.p-component-overlay.ng-tns-c45-1,
.p-dialog-mask.p-component-overlay.ng-tns-c45-2,
.p-dialog-mask.p-component-overlay.ng-tns-c30-0,
.p-dialog-mask.p-component-overlay.ng-tns-c30-1,
.p-dialog-mask.p-component-overlay.ng-tns-c30-2{
background-color: #000;
}
This works but it isnt consistent in all the enviornments. When I move code to UAT the generated class names are different in the browser and I have to keep changing . Is there a way i can change the styles without touching the class names. I am expecting this to be handled in p-dialog and p-confirmdialog. Any suggestions please. Additionally I would add black to p-dialog only on main page and in the remaining pages it should take the default css.
Any help highly appreciated. Thank you.
I assume it comes from style isolation
Try to add :host ::ng-deep on the classes you want to override.
I had to do it multiple times in my project using primeng.
For example
:host ::ng-deep .p-chips.p-component {
width: 100%;
}
Here in your case, it would be
:host ::ng-deep p-dialog,
:host ::ng-deep .p-dialog-mask.p-component-overlay {
background-color: #000;
}
:host ::ng-deep p-confirmdialog,
:host ::ng-deep .p-confirmdialog-mask.p-component-overlay {
background-color: #rgba(0, 0, 0, 0.4) !important;
}
For my thesis I have to make a website using the Bootstrap 5 framework, so I've been messing around with "Bootstrap Cards". When I click on a card a border appears. Thought I might fix it overwriting it using the pseudo element :focus
.card:focus {outline: 0 !important;
E.g.:
I guess it's something else then an outline, but don't have the needed knowledge of HTML
Thanks already,
Luk Ramon
Check .card class has a border
To remove it simply override it to border: none;
Try using this code:
.card:focus {
border: none !important;
}
See if it will solve the problem
I have this bootstrap and custom css that generates nice "books on shelves". When I use the code itself it works. But when I insert the code in the div:
<div class="panel panel-default">....code from the link...</div>
suddenly the shelves disappear. I noticed that somehow pseudo elements (:before, :after) stop working when I use them in panels. Do you have an idea what is going on? Please help :)
bootstraps panel has a background color of white that overrides your :before and :after css.
.panel {
background-color: #fff; /*GET RID OF THIS*/
}
(you can choose to do this in different ways:
you can change the native bootstrap (not recommended, and you cant if you're using cdn).
add a different class on the panel and put this code in:
.newClass { background-color: none !important; }
(you can use none or transparent) either one will get your shelves css back
So, whenever I click on my button, this happens:
Is there any way to prevent this?
Thanks guys. :)
Answered already (probably many times, but here's one example): https://stackoverflow.com/a/3397158/839847
Quoted here for convenience:
This border is used to show that the element is focused (i.e. you can
type in the input or press the button with Enter). You can remove it,
though:
textarea:focus, input:focus{
outline: 0;
}
You may want to add some other way for users to know what element has
keyboard focus though for usability.
Chrome will also apply highlighting to other elements such as DIV's
used as modals. To prevent the highlight on those and all other
elements as well, you can do:
*:focus {
outline: 0;
}
Think you keeping your button inside <a> tag. If so use this code
a #btnid
{
border:none;
}
panelMain.setBackground(Color.WHITE);
Button.setBackground(Color.WHITE);
Adding this to your JFrame inherited class constructor will resolve the issue. The color does not have to be white, you can set it anything, just make sure the panel and button are of the same color. and please don't trust my answer too much because I too am a beginner
To make this work for me in Chrome in 2021 I added this to my Site.css file:
.btn,
.btn:focus,
.btn:active,
.btn:hover {
border: 0 !important;
outline: 0 !important;
}
I want to remove the backdrop on the modal, i know there is a hasBackdrop property when opening the modal but i only want to hide the backdrop based on some condition which will take place on the modal. So i was thinking I could do so with css but after inspecting element on the modal, I couldnt find anything relating to the backdrop's css.
I quite don't understand the question.
If what you need is maybe remove the shadow box of the dialog, just find the component which contains the dialog you need to work on, find it's style file and add this:
/deep/.mat-dialog-container {
box-shadow: none;
}
More info of the usage of deep can be found on angular docs and more example of their usage here (stackoverflow's question) and on angular's blog website.
If what you need here is remove the backdrop then beforehand create a class like
.no-backdrop {
background: none;
}
and add it to the function, which is used to create a dialog:
this.dialog.open(LoaderComponent, {
backdropClass: 'no-backdrop',
});
You can also just add false as value to the field hasBackdrop like:
this.dialog.open(LoaderComponent, {
hasBackdrop: false
});
as per default, the value is true.
More information can be found on angular material v5's webpage.
Hope it helps someone.
.mat-dialog-container has box-shadow, you can remove the box-shadow. For example you can add box-shadow: none; as an inline role or box-shadow: none !important; . Both will remove the box-shadow.
Try this:
In your .css/.scss file overwrite class
/deep/.cdk-overlay-dark-backdrop {
background:none!important;
}