How would be the best way to archive a result v-list-item rows alternate their respective background colors?
You can easily achieve this effect using CSS nth-child selectors with even and odd values. You might need to override the Vuetify theme colors. Consider specifyng a class on the parent list to prevent all lists in your app/component from being affected. There is no Vuetify native solution as far as I can see from the documentation.
.v-list-item:nth-child(even) {
background: #CCC
}
.v-list-item:nth-child(odd) {
background: #FFF
}
Related
The default styling of FilePond elements imported from the default css seems a bit small. Is there a recommended way to get to the size as seen in the examples at https://pqina.nl/filepond/?
It seems the default style in the css uses font-size of 10px.
By default the font-size of the FilePond root element is set to 1rem.
You can scale it up or down by setting a different size.
.filepond--root { font-size: 1.25rem; }
Use em instead of rem if you want to scale FilePond relatively to its parent element.
I'm just coming across this.
if you using Filepond in a nextjs project and you're finding it difficult to apply a font-size to your Filepond component. simply add the default Filepond css to your global.css style and customize it.
for example ///global.css
.filepond--root{font-size: 10px;}
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
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; }
I am trying to move over from Bootstrap to Zurb Foundation.
Bootstrap uses *-color for text colour and *-bg for background colours.
I'm a little confused with Foundation's naming scheme:
What is the difference between $topbar-link-bg-hoverand $topbar-link-bg-color-hover?
Both their names suggest that they change the background colour of a link in the top bar, both are given a colour.
Foundation structure has lots of details, if you search these variables in Foundation you can find them in _top-bar.scss file. Look at it, how used these variables:
// Apply the hover link color when it has that class
&:hover:not(.has-form) > a {
background-color: $topbar-link-bg-color-hover;
#if ($topbar-link-bg-hover) {
background: $topbar-link-bg-hover;
}
}
$topbar-link-bg-color-hover value can equal with color because use for background-color and $topbar-link-bg-hover value can equal with image or anything else(background css values).
I'm deeply customizing the appearance of a jqGrid with subgrid.
One thing I had to do is to change the Expand/Collapse buttons which is supported by the configuration option, no problem.
The thing is that the width of the column where the Expand/Collapse buttons are is the same size of the images and I want to increase its width.
I tried to "hack" the CSS but I couldn't find a nice way of doing it.
So, is there a way to consistently set the Expand/Collapse column width?
Thanks!
I'll just place my way of doing it.
.jqGridWrapper .ui-sgcollapsed .ui-icon { margin: 8px; }
.jqGridWrapper is a class applied to a div that wraps the grid elements.
I use this to make sure my css customizations will only affect what's inside that div.
Cheers!