How to auto change the span size so that it is equal to a div? image
.ui-jqgrid tr.ui-jqgrid-labels div {
white-space: normal !important;
}
See here jsfiddle.
There are such limitations in free-jqgrid 4.14.0? http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3Agroupingheadar
Thank you
I suggest you to use the following additional CSS rules
.ui-jqgrid .ui-jqgrid-htable th.ui-th-column {
position: relative;
}
.ui-jqgrid .ui-jqgrid-labels > .ui-th-column > .ui-jqgrid-resize {
top: 0;
float: none;
position: absolute;
height: 100%;
}
.ui-jqgrid .ui-jqgrid-labels > .ui-th-ltr > .ui-jqgrid-resize {
right: 1px;
}
.ui-jqgrid .ui-jqgrid-labels > .ui-th-rtl > .ui-jqgrid-resize {
left: 1px;
}
see the modified demo https://jsfiddle.net/OlegKi/owypx8c5/1/. I added direction: "rtl" to the second grid to verify that new settings works with RTL languages too. I suppose it's not your case and you want remove it like in https://jsfiddle.net/OlegKi/owypx8c5/2/.
I will adjust ui.jqgrid.css to use the above settings as default CSS rules of free jqGrid.
Related
I'm trying to use multiple filters on a background-image
body {
background-image: url('https://picsum.photos/200/300?image=0');
filter: grayscale(50%) blur(3px) brightness(10%);
}
it ignores the rule I've put in ...can't even do 1 at a time...can I not use filters on background images?
The filter is working fine but the background image is no more inside the body. Here you are facing a special background behavior that propagate the value of background from the body to the canvas AND it's removed from the body. In other words, your background is moved to an upper element and the filter is kept on the body.
To notice this, simply apply a background to the html element and you will disable the propagation effect thus the filter will work as expected:
body {
background-image: url('https://picsum.photos/200/300?image=0');
filter: grayscale(50%) blur(3px) brightness(10%);
height:200px; /*you need a height to see the image !*/
}
html {
background:red;
}
By the way, it's not a good solution to apply filter to whole body as it will also affect the content. If you want to filter only the image better consider a pseudo element that will be your background layer and where you can apply the filer without affecting the content:
body {
position:relative;
z-index:0;
height:200px; /*you need a height to see the image !*/
}
body:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background-image: url('https://picsum.photos/200/300?image=0');
filter: grayscale(50%) blur(3px) brightness(10%);
}
You can use filter property on background-image
body {
height: 100vh;
padding: 0;
display: grid;
align-content: center;
justify-content: center;
}
.module {
width: 300px;
height: 300px;
display: grid;
place-items: center;
color: #ff43ea;
position: relative;
}
.module::before {
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background-image: url(https://images.unsplash.com/photo-1494645009625-cc17363a5f20?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=bd502af39c922553e5a13624d4f44f40);
background-size: cover;
filter: grayscale(100%);
}
.module-inside {
position: relative;
font: bold 42px sans-serif;
}
<div class="module">
<div class="module-inside">
Module
</div>
</div>
angular material2 mat-checkbox
How do I modify the left icon size, and the left icon state color?
<mat-checkbox>Like Me.</mat-checkbox>
You can use this ( .mat-checkbox-inner-container ) CSS class to modify the mat-checkbox
.mat-checkbox-inner-container {
height: 50px!important;
width: 50px!important;
}
Note that you need to put the style modification in styles.css root folder (
/src/styles.css ) and not in the components css.
Also put !important ( width: 50px!important; ) to override the
default style.
Below is the default style for the mat-checkbox
.mat-checkbox-inner-container {
display: inline-block;
height: 20px;
line-height: 0;
margin: auto;
margin-right: 8px;
order: 0;
position: relative;
vertical-align: middle;
white-space: nowrap;
width: 20px;
flex-shrink: 0;
}
Hope this helps.
If you want to change color then use these in your CSS file
::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: black;
}
::ng-deep .mat-checkbox-checked .mat-checkbox-background {
background-color: black !important;
}
::ng-deep .mat-checkbox-checkmark-path {
stroke: #000 !important;
}
Hope this css will resolve your issue
to change styles use classes and define them in your scss component file.
When you see that this not work's, use the selectors :host /deep/ before the class name in each of the scss defined classes.
The size of the icons is defined by the font-size not width / height
Hope I helped you
In my project, we overrode sizes of checkboxes and radio buttons to 16px in this way:
body .mat-checkbox-inner-container, body .mat-radio-container, body .mat-radio-outer-circle, body .mat-radio-inner-circle {
height: 16px;
width: 16px;
}
body .mat-checkbox-ripple, body .mat-radio-ripple {
left: calc(50% - 20px);
top: calc(50% - 20px);
height: 40px;
width: 40px;
border-radius: 50%;
}
How to add line number to kendo ui editor. I dont see any setting to enable line number
http://docs.telerik.com/kendo-ui/controls/editors/editor/overview
There is a route using CSS3 Counters. I'm not familiar with the Kendo Editor, so be sure to add any other elements besides the p and ul > li base child elements in the CSS.
You can save the following CSS to be loaded within the editor:
body {
counter-reset: editor;
padding-left: 3em;
}
body > p,
body > ul > li {
counter-increment: editor;
}
body > p:before,
body > ul > li:before {
content: counter(editor);
background: #CCC;
position: absolute;
left: 1em;
height: 100%;
width: 2em;
}
To add custom CSS within the editor, you would save the above into a file and in your initialization:
$("#editor").kendoEditor({
stylesheets: ["path_to_your.css"]
});
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.
Here is what i aim to do: https://docs.google.com/file/d/0B13W1jkpc_BzLXZ6RGxGbUd2NG8/edit?usp=sharing
Here is the CSS for my approach:
#media (min-width: 980px) {
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
a.menu:after, .dropdown-toggle:after {
content: none;
}
.navbar .dropdown-menu {
margin-top: 0px;
text-align: center;
}}
And the way it looks now: https://docs.google.com/file/d/0B13W1jkpc_BzZUlRck5VcWh0TkE/edit?usp=sharing
Everything is working fine except that i can't seem to get the right width for the dropdown menu's text (i need to shrink the width according to text). So how do i do that ?
You have to remove the min-width property of the .dropdown-menu list. Including the following after you include bootstrap:
.dropdown-menu {
min-width: 0px;
}
Alternatively, for the exact style you have given, you could use bootstrap's tooltips instead
Try removing padding from the .dropdown-menu .sub-menu classes.
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
padding: 0;
}
Well you can add space to your inner text and it will automatically increase its width e.g you have
"--View by Category--"
Add spaces with   as many as you want like
 --View by Category--