How can I prevent the reset.css from clearing out the bold or italic style formats in the kendo editor? since, I need reset.css for other parts of the applications.
I'm not really sure why reset.css wants to change "font" to "inherit" on strong elements but it is not very logic. Kendo editor uses to make text bold so it creates a conflict.
Add this CSS
strong { font-weight: bold }
or
strong { font-weight: bold!important }
or use another reset css like normalize.css
For more information, take a look at this SO question: YUI Reset CSS Makes <strong><em>this not work</em></strong>
Related
I'm running into a problem where I can't style the default footer in v-data-table. For some reason, the pagination buttons are appearing white when enabled, and light gray when they are disabled (pagination is disabled). I've already double checked to make sure its not a theme issue.
My question is: how can I change the color of the default pagination icons in v-data-table? And more broadly, what is a way to find the class names of the vuetify elements so that I can avoid asking these types of questions in the future.
Thanks.
Here's a couple screen shots in case my description was clear enough.
Per Varun's request, here is one of my declarations for a v-data-table.
<v-data-table
:headers="headers"
:items="tickets"
item-key="ticketId"
class="red--text"
></v-data-table>
Result:
The recommendation of using the text-coloring class didn't work as it just turn all of the text in the table to red, but didn't change the icons. Is there any way to edit the CSS of the icons directly?
can you share the code please ?
Usually the color of the default pagination icons in v-data-table are black when enabled and grey while disabled.
you can use class="<color>--text" to change the text and enabled icon color to your preference
After digging through the CSS file in Vuetify and finding the class name of several of the v-data-table components, I found this solution to work.
Inside the style tag in my component:
#table > .v-data-footer .v-icon {
color: black;
}
Small note: without the !important keyword, this styles only the enabled icons in the footer (i.e. if you can go to the next page or not). If you want to style both, just add the keyword and your good to go.
I have use the following code to set default font and font size in CKEditor 4:
config.font_defaultLabel = 'Tahoma';
config.fontSize_defaultLabel = '24px';
But above code is not working on Mozilla Firefox.
I changed the font-size and font-family using below,
CKEDITOR.addCss(".cke_editable{cursor:text; font-size: 14px; font-family: Arial, sans-serif;}");
This is a complicated issue. Those settings only set the label in dropdown meaning if there will be a font which doesn't match any defined in font dropdown or there will be no font defined then Tahoma will be shown in the dropdown (there doesn't have to be a match). Labels don't force particular font in the editor.
If you want to have Tahoma as default font, you need to set it in CSS. For classic editor you need to set it in ckeditor/contents.css for body element. For inline editor, you need to set it in main page CSS file.
NOTE: There are ways to force particular fixed set of fonts inside the editor (even when pasting different fonts from external resources) but they require usage of Advanced Content Filter (ACF) and transformations. If you wish to learn more about ACF please see below links:
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_acf.html
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_advanced_content_filter.html
https://ckeditor.com/docs/ckeditor4/latest/guide/dev_disallowed_content.html
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-allowedContent
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-extraAllowedContent
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-disallowedContent
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_filter.html#method-addTransformations
Basically, with addTransformations method, you can check all the spans and see if the font used for it is on the list of defined fonts or not. If it is not, you can either delete it or apply default Tahoma font. Please also note that ACF can't be disabled if you want to use transforrmations.
I am testing the Ace Editor in their Kitchen Sink demo using the Mono Industrial theme and when I select text, it only highlights part of the line I selected. Here is a screenshot showing what I mean:
https://www.screencast.com/t/SnkUrwMql3J
Is there a setting or CSS hack that might fix it?
I was able to fix the issue with this bit of css:
.ace-mono-industrial .ace_string {
background-color: transparent !important;
}
This looks like a bug in mono industrial theme of ace. It sets background to the text which covers the selection.
You may be able to use a css hack like
.ace_line>span {
background-color: transparent!important;
}
or make a more specific selector to match only classes that actually define a background-color
How to disable blue highlight from this kendo list :
Thank you in advance
You can do it with some creative style overriding to get the effect you want.
i.e.
<style>
.k-item.k-state-selected.k-state-focused:not(:hover) {
background-color: transparent;
color: inherit;
}
</style>
will get rid of the blue highlight colour but still show the grey highlight when hovering and it also fixes the font colour back to black. So you get black on transparent instead of white on blue.
http://dojo.telerik.com/#Stephen/EtUXE
But it can be difficult to get the CSS selector just right to only change the particular styling you want without affected other kendo widgets on the page that use similar styling selectors.
Getting the correct style rule is particularly difficult in this case because the list portion that pops up is a disconnected popup that is not a child of the dropdownlist so you can't use a child selector to only target dropdownlist popups...as you can see in my dojo example, both dropdownlists are affected, as would an comboboxes and any other kendo widgets that use the same style rules.
Can I enlarge the font of c3js charts, such as in axis labels, data labels or categories? I'm interested in setting the general-case font to a larger one.
I searched the docs and couldn't find anything that related to "font" in any way.
Use the following two classes.
.c3-axis-y text
{
font-size: 15px; //change the size of the fonts
}
.c3-axis-x text
{
font-size: 15px; //change the size of the fonts
}
For a y axis on the right hand side use - .c3-axis-y2 text
C3 give some classes for each element when generating. So, you can change the style of the elements by using those classes with CSS.
Example:
1. Line style
The lines have c3-line-[id] class, so this class can be used to define the style in css.
A Web Inspector would be useful to check classes.
In your case labels are:
c3-legend-item-event
tick
....
From C3js documentation: http://c3js.org/gettingstarted.html
I had to search around a bit as well and read the c3.css file to get a good understanding of how to change the default look.
Off the top of my head here is some classes you may want to change the layout of, just make sure to include your own CSS file after c3.css to override it.
.c3-legend-item
.c3-tooltip th
.c3-tooltip td
The CodePen below includes most of other CSS classes you'll need to customize your C3 chart to your liking. I'ts a bar chart/line chart hybrid but tested on pie and donut charts so the classes are the same.
C3.js Chart: CodePen
Just put
table.c3-tooltip{
font-size:150px;
} here
change your font size accordingly
You mentioned data labels size as well (not only axis labels) so the font size of the text that shows the result on the top of a bar chart for instance.
This is called "c3-chart-text" in c3 library.
https://c3js.org/reference.html#class-c3-chart-text
I added this to the css file and it solved:
.c3-chart-text text
{
font-size: 18px; //change the size of the fonts
}
If you want to automate this behavior then:
clone the git: repo git clone https://github.com/mrjoh3/c3.git
add the formatting ".c3-chart-text text{font-size: 16px}" to the css files:
..c3/inst/htmlwidgets/lib/c3-0.6.1/c3.min.css
..c3/inst/htmlwidgets/lib/c3-0.6.7/c3.min.css
then reinstall the package from this folder: install.packages("../c3", repos = NULL, type = "source")
Initially bring all text tags using jquery selector easily
$('text').each(function(){
$(this).attr("font-size", "14"); //
$(this).attr("font-weight", "bold");
$(this).attr("font-family", "Arial, Helvetica, sans-serif");
});
it is more efficiant than write styles while you are going to do export chart as image.
Thanks
I have used this code for gauge graph and it worked.
#graphId svg text { font: bold 15px Arial !important; }