We Keep Coding

How to style with css <v-divider> <v-divider/> horizonatl in vutify

I am working on project vujs add vutify but I should to use commponent.
.horizontal{
border-color: #F4F4F4 !important;
border-width: 2px ;
/*border-width: none !important;*/
}
<v-divider horizontal class=" horizontal hidden-md-and-up" ></v-divider>
I have try to use this code but nothing doesn't happend.
If I try to use inspect element on web divider display as you can see.
Anyone can Idea?

You probably run into specificity issue with your css, meaning other css is to "powerful". You can try this code below that makes it more specific targeted. Note I did changes to both the component class name and the css.
.theme--light.v-divider.v-divider--horizontal {
border-color: #F4F4F4 !important;
border-width: 2px;
/*border-width: none !important;*/
}
<v-divider horizontal class="v-divider--horizontal hidden-md-and-up"></v-divider>

How to skip materialize css file getting applied to ag-grid components

I have a .cshtml file which contains search/upload/download/save buttons that uses materialize.min.css for styling of these buttons and a ag-grid in the same page to show the uploaded file data in the grid.
So the page is referred to both materialize.min.css and ag-grids javascript community edition file i.e. ag-grid-community.min.js.
I wanted to select each rows of ag-grid and then send it to backend for processing. So i have enabled ag-grids column property checkboxselection. But unfortunately the checkbox in ag-grid is not working (i.e. not able to check the checkbox) since CSS of materialize.min.css are getting applied to checkbox element instead of ag-grids checkbox CSS.
I have tried below ways to sort this out but none helped,
Changed the order of CSS files in my page.
Wrote a separate CSS file and copied ag-grids checkbox related CSS and added !important tag to each of its properties.
Tried using ag-grids cellclass property.
As per my project structure, I can't have separate CSS file for search/upload/download/save buttons because its written as a separate framework.
Is there any way to bypass materialize.min.css file getting applied to ag-grid?

I came across the same issue recently and the following worked for me, inspired by this answer.
Add the following CSS to undo the Materialize formatting as per the link above:
[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) {
opacity: 1 !important;
position: relative !important;
pointer-events: inherit !important;
}
[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after {
display: none !important;
}
[type="checkbox"].reset-checkbox+span:not(.lever) {
padding-left: 10px !important;
}
Add the following to your ag-grid. This will add the class to all the checkboxes. It needs to called dynamically on the scroll event because ag-grid use DOM Virtualisation.
gridOptions.onBodyScroll = function(){
var inputs = document.querySelectorAll(".ag-checkbox-input");
for(var i = 0; i < inputs.length; i++) {
inputs[i].classList.add('reset-checkbox');
}
}

After many trial and error method, having the below css code in new css file and then refereeing it in working page worked for me.
[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
position: initial;
left: initial;
opacity: initial;
background-color: initial !important;
cursor: default !important;
appearance: checkbox !important;
box-sizing: border-box !important;
margin: 3px 3px 3px 4px !important;
padding: initial !important;
border: initial !important;
left: 0px !important;
}
input[type="checkbox"], input[type="radio"] {
box-sizing: initial;
padding: initial;
background-color: initial !important;
cursor: default !important;
appearance: checkbox !important;
box-sizing: border-box !important;
margin: 3px 3px 3px 4px !important;
padding: initial !important;
border: initial !important;
}

styling facebook button in asp.net

In the dynamic login button i've ._4z_d ._4z_f class with some padding . And i'm giving him padding through styling tags as
._4z_d ._4z_f {
padding: 9px 24px !important;
}
so as expected my padding is not implemented because button is dynamic and it's original padding is also dynamic . Any help will be quite appreciatable

The fact that the button is dynamic shouldn't be a problem for you, try giving it a block box model, I suspect that the button is still inheriting its default box model.
._4z_d ._4z_f {
display: inline-block;
padding: 9px 24px !important;
}

Can't override margin-bottom from navbar on bootstrap with my own css

I've tried to change on navbar, the margin-bottom that is 20px.
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
This error occurred when I've tried to put an empety content. So, to solve this I use in my css, !important:
.navbar1{
margin-bottom: 0px !important;
position: absolute;
min-height: 50px;
border: 1px solid transparent;
}
and added on the index page the navbar1 on the class:
<div class="navbar navbar1 navbar-inverse navbar-fixed-top" role="navigation">
How ever, the !important override the margin-bottom: 20px but it still keeps active, i've tried with div.navbar1 but it's the same problem.
Any suggestions?

Do you load it in 2 seperated css files? If yes your overwrite have to be loaded at last.
But I think it is better to overwrite it directly with modifying the .navbar attributes.
So make a new css file for your overwrites load it behind the bootstrap.css and than put in your overwrites:
.navbar{
margin-bottom: 0px !important;
position: absolute;
}
And delete the navbar1 in html. This works for me every time I modify the bootstrap css.

Do not forget that margin may overlap one another. maybe the margin-bottom that you see isn't because of your div. Please inspect the element (Right click -> Inspect Element) and go to "Box Model" or "Layout" tab to see there the real margin of this specific div.
A code sample will really help us (use http://jsbin.com or something similar)

Actually, the margin-bottom in bootstrap is assigned to ol and ul elements, not the nav or navbar classes, which is why this didn't work.
So, instead of adding "margin-bottom: 0px !important;" to .navbar, try assigning it to an ol or ul element.
Also, if all goes well and the css file is linked after the bootstrap file, the !important is no longer neccessary.

Jquery mobile 1.4.0 remove disc from custom icon

As a wrote in the subject I'm going crazy for remove the disc from the custom icon on my JQM APP.
I've tried some solution found on the web but nothing is working.
This is a demo where on the left I got my home custom icon with disc and on the right the native home icon without disc:
http://jsfiddle.net/5nBVa/
This is the code I use:
.ui-icon-myhome:after {
background-image: url("http://www.mywine.info/images/theme/home.png");
/* Make your icon fit */
background-size: 24px 24px;
background-color: transparent;
-moz-border-radius: 0px;
-webkit-border-radius:0px;
border-radius:0px;
}
Anyone can show me the way to remove it?
Thanks

If I understand what you want, you just need to set the background-color of the link to transparent:
.ui-icon-myhome{
background-color: transparent !important;
}
Here is your updated FIDDLE
UPDATE: OP wants image to fill the circular button and be the same size as a standard icon button with disc.
The icon is actually on the anchor tag's :after. Making the background-size, the width and height the same size as the button will cause the image to take up the whole button space. Adjust the margin-top and margin-left to keep the image centered within the button:
.ui-icon-myhome:after {
background-image: url("http://www.mywine.info/images/theme/home.png");
/* Make your icon fit */
background-size: 32px 32px;
background-color: transparent;
-moz-border-radius: 0px;
-webkit-border-radius:0px;
border-radius:0px;
width: 32px !important;
height: 32px !important;
margin-top: -15px !important;
margin-left: -15px !important;
}
Updated DEMO

Not sure what you're trying to do, but have you tried adding class="ui-nodisc-icon" ?
Check Removing the disc in the following page : http://demos.jquerymobile.com/1.4.0/icons/index.html