I have a Kendo grid that contains the following code. How could I change the font and the font size of the message?
pageable: {
buttonCount: 10,
messages: {
display: "{0}-{1} of {2} Stations",
empty: "",
}
}
Define the message as:
display: "<span class='ob-my-style'>{0}-{1} of {2} Stations</span>",
where ob-toto contains the style definition:
.ob-my-style {
font-family: "Verdana", sans-serif;
font-size: 2em;
}
Alternative, you can just define:
.k-pager-info.k-label {
font-family: "Verdana", sans-serif;
font-size: 2em;
}
Related
I have tried sass
.title {
font-weight: bold;
// more title styles
&h1 {
font-size: 30px;
}
}
Resulting css is:
.titleh1 {
font-weight: bold;
// more title styles
}
.titleh1 {
font-size: 30px;
}
Is there anyway I can keep the h1 nested in the .title to give css output like this?
.titleh1 {
font-weight: bold;
// more title styles
}
h1.title {
font-size: 30px;
}
Yes, you just need the #at-root directive to jump back out of your nested selector:
.title {
font-weight: bold;
// more title styles
#at-root {
h1#{&} {
font-size: 30px;
}
}
}
I'd like to know if it's possible to define a variable in Sass depending on if a class is set or not. I need to do some font type tests and would like to change the font-variable $basicFont dynamically based on the body class.
E.g.:
$basicFont: Arial, Helvetica, sans-serif;
body {
&.verdana {
$basicFont: Verdana, sans-serif;
}
&.tahoma {
$basicFont: Tahoma, sans-serif;
}
}
Is there a possibility to handle this in Sass?
No. What you're asking for would require Sass to have knowledge of the DOM. Sass only compiles directly to CSS, it is never sent to the browser.
With your sample code, all you're doing is overwriting $basicFont every time. In version 3.4 or later, your variable will only exist within the scope of the block where it was set.
So, your only real options are to make use of mixins or extends.
Extend
This is effective, but is only suitable for very simple cases.
%font-family {
&.one {
font-family: Verdana, sans-serif;
}
&.two {
font-family: Tahoma, sans-serif;
}
}
.foo {
#extend %font-family;
}
Output:
.one.foo {
font-family: Verdana, sans-serif;
}
.two.foo {
font-family: Tahoma, sans-serif;
}
Mixin
This is the method I would recommend if you want a little more fine grained control over which variables are used where.
$global-themes:
( '.one': ('font-family': (Verdana, sans-serif), 'color': red)
, '.two': ('font-family': (Tahoma, sans-serif), 'color': blue)
);
$current-theme: null; // don't touch, this is only used by the themer mixin
#mixin themer($themes: $global-themes) {
#each $selector, $theme in $themes {
$current-theme: $theme !global;
&#{$selector} {
#content;
}
}
}
#function theme-value($property, $theme: $current-theme) {
#return map-get($theme, $property);
}
.foo {
#include themer {
font-family: theme-value('font-family');
a {
color: theme-value('color');
}
}
}
Output:
.foo.one {
font-family: Verdana, sans-serif;
}
.foo.one a {
color: red;
}
.foo.two {
font-family: Tahoma, sans-serif;
}
.foo.two a {
color: blue;
}
Kendo Grid columns is given as below. After doing zoom screen column is getting hide, I want to do wrap column. Can we do it by giving some propery on gridColumns. Please tell me. I am not able to find it. Here 'Your Occupation Details' is getting hide. Here are some more fields, I have given only three here.
gridColumns: [
{
title: 'FirstName',
field: 'FirstName',
width: '0', hidden: true
},
{
title: 'FirstName',
field: 'FirstName',
width: '250px'
},
{
title: 'Your Occupation Details',
field: 'OccupationDetails',
width: '100',
}]
Use headerAttributes to wrap long column names in the JS columns declaration as follows;
columns: [
{
title: 'Your Occupation Details',
field: 'OccupationDetails',
width: '100',
headerAttributes: { style: "white-space: normal"}
},
...
]
Or for strongly typed grids you can use HeaderHtmlAttributes in Columns as well.
columns.Bound(p => p.OccupationDetails).HeaderHtmlAttributes(
new { style = "white-space: normal" }
);
Further documentation can be found in the Telerik's official forum Header Wrapping / Height and How to wrap kendo grid column
You can set CSS properties of the Grid to enable column wrap.
.k-grid-header .k-header {
overflow: visible;
white-space: normal;
}
Take a look at this documentation for setting column header attributes.
http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.headerAttributes
This worked for me
.k-grid .k-grid-header .k-header .k-link {
height: auto;
}
and this
.k-grid .k-grid-header .k-header {
white-space: normal;
}
source: http://www.telerik.com/forums/header-wrapping-height
To wrap the header:
.k-grid .k-grid-header .k-header .k-link { height: auto; }
.k-grid .k-grid-header .k-header { white-space: normal; }
To wrap the rows:
td[role="gridcell"] { white-space: nowrap; }
<style>
.k-grid .k-grid-header .k-header .k-link {
overflow: visible !important; white-space: normal !important;
}
</style>
You can add this to your custom CSS if you need to the warp text of the column header of a specific grid. This worked for me.
#yourgrid .k-grid-header .k-header .k-link {
white-space: normal !important;
}
You can do it as:
k-grid .k-grid-header .k-header .k-link {
height: auto;
word-break:break-all !important;
word-wrap:break-word !important;
}
.k-grid .k-grid-header .k-header {
white-space: normal;
}
Works Perfect for me.
Add the following css to you code, it will be applied to all grid columns and you won't need to add style attribute to individual grid column.
<style>
.k-grid td {
word-break: break-all !important;
word-wrap: break-word !important;
}
</style>
I am creating a custom pie chart using jqPlot's PieRenderer. My only problem is that I can either show the label or the percentage on the dataLabels. I want to do a mix and show both like <label>\n<percentage>. Explanation:
By setting this.dataLabels = 'percent', I can do this:
By setting this.dataLabels = 'label', I can do this:
I want to do this:
Do you have any ideas?
According to the source code, dataLabels doesn't support rendering label together with percent at the same time.
I think you can easily create a list of labels using JavaScript and make sure you use <br/> instead of \n if you want to render 2 lines for each part.
#sza's solution is tidier, so I will have to accept it. I wanted to post my own though, because it is easier and it may help someone.
What I did is, put two pieCharts on each other, where the first one is visible and has the percentage values and the second one has no fill and is invisible except for the labels.
My XHTML code:
<p:pieChart value="#{chartBean.pieModel}" legendPosition="" fill="true" showDataLabels="true"
title="MyPieChart" style="width:100%; height:350px" sliceMargin="2"
diameter="300" dataFormat="percent" shadow="false" extender="pieChartExtender"
seriesColors="7eb75b,c2715e,6367c2,9b6ece,5cc2c1,c0c216" styleClass="mainPieChart" />
<p:pieChart value="#{chartBean.pieModel}" legendPosition="" fill="false" showDataLabels="true"
title="MyPieChart" style="width:100%; height:350px" sliceMargin="2"
diameter="300" dataFormat="label" shadow="false" extender="pieChartLabelExtender"
seriesColors="7eb75b,c2715e,6367c2,9b6ece,5cc2c1,c0c216" styleClass="pieLabels" />
extender.js:
function pieChartExtender() {
this.cfg.seriesDefaults.rendererOptions.dataLabelFormatString = '%#.2f%%';
this.cfg.seriesDefaults.rendererOptions.dataLabelThreshold = 5;
this.cfg.seriesDefaults.rendererOptions.dataLabelPositionFactor = 0.8;
this.cfg.seriesDefaults.rendererOptions.startAngle = -90;
}
function pieChartLabelExtender() {
this.cfg.seriesDefaults.rendererOptions.dataLabelThreshold = 5;
this.cfg.seriesDefaults.rendererOptions.dataLabelPositionFactor = 0.8;
this.cfg.seriesDefaults.rendererOptions.startAngle = -90;
}
CSS file:
.chartContainer {
position:relative;
margin: 0 auto;
top: 10px;
width: 350px;
height: 350px;
}
.chartLegend {
border: 1px solid #d7d7d8;
margin: 40px 40px;
width: 80%;
}
.pieExtra {
position:absolute;
left: 17px;
top: 13.5px;
}
.pieLabels { position:absolute !important; }
.mainPieChart { position:absolute !important; }
.jqplot-title { display:none !important; }
.jqplot-grid-canvas { display:none !important; }
.jqplot-series-shadowCanvas { display:none !important; }
.mainPieChart .jqplot-event-canvas { z-index: 10 !important; }
.jqplot-data-label { color: #fff; font-weight: bold; font-size: 14px; }
.pieLabels .jqplot-data-label { margin-top: -9px !important; }
.mainPieChart .jqplot-data-label { margin-top: 8px !important; }
.pieLabels .jqplot-series-canvas { display:none !important; }
Notice that:
both pieCharts (called pieLabels and mainPieChart) are absolutely positioned, in order to be placed on each other
jqplot-data-label of pieLabels is placed 9px above and jqplot-data-label of mainPieChart is placed 8px below to create the label-percentage label
jqplot-series-canvas for pieLabels is not displayed, in order to make it invisible.
How can I customize the Firefox DOM Inspector? The white color and the font size makes it difficult to read.
I found a solution. I used Stylish addon
https://addons.mozilla.org/en-US/firefox/addon/stylish/
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document url("chrome://browser/content/devtools/markup-view.xhtml") {
body { background: white !important }
}
The above is a sample for the background only. Another css example is one below.
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
* {
padding: 0;
margin: 0;
}
body {
color: hsl(0,0%,50%);
background: black !important;
}
.text {
color: white !important;
}
.newattr {
cursor: pointer;
}
.selected {
background-color: hsl(0,0%,90%);
}
/* Give some padding to focusable elements to match the editor input
* that will replace them. */
span[tabindex] {
display: inline-block;
padding: 1px 0;
}
li.container {
position: relative;
padding: 2px 0 0 2px;
}
.codebox {
padding-left: 14px;
}
.expander {
position: absolute;
-moz-appearance: treetwisty;
top: 0;
left: 0;
width: 14px;
height: 14px;
}
.expander[expanded] {
-moz-appearance: treetwistyopen;
}
.more-nodes {
padding-left: 16px;
}
.styleinspector-propertyeditor {
border: 1px solid #CCC;
}
}
Source