I want to change the background color of my data table as a whole. I don't want to use the dark themed or light themed. I can't seem to change it even when using !important or using available classes.
Just add the relevant color class e.g. class="primary" or the name of the color from the vuetify color pack.
<v-data-table class="elevation-1 primary"></v-data-table>
Add a custom class to v-data-table tag like this:
<v-data-table ... class="elevation-1 test" ...>
elevation-1 is their standard class name. I added test to illustrate the point.
Add necessary styling to .test .theme--light.v-table selector in your custom CSS.
E.g. .test .theme--light.v-table { background-color: #00f; }
You may need to replace the theme name in the CSS path with your theme name.
If you look inside the DOM, you'll notice that class name test was applied to a <div> container, not the <table> element.
A simple way to include your CSS is with <style> tag inside your App.vue file:
<style>
#import './assets/styles/yourstyles.css';
</style>
How to include css files in Vue 2 has more on that.
You can use headers object to specify class as below,
headers: [{
text: 'Dessert (100g serving)',
align: 'start',
divider: true,
sortable: false,
value: 'name',
class: "blue lighten-5"
},
{
text: 'Calories',
value: 'calories',
align: 'center',
divider: true,
class: "blue lighten-5"
}]
The above code will add light blue background to your header. You can do more with the class attr in headers object
The current answers weren't working for my but I found a simple solution. I'll share it just in case anyone sees this in the future.
# 1. Add a class to the table element
<v-simple-table class="table">
...
</v-simple-table>
# 2. Add background color
<style scoped>
.table {
background-color: red;
}
</style>
Related
I am using CKEditor 5 with the React framework.
How do I set the background of the editor to dark grey when the editor is disabled?
I am using this CSS to set the background to white when enabled:
.ck .ck-editor__main > .ck-editor__editable {
background: #FFF;
}
However, I only want to change the background color value to grey when the child div has .ck-read-only but :has() has no browser support.
.e.g this does NOT work because browsers do not yet support :has()
.ck .ck-editor__main > .ck-editor__editable :has(> div.ck-read-only) {
background: #C3C3C3;
}
Implementation of component
<CKEditor
disabled={true}
editor={Editor}
config={{
toolbar: [
'bold',
'italic',
'underline',
'bulletedList',
'numberedList',
'link',
'|',
'imageUpload'
],
placeholder: 'Start writing your note'
}}
onReady={editor => {
console.log('Editor is ready to use!', editor);
}}
onChange={(event, editor) => {
const data = editor.getData();
console.log({ event, editor, data });
}}
/>
Oops, I made a mistake in my selector and where the classes were attached. This allows me to set the background color when disabled:
.ck .ck-editor__main > .ck-editor__editable.ck-read-only {
background: #C3C3C3;
}
//On Focus
.my-ck-active .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable, .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners{
border-color: #16a34a !important;
}
//on Error
.my-ck-error .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable, .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners{
border-color: red !important;
//you can add styling here whatever you want
}
You can customize the CKEditor style by using these classes
When CKEditor gets Focused
.my-ck-active .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable, .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners{
border-color: #16a34a !important;
//you can add styling here whatever you want
}
When CKEditor gets Error
.my-ck-error .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable, .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners{
border-color: red !important;
//you can add styling here whatever you want
}
Is it possible to set a margin around fields.
For example in image :
If I want to set lower (separated) checkBox in line with above once, is there a way to do it?
Marko
Start by inspecting the HTML code (with Chrome).
The code corresponding to the Checkbox Field is something like that:
<div class="form-field check-box-field"
data-modelclass="org.eclipse.scout.widgets.client.ui.forms.CheckboxFieldForm$MainBox$ConfigurationBox$CheckboxField"
data-classid="CheckboxField_org.eclipse.scout.widgets.client.ui.forms.CheckboxFieldForm"
id="scout.CheckBoxField[1-49]"
style="left: 0px; top: 14px; width: 1598px; height: 30px;"
>
<div class="field has-inner-alignment halign-left valign-top" style=
"left: 148px; top: 0px; width: 1420px; height: 30px;">
<div class="check-box" tabindex="0"></div>
<div class="label">
Checkbox
</div>
</div>
</div>
With CSS you can do anything possible:
.check-box-field {
background-color: red;
}
Now because you do not want to add some custom CSS style for all CheckBox Fields, you can define a custom Css-Class in your CheckBox:
#Order(4)
public class UnknownCheckBox extends AbstractBooleanField {
#Override
protected String getConfiguredCssClass() {
return "checkbox-under-listbox";
}
// ... Some Code ...
}
And now you add this CSS code:
.checkbox-under-listbox {
margin-left: 20px;
}
I have realized this example with the Widgets Demo Application (org.eclipse.scout.docs repository, releases/5.2.x branch). I added my css code in this file: org.eclipse.scout.widgets.ui.html/src/main/js/widgets/main.css (It is probably not the best approach to have everything in main.css).
You can deduce from this example how you can add an additional CSS/LESS module and macro to your application. This post: Inclusion of additional icons from font-awesome might also be usefull. You will have a main.css instead of a font.css.
WARNING: this is not state of the art.
At the end this is normal HTML development (single page application of course), so you can do what you want...
If you do not want to use the LESS compiler and the File preprocessor, you can simpelly add a normal CSS file in the folder:
<your_project>.ui.html/src/main/resources/WebContent
Let say:
<your_project>.ui.html/src/main/resources/WebContent/my_custom.css
Do not forget to include your CSS File between the <head> and </head> tags in the HTML index file:
<your_project>.ui.html/src/main/resources/WebContent/index.html
Something like:
<head>
<!-- some code -->
<link rel="stylesheet" type="text/css" href="my_custom.css">
<scout:stylesheet src="res/scout-module.css" />
<!-- some code -->
</head>
You can always use custom CSS: Let your field implement IStyleable and use setCssClass() to apply an appropriate CSS class. I'd try to avoid using such pixel pushing approaches as much as possible.
So I've been trying to apply the plugin to the Body Element and for some reason it just doesn't work..
Things I've tried:
$(function() {
$('body, html').slimScroll({
size: '8px',
width: '100%',
height: '100%',
color: '#ff4800',
allowPageScroll: true,
alwaysVisible: true
});
});
$(function() {
$('#body').slimScroll({
size: '8px',
width: '100%',
height: '100%',
color: '#ff4800',
allowPageScroll: true,
alwaysVisible: true
});
});
Does anyone know what Im doing wrong ?
Thanks in advance for answering
"What If I dont have control of the body tag ? and Im embed a template into a 3rd party site? so the body has no id tag it only has view-source:avatars.imvu.com/LadyKonstantine"
Since you need to apply slim scroll on body you have to use the body selector for jQuery. The code will be like this :
<script type="text/javascript">
$(function(){
$("body").slimScroll({
size: '8px',
width: '100%',
height: '100%',
color: '#ff4800',
allowPageScroll: true,
alwaysVisible: true
});
});
</script>
Remember these
Make sure you have installed both jQuery and slimScroll plugin.
Scroll will be visible if your body have height above 100%
If you would like to use $("#body") instead of $("body") don't forget to add
<body id="body">
More Details
Click here! to read more about slim scroll.
Attaching slimScroll directly to Body tag is not a preffered solution in my view. Try it and you will find the slimScroll wraps your BODY tag inside it's own DIV tag; at least I found it that way when I attempted to attached slimScroll to the BODY element. As a result, you will find the HTML of your page is a complete mess. The sequence of tags will be HEAD - slimScrollDiv - BODY. Instead, I suggest to have a wrapper DIV inside BODY immediately after you open BODY tag and then attach slimScroll to this wrapper DIV.
SlimScroll only works on div element. To achieve this, add a main wrapper just after the opening body tag. In this case I will call it:
In the HTML:
<div id="body"></div>
Then calculate the viewport height, not the HTML, document height. Once done, pass this value to the height of the slimscroll plugin. Example:
In the JS:
var viewportHeight= $(window).height();
$('#body').slimScroll({
height: viewportHeight+'px',
color: '#455A64',
distance: '0',
allowPageScroll: true,
alwaysVisible: true
});
You can also use the new CSS value of vh to compute the height of slimscroll. Example:
$('#body').slimScroll({
height: '100vh',
color: '#455A64',
distance: '0',
allowPageScroll: true,
alwaysVisible: true
});
I'd like remove the header controls from the top of the Kendo UI Scheduler control, i.e. the part outlined in red from this screenshot:
I just want to show one static Day view for a single day. Any ideas?
for all Day Slot hide
$("#scheduler").kendoScheduler({
allDaySlot: false,
});
for Toolbar hide:
<style>
.k-scheduler-toolbar {
border-width: 0 0 1px;
display: none;
}
</style>
I'm not sure how to remove all of that, but you can at least remove the All Day slot by selecting allDaySlot: false in the views collection. If you only want to show the "day" view, you would use something like this (also showing how to remove footer; same doesn't appear to work for header, though):
$("#scheduler").kendoScheduler({
views: [
{ type: "day", selected: true, allDaySlot: false}
],
footer: false // removes the footer
});
Please check the information below:
To remove the footer you can set the footer option to false
The toolbar can be removed using CSS styles:
.k-scheduler-toolbar {
display: none;
}
All-day slot can be removed using the allDaySlot
I've tried to center vertically and horizontally my image while using image map with ImageMapster, but it didn't work.
http://eternidad.home.pl/index_proba.html
I've added :
#mapster_wrap_0 img{margin: 0 auto; align: center; vertical-valign: middle;}
But still image is on the bottom.
I also need to make onMousveOver effect, definied in the imageMapster's script,but I simply don't know how to do it - I have 4 areas, so I need sth like this, but it doesn't work.
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var ImgAry= ['str_glowna5.png','str_glowna5pl.png','str_glowna5en.png','str_glowna5es.png','str_glowna5ru.png']
var MapAry=[];
for (var zxc0=0;zxc0<ImgAry.length;zxc0++){
MapAry[zxc0]=new Image();
MapAry[zxc0].src=ImgAry[zxc0];
}
function Swap(id,nu){
document.getElementById(id).src=MapAry[nu].src;
}
/*]]>*/
</script>
//
<AREA SHAPE="RECT" coords="24,509,85,566" HREF="opis_ru.htm" TITLE="Russian" onmouseover="Swap('img',4);" onmouseout="Swap('img',0);" >
Please, help
Generally speaking to use CSS on an image that is bound with imagemapster you should apply styles to a wrapper, and not the image itself e.g.
-- CSS
.mapster-wrapper {
style="margin: 0 auto; align: center; vertical-valign: middle;"
}
-- HTML
<div class="mapster-wrapper">
<img usemap="..." src="...">
<div>
ImageMapster has to tightly control the CSS on the image itself in order for its layered effects to work. Just apply all your styling to your own wrapper around of the image.
It's possible to add a custom class to the wrapper that imagemapster creates:
$('#my_img').mapster({
(...)
wrapClass: 'imageMapster_wrapper'
});
then you just do
.imageMapster_wrapper {
margin:0px auto;
}
in your CSS, as Jamie Treworgy already suggested.