I am using Datatbale 1.10.10
In the Buttons Colvis I have set it to Multicolumn Layout.
I have added this CSS to get the checkbox in the buttons. But it doesn't show on the second column in Chrome, but does get displayed in the Firefox.
https://stackoverflow.com/a/32701608/4017803
Here is the CSS code snippet
.dt-button-collection a.buttons-columnVisibility:before,
.dt-button-collection a.buttons-columnVisibility.active span:before {
display:block;
position:absolute;
top:1.2em;
left:0;
width:12px;
height:12px;
box-sizing:border-box;
}
.dt-button-collection a.buttons-columnVisibility:before {
content:' ';
margin-top:-6px;
margin-left:10px;
border:1px solid black;
border-radius:3px;
}
.dt-button-collection a.buttons-columnVisibility.active span:before {
content:'\2714';
margin-top:-11px;
margin-left:12px;
text-align:center;
text-shadow:1px 1px #DDD, -1px -1px #DDD, 1px -1px #DDD, -1px 1px #DDD;
}
.dt-button-collection a.buttons-columnVisibility span {
margin-left:20px;
}
Check box works with single column.
So I have converted single column to look like multi-column.
buttons container width double than the buttons width and float left to the buttons.
But this is just a temporary solution. But I would like to know how to fix the multicolumn layout in Chrome.
Related
How do I make the radio button shadow to be rounded in Chrome like how it is displayed in IE? Any help will be appreciated!
IE: (like this)
CHROME: (not like this)
HTML:
<div class="radio"><input type="radio"><label>C#</label></div>
<div class="radio"><input type="radio"><label>Java</label></div>
CSS
input[type="radio"] {
box-shadow: -4px 0 0 maroon;
border-radius: 10px;
}
JS FIDDLE:
http://jsfiddle.net/nikib/b85zpgu5/
You could change the -webkit-appearance property of the input element to get initial or inherit. Then style is according to your need.
input[type="radio"] {
width:15px;
height:15px;
box-shadow: -4px 0 0 maroon;
border-radius: 999px;
-webkit-appearance: inherit;
border:1px solid #999999;
position:relative;
box-sizing:border-box;
}
input[type="radio"]:checked:before {
content:"";
position:absolute;
border-radius: 999px;
left:25%;
top:25%;
width:50%;
height:50%;
background:#999999;
}
Updated Fiddle
I'm making the css tabs with shadows. How can I get rid of the bottom shadow in label? Here's an example: http://codepen.io/ekscentrysytet/pen/QbNdEB
I've tried z-index: -1; for label:after but shadow disappears.
What about using pseudoelement :before (you have used alreasdy after) to make a little white rectangle to hide it?
label:before {
content:'';
display:block;
width:100%;
height:15px;
background-color:#fff;
position:absolute;
bottom:-11px;
left:0;
z-index:10;
}
Codepen
Try this:
.tabinator input:checked + label:after {
border-bottom: none;
box-shadow: 0 -8px 15px #939393;
}
I am trying to understand why IE 7>10 is showing a black border on a submit button. In order to clear it, I have to click inside the fieldset and then it goes away. But comes back when I click send or cancel. Is this a common problem with IE? I have included screenshot. Thanks!
css code
.submit
{
margin:-50px 0 0 -148px;
background-color:#eee;
height:40px;
width:120px;
padding:0;
border:1px solid #666;
color:#42A0FF;
}
.cancel
{
margin: -51px 0 0 -20px;
background-color:#eee;
height:40px;
width:120px;
padding:0;
border:1px solid #666;
color:#42A0FF;
}
fieldset
{
background:#f2f2e6;
border-color:#cccccc #cccccc #cccccc #cccccc;
margin:10px 0 46px -150px;
width:404px;
display:block;
text-height:10px;
padding-bottom:15px;
}
Try resetting the main input
input {border:0; margin:0;padding:0;}
And add a span to give the span the border you want so it will work universally:
.input-shell {border: #ccc 1px solid}
<span class="input-shell"><input button /></span>....
Heres a JSFIDDLE:
http://jsfiddle.net/Riskbreaker/tqnhg/1/
Heres a ref of same thing:
Any way to remove IEs black border around submit button in active forms?
Finally do this:
input[type=submit],
input[type=reset],
input[type=button]
{
filter:chroma(color=#000000);
color:#cccccc;
}
How can i get these spaces covered with this box shadow?
CSS-
.button
{
height:24px;
width:120px;
background:black;
position:absolute;
border-radius:2px;
padding:3px;
box-shadow:4px 4px 0px 0px #444;
}
Just a fiddle
Changing the h-shadow and v-shadow will position the shadow on the box.
If you want the shadow to be closer, change the distance of the shadow.
Test it here
Using close shadows might not get you that much effect. Instead you can use background properties and positions... Here is a good example.
Try this:-
.button
{
height:24px;
width:120px;
background:black;
position:absolute;
border-radius:2px;
padding:3px;
box-shadow:2px 2px 0px 2px #444; // changed
}
How can I style a button on IOS to look like the default active state?
I will be using touchstart, but want the button to look like a regular button that is being pressed.
HTML:
<button class="active"> I am pressed </button>
CSS:
button.active{
???
}
Images: (sorry, they are not the exact same crop-size)
EDIT: my latest attempt is:
button.active
{
border-radius: 12px;
border: 1px solid black;
background-color: #888;
box-shadow: 0 0 2px 2px #888;
}
It’s pretty close but the border shrinks in.
You could do this, faking a second border using the :before pseudo-elements
.active{
background:#e2e2e2;
font-weight:bold;
width:92px;
padding:.5em;
border:3px solid #e2e2e2;
border-radius:15px;
position:relative;
z-index:10;
}
.active:before{
content:"";
display:block;
position:absolute;
z-index:-1;
top:1px;
left:1px;
right:1px;
bottom:1px;
border:1px solid #000;
border-radius:15px;
}
Example: http://jsfiddle.net/E3jXr/