I need to make my Previous and Next buttons smaller.
Im using the dataTables plugin alongside bootstrap so the tables are already styled.
Here you can see the involved files .css and .js
I've tried twicking them a bit but I can't make it work for me, I can't fing the buttons-related data.
Thanks in advance, any direction you may point would be helpful.
You can select those two links by class
.previous, .next {
// CSS here
}
Here's a live version to play with.
Answering to an old question.
You are probably looking for this. I found it somewhere on Datatable's official site not sure where. But for me the below solution worked:
.dataTables_paginate>span>a {
margin-bottom: 0px !important;
padding: 1px 5px !important;
}
.dataTables_paginate>a {
margin-bottom: 0px !important;
padding: 1px 5px !important;
}
Hope it helps someone like me.
Related
I want to create this type of animation in textbox in materialize css. Checked many codepen an websites but can't find anything which helps with materialize css. Sometime two border display or sometime no effect.
Anyone provide some sourcecode of css so i can implement it. I don't want to include other css library. Only with materialize css and little bit css.
.input-field input[type=text]:focus {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
I think customizing this after or before presudo will work.
Created Pen Here :
https://codepen.io/naitik_kundalia/pen/bRNeaz
I had created sliding border but it also work in reverse. Textbox removed on focus after animation end.
Check this Pen:
$(".mat-input").focus(function(){
$(this).parent().addClass("is-active is-completed");
});
$(".mat-input").focusout(function(){
if($(this).val() === "")
$(this).parent().removeClass("is-completed");
$(this).parent().removeClass("is-active");
});
https://codepen.io/legeoffrey/pen/VYMLNq
Hope this will help you
I am new to bootstrap, and I added bootstrap 3 into my project and it shrunk all the font sizes, I never had any font size specified in these classes. I thought bootstrap 3 had the default size to 14.. is there something else I need to do?
Thanks
It appears to be happening, at least as of version 3.3.6, due to this block on line 1097:
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
You can restore your font-size by adding this to your stylesheet:
html
{
font-size: 100%;
}
You can customize/override anything - if, for example, you load YOUR css file AFTER the bootstrap file, then your settings will override it. Whatever you can dream:
p {
font-size 18px;
}
and so on...
I strongly recommend digging into the source code: https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
html {
font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
UPDATE: TO clarify, "No" you shouldn't have to do anything else. It sounds like there is another problem. The linked source code has changed since the original answer date... as of Feb 2015, it looks like this:
html {
font-size: 10px;
}
body {
font-size: 14px;
}
Assuming we've set our project up correctly, (bower install bootstrap is pretty easy)... attempting to echo text outside of the body should result in 10px text, inside body should be 14px.
If you don't see 14 point text inside the body, then something else might be stepping on it. I'd next inspect in in Chrome (for example) to confirm where the font-size was coming from.
I'd like to add that I think it's helpful to understand how these values we see in this /dist/css file are derived from less variables... the defaults should work out of the box, but you have easy control over everything, including the body text size: see http://getbootstrap.com/css/#less-variables.
many old mobile brwoser do not support position:fixed, I tried writing a sloution myself,it works, but not smooth enough.
I googled, no luck for now.
so I would like to know if there is "smooth" solution for this, thanks.
i think it would be better to mention the browsers that you have problems with. for example I assume you have problems with IE6. I will try to answer your question according to my assumptions. So the 100% height on the body and html stuff is in case you want to do fixed positioning along the bottom edge of the browser window.
like so:
* { margin:0; padding:0; }
html, body {
height: 100%;
}
body #fixedElement {
position:fixed !important;
position: absolute; /*ie6 and above*/
top: 0;
right: 0;
}
#page-wrap {
width: 600px;
margin: 0 auto;
font: 16px/2 Georgia, Serif;
}
hope this will help please also check this site when having problems related to CSS
http://css-tricks.com/snippets/css/fixed-positioning-in-ie-6/
How should I go about optimizing CSS code? There's various CSS3 lines, like -moz- and -webkit-, border-top-left-radius, etc.. I believe bigger CSS files increase page load time significantly.
And another question: I've written quite some code, however some of it is left unused. I have over 2000 lines of CSS code, and I bet around 200-300 lines could be removed, perhaps even more. Is it worth revising all the code? It would take quite some time...
GZip the files before uploading them on server
It will reduce the files size significantly
Edit: Effect of GZipping -
By gzipping the .css file on Bargaineering, its size dropped from 28.2K to 7.3K, a 74.1% savings.
always remove the last semicolon:
body { background: black; color: white; }
to
body { background: black; color: white }
combine multiple properties:
.class { margin-top: 10px; margin-right : 20px; margin-bottom: 30px; margin-left: 40px; }
to
.class { margin: 10px 20px 30px 40px; }
use simple colors (instead of `#FFFFFF, #AABBCC, #FF0000 put #FFF, #ABC, #F00)
the most important thing: minify your code before uploading on the server. It will remove whitespaces and comments and significantly reduce your code and file size.
The smaller the file, the quicker it will download and the faster users can render the styles. There are various minifying scripts, I'd check out the YUI Compressor: http://refresh-sf.com/yui/
Dear folks.
Imagine a sprite image called icons.png assigned to css class .icons with various 10x10px graphs. Now you want another class which scales up the sprite graphics exactly twice 200% (making them 20x20 pixels on the screen)
How do I achieve this enlargement purely in CSS?
Much appreciated!
.icons, .iconsbig{ /* WORKS FINE */
background-image:url(http://site.org/icons.png);
background-repeat:no-repeat;
vertical-align: middle;
display: block;
height:10px;
}
.iconsbig{ /* make this one twice as big as the original sprite */
background-repeat:no-repeat;
height:20px;
background-size: 20px auto;
image-rendering:-moz-crisp-edges;
-ms-interpolation-mode:nearest-neighbor;
}
update:
problems with the above code:
It works in IE9, but not in FireFox, by most used browser doesnt know how to resize????
in IE9, the enlargement is smudgy and not neithrest neighbour pixel perfect at all??
It is supported in pretty much everything except for < IE9...
.iconsbig {
-moz-background-size: 20px;
background-size: 20px;
image-rendering:-moz-crisp-edges;
-ms-interpolation-mode:nearest-neighbor;
}
W3C spec.
Update
Looks like Firefox wants its vendor prefix (-moz) on the property.
You can use the css3 background-size property:
.iconsbig {
background-image:url(http://site.org/icons.png);
background-size: 20px 20px;
}