I want to give background color for 'Hide/Show columns' label in ColVis.js file where I need to do the change?
Looks like you can edit the css for the button in extras/ColVis/media/css/ColVis.css
.ColVis_Button {
position: relative;
float: left;
margin-right: 3px;
padding: 3px 5px;
height: 30px;
background-color: #fff; /* here */
border: 1px solid #d0d0d0;
cursor: pointer;
*cursor: hand;
}
Can't really see a way to do this using the api or options.
I suppose you could do this:
$('.ColVis_Button').css("background-color", "red");
These button styles are all CSS defined already. Just change the CSS in the ColVis CSS file that defines them.
This is the official and proper way because these are styles.
instead of css change is there any possibility to change in view page
jquery,i.e,using this,$('#example').datatable({});
You don't change it in the datatable init because that is JS that modifies the ColVis JS params and controls the plugins functionality i.e. not how it looks.
Related
I am working with jsf and I am using the h:selectOneMenu tag. Currently on the Website it is getting displayed like this :
selectOneMenu
But i would like to change the apperieance of the arrow at the end. It should have a red color and no background. I have tried a lot of things like using the overflow attribute or changing the background of the select item to the dropdown arrow i would like to have. Changing the Color of the element also effects the writing in it. For some reason putting the selectOneMenu into a div and adding folowing styles to it works fine:
.epSelect {
width: 240px;
overflow: hidden;
background: url(..arrowdown_red.png) no-repeat right #FAFAFA;
border: 1px solid #CDCDCD;
color: #333333;
height: 27px; }
.epSelect select {
background: transparent;
width: 257px;
height: 27px;
padding-top: 5px;
font-size: 12px;
border: 0;
border-radius: 0;
-webkit-appearance: none;
padding-left: 3%;
cursor: pointer;
}
"epSelect" ofcause beeing added as class to the div
Does anyone knonw the specific css element which can be addressed to change the color of the arrow only ?
in the standard html select tag it would be addressed by the label:after attribute as can be seen here : http://cssdeck.com/labs/styling-select-box-with-css3
Any help is much appreciated.
Simply put JSF is in this part merely an html generator in which it generates a plain html select/dropdown. Effectively your question is 'How do I change the icon of an html select'.
So look at the following Stackoverflow Q/A for answers
How to change down-arrow on select tag
CSS Select box arrow style
I am making a site in Bootstrap and am unable to achieve making a simple menu.
I want to make something like this:
So far I have achieved this:
I tried but cant make my CSS to work properly.
Here is my CSS Code:
.navbar-nav li a {
height: 90px;
line-height: 60px;
margin: 0 10px;
background-color: #f1f1f1;
font-size: 1.1em;
border-radius: 10px;
}
Any help would be appreciated.
Check this fiddle https://jsfiddle.net/gward90/h8cnbL5w/1/
To adjust the look of your buttons play with the padding of .nav>li>a Thats a BS default css class. The default padding value is set to padding: 10px 15px
You also need to remove the height from your .navbar-nav li a class that is whats making your buttons so large you also don't need the line-height.
I'm working on a project and now have some problem!!
I build a site basically generate content though javascript.
Here is my project site: http://www.makinoworks.com/makinogames/kancolle/
I use [jQuery]+[MixItUp]+[papaparse] to generate content sort in some rules
And also use [BootStrap] to show up Modal/ListGroup etc..
But when website finished, it doesn't display content.
It's strange that HTML current written but nothing display.
Thanks for helping.
If need any more information please tell me!
Add a font-size to the class .list-group-item or .list-group-item span
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
font-size: 10pt;
}
I'm trying to figure out how to decrease the size of the buttons on the kendoSlider (for that matter, the slider is also too large).
Their documentation doesn't really make any mention of it.
Why do I want to do this? I've recently added it to my footer and the buttons are so big that it's bumped up the size of my footer entirely. I'd rather decrease the button size instead of completely changing the size of my footer.
I would assume it's something with the CSS for the slider, but I haven't had any luck with that so far.
Here's an image to demonstrate what I mean:
if the Buttons to big, why just hide them?
With
showButtons: false
in the configuration.
The size of the Buttons you can change via css. For example:
.k-slider .k-button, .k-grid .k-slider .k-button {
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
/* new */
border: 1px solid red;
width: 20px;
height: 20px;
}
.k-slider .k-button .k-icon {
margin-top: 1px;
vertical-align: top;
}
Inspect the HTML element with chrome devtools or firefox.
I think the "size" of the slider you can adjust with this class:
.k-slider-wrap {
width: 100%;
height: 100%;
}
For the sprite-size eventually this helps out.
Or just creatte your own one.
I have DIVs on my form. I would like to use javascript to make these visible or invisible depending on some operation. Currently I am doing this:
$('#token2').html("<div style='padding: 2px 4px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border: 1px solid Red;'><span style='color: Red; '>Incorrect</span></div>");
and setting the contents of the DIV each time. Is there a way I can set this in CSS and just change a visible property instead?
$(#token2).toggle() will toggle the visibility, show() and hide() do the specific operations. Give it the style "display: hidden" to start it off invisible.
How about .hide() and .show()?
Not directly related to your question, but since you mentioned CSS, I'd really recommend just defining the styles outside of the HTML ...embedded in the JS... something like this:
#token2 > div {
padding: 2px 4px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid red;
}
#token2 > span {
color: red;
}
which simplifies the JavaScript down to
$('#token2').html('<div><span>Incorrect</span></div>');
although the .html() part is really irrelevant anyway, with the previously mentioned jQuery methods.
use this
.hidden {display:none}
<span id="incorrect-answer" class="hidden">Incorrect</span>
and then use jQuery .addClass and .removeClass to make it visible/invisible
e.g.
$("#incorrect-answer").addClass("hidden")
$("#incorrect-answer").removeClass("hidden")