I have a pretty standard veutify v-data-table with the standard pagination footer. I need to offset the footer items so they're not underneath an element that floats above them.
I've tried:
#table .v-data-footer {
padding: 0 100px !important;
}
and
.v-data-footer {
padding: 0 100px !important;
}
but neither way worked. We're using SCSS styling, not SASS, so the vue docs about footer-padding don't seem to help.
I've got reputation to spare, so the best answer will get 50 point bounty when 48 hours have passed.
Edit: I’m using Vuetify version 2.5.6
You can use the deep functionality to add scope to the class.
::v-deep .v-data-footer {
padding: 0 100px;
}
Change your style to padding: 100px 0 !important;. If this doesn't work, that means because of css specificity your style is not getting updated and you have to increase the specificity of your selector. For example if the data table has id as table-id you can try#table-id.v-data-table .v-data-footer to increase specificity.
If you are using older version of Vuetify then the class won't be .v-data-footer. It would be .v-datatable__actions
Related
I have a form with mat-errors that I'm trying to space out. I know I can simply space out the form fields themselves, but I've been trying to add margin/padding/border to mat-error elements, and they all get applied, but they don't move.
As far as the CSS goes, I've tried most things I can think of to force it to move. The styles are applied but nothing is actually changing.
mat-error{
display: block !important;
position: relative !important;
margin-bottom: 40px !important;
padding-bottom: 40px !important;
z-index: 999;
}
Why is this happening?
Change your css to class: .mat-error instead of mat-error.
In order to change styles in angular materials you should define a global stylesheet declared in the styles array of your angular.json configuration file. and custom all mat styles within.
In Styles.css:
.mat-error {
color: aqua;
}
The result will be:
Please read Customizing Angular Material component styles article for better explanation.
Vuetify v-app-bar has default css classeses v-toolbar__content and v-toolbar__extension that adds 16px padding on x-axis and 4px on y-axis that I want to get rid of.
I have tried overriding these classes in my css like below
.v-toolbar__content {
padding: 0px !important;
}
But it doesn't work. Anybody aware of some trick that would help get rid of the padding in v-app-bar?
In scoped styles, you cannot access child components directly. You need to use deep selector like this.
/deep/ .v-toolbar__content {
padding: 0px !important;
}
Or if you want to target using child selector, you can do:
.parent-class >>> .v-toolbar__content {
padding: 0px !important;
}
I recommend modifying the vuetify SCSS variables.
According to the v-toolbar API we can modify $toolbar-content-padding-y and $toolbar-content-padding-x in our variables style file.
$toolbar-content-padding-x: 0;
$toolbar-content-padding-y: 0;
If you haven't configured a variable file, please follow the SASS variables guide.
When we are creating a web page using bootstrap we can set margins. But web browser also gets some margins. Although code as div(class="container-fluid") or code as margin:0; and padding:0; based on the container in the CSS file, I couldn't solve the problem. Can you help me?
Some browsers have a margin on the body tag. Set that to 0 somewhere in your css.
body {
margin: 0;
}
This is Browser default margin for body:
Fix It Like this:
body {
margin:0;
}
Set the margin to zero on any element is simple just type something like
body{
margin:0
}
Although sometimes bootstrap has his own margin rules included like setting margin on h tags, you could remove them as well by using more specific rules (read about specificity here) or by using important
h4{
margin: 0 !important
}
The reason for that is browsers have default styling for elements.
To reset margin only on body element you can use:
body {
margin: 0;
}
To reset all styling (which is not so-bad thing) in all browsers you can use css library called normalize.css.
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
This library is used by big companies as GitHub, Twitter, Soundcloud, Guardian, Medium and many others.
Although you put container-fluid, sometimes it doesn't make the width 100% fit the screen because browsers make a default margin and padding.To make it fit the screen you have to do like this.
body{
padding: 0;
margin: 0;
}
If it doesn't work make them important as following.
body{
padding: 0 !important;
margin: 0 !important;
}
I was just wondering if it's possible to add padding to the select options in select dropdowns in the Twitter Boostrap framework. I've added padding to all my other inputs so the padding on my select options is out of line. I would expect something like...
option {
padding: 0 24px;
}
... to do the trick but this does nothing to a bootstrap select option.
Any help would be appreciated.
Edit:
Here's the jsFiddle:
http://jsfiddle.net/sbmw3egx/
I was able to get the text in the select to be adjusted to the left by setting the text-indent property:
select.form-control {
text-indent: 16px;
}
A bit more about the text-indent property here: http://www.w3schools.com/cssref/pr_text_text-indent.asp
Hope that helps!
Edit: It looks like Chrome/Safari uses text-indent, Firefox uses text-indent and padding-left, and IE makes use of padding-left for select. I'm not sure how you would specify the CSS to make it consistent across all of these browsers.
Assuming you're using the Bootstrap form-control, this first option displayed will take on the style of the form-control CSS class. So you'd need to override form-control too.
option {
padding: 0 24px;
}
select.form-control {
padding: 0 24px;
}
Demo: http://bootply.com/dCJM6I7z5V
This is one of those elements that is difficult to style. Normally I would try to just use simple css but in cases like this (if you really must style it) then I would use a plugin.
http://www.bartos.me/heapbox/ is one example.
I am starting a new project, so i thought to start using Reset.css in my projects. i got the concept of using Reset.css, but one thing is bothering me is that does if affects my other style applied on the same element.. like in reset.css div have 0 margin and 0 padding... and if i apply margin to some of the divs in my stylesheet, wont it get disturbed?
Please clear my this doubt
Not if the style applied to your other divs is more SPECIFIC.
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
In general any style applied using a class, or an id in the selector is going to take precedence over one which doesn't. But there are many other rules in this area you should become aware of.
i.e.
div.myStyle {...}
will always overrule
div {...}
You have to include reset.css first and then include your own stylesheet file. and be sure that your styles wont be overwritten by reset.php.
What you neeed to do is load reset.css as a first style sheet.
Anything else loaded after it will be overriding reset.css
e.g if you specify in reset css: p { margin: 0px; padding: 0px}
and than load style.css with style: p {margin: 2px; padding: 2px}
The style load as last one will be used.
I personaly use technic with
* { margin: 0px; padding: 0px; border: 0px; outline: none; list-style: none;}
Put it at the top of css file and job done:) No need for extra .css fil.