Am using Angular 6 App. I want to change the style of ng-multiselect-dropdown. If i override the style using inline,external and internal, it does not affect anything. Only if i change the style in node modules the change effects in UI. But it is not the correct way.How should i achieve this?
style.css
.multiselect-dropdown .dropdown-btn .dropdown-down {
display: inline-block;
top: 10px;
width: 0;
height: 0;
border-top: 5px solid #adadad;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
}
you can use !important to you custom ccs inside style.css file
like:
display: inline-block !important;
second solution you can make component ViewEncapsulation.None
I thing this may work..
Related
I used my angular 6 project for the ngx-image-cropper that one is working fine, I try to change that cropper style but its not a change , any one know how to do that correctly
I used this style
.cropper .move {
width: 100%;
cursor: move;
border: 2px solid red;
}
Try to add style in parent component (index.html) OR global CSS (styles.css) with the important attribute.
index.html
.cropper .move
{
width: 100%;
cursor: move;
border: 2px solid red !important;
}
I want to make a custom cursor, I have a css class which is exactly what i want to put on my cursor, but I cannot find a way to actually put that class onto my cursor, I am not sure if this is a possibility at all, anyone know how I can do this?
this is my css class.
.myicon{
width: 0;
height: 0;
border-top: 4px solid transparent;
border-left: 8px solid red;
border-bottom: 4px solid transparent;
right:100%;
top:-5%;
position: absolute;
clear: both;
content:'';
}
is there anyway I can change my cursor to have this class?
you can pass url of png image
.module {
cursor: url('path-to-image.png'), auto;
}
The selection button as shown in the image below is not showing in my css set up for the select option of the website.
http://www.thefixedgearshop.com/nl/frames/aventon-frames/aventon-cordoba-frameset-wit
Select option without the button:
Select option with button:
Button that is missing:
Here is the CSS code for the option:
product-options dd select {
width: 100%;
border: 2px solid #aab2bd;
background-color: #f4f4f4;
width: 100%;
border: 2px solid #aab2bd;
color: #666;
font-size: 13px;
padding: 9px;
border-radius: 3px;
border: 1px solid #999;
-webkit-appearance: none;
cursor: pointer;
A way I've seen custom dropdowns done before is by using the little drop caret as a background-image with a background-position value of whatever puts it in the right place for your design.
Have a look at the pages linked below.
Background-image attribute W3Schools
Background-position attribute W3Schools
I have styled all my text fields with a gray border, and for the fields with class="form_field_error", I want the border-color to change to red.
I have tried the following code, but I can't get my class to override the previously defined border? What am I missing?
HTML:
<input type="text" name="title" id="title" class="form_field_error">
CSS:
input[type="text"] {
display: block;
height: 15px;
font-weight: normal;
color: #777;
padding: 3px;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.form_field_error {
border: 1px solid #f00;
}
I created a jsFiddle to illustrate the problem.
The input[type="text"] css takes precedence over the .form_field_error css.
Change it to input.form_field_error and the border will work.
Try this:
.form_field_error {
border: 1px solid #f00 !important;
}
I would recommend using:
input[type="text"].form_field_error {
border: 1px solid red;
}
The "!important" rule should only be used as a last resort - nuclear option - because it will surpass all other attempts to target an element based on precise and relevant specificity, reducing the control you have and creating potential roadblocks for future developers. Therefore the proper way, and the best way to handle it is to start with the same selector as the original one you are trying to override, then simply add the one thing that distinguishes it from the original. This way the specificity will be precisely what you want.
Have you tried specifying which div to apply the red border to like this?
input.form_field_error {
border: 1px solid red;
}
And on a side note - the ID you set as 'title' is that just for that one or are you thinking of reusing that?
Because you could also do ->
#title.form_field_error {
border: 1px solid red;
}
I am new to the Vaadin framework.I'm now trying to learn it by rebuilding the demo on their front page of Quciktickets dashboard using the Eclipse vaadin plug-in. Now I'm using css in my Theme to configure the sidebar part of that page.
My problem is after I add the buttons in the sidebar, they seems to be too far away from each other. So how can I fix it? I've tried to use padding, but that will only change the size of the button block while I wanna change the spacing between the blocks. Thx for anyone paying attention or giving hints for such a noob question.
code define the nativebutton layout:
.sidebar .sidemenu .v-nativebutton {
-webkit-appearance: none;
display: block;
padding: 10px 14px 10px;
width: 100%;
border: none;
margin: 0;
/*position: relative;*/
border-top: 1px solid #4b4c4d;
border-top-color: rgba(255,255,255,.05);
border-bottom: 1px solid #353637;
border-bottom-color: rgba(0,0,0,.18);
background:transparent;
color: #888a8c;
font-weight: normal;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
text-align:center;
}