I am not an expert with styling and encapsulation.
Need help with fixing style issue. Style used in a component is overriding the global style.
i am using primeng tabview component in component A for eg:
ComponentA.html:
<p-tabView styleClass="tab-view"></p-tabview>
ComponentA.scss:
.p-tabview {
padding: 0rem;
li.p-highlight span {
font-weight: $semibold-font-weight;
}
}
But this padding is applied to all primeng tabview setting in global style
Component B:
<p-tabView class="tab-view-scheduler"></p-tabview>
global style scss:
.p-tabview {
#media screen and (min-width: $tablet-break) {
padding: 0 4rem 2rem; //this is getting overridden
font-size: $desktop-small-font-size;
}
}
I am working on Angular, and now I have problem with dropdown z-index issue.
When I inspect in chrome, there is a new class called dropdown.
In this dropdown class there some information include z-index (z-index: 1050).
However, there is no dropdown class found in my html file and the whole project as well.
.dropdown {
z-index: 1052;
background-color: red;
}
I updated my scss code with dropdown class, and it changed color to red, but z-index is not change to 1052.
Note: position of dropdown is absolute.
Can anyone help or suggest me how to solve this issue? Thank you!
.dropdown {
z-index: 1052 !important;
background-color: red;
}
It works now!
Just add !important to set z-index value.
Maybe !important help z-index value that set here overwrite to its default value???
I have a jqGrid and it comes with default background image, I want to change the background image of it. I tried couple of ways as suggested in online
METHOD 1. I added below code in my CSS
.ui-jqgrid .ui-widget-header
{
background-image:url(images/my-header.png) repeat-x !important;
}
METHOD 2.Added below code to load complete event of jqGrid
loadComplete: function () {
$("#gview_jqgCUST .ui-jqgrid-titlebar").removeClass('ui-widget-header');
$("#gview_jqgCUST .ui-jqgrid-titlebar").addClass('jqgrid-header');
}
in CSS I added
.jqgrid-header{
background:red url(images/my-header.png) repeat-x scroll 50% 50%;
border:1px solid black;
color:Blue;
font-weight:bold;
}
and I am loading css files after jqGrid css file but could not achieve it
How can I do it ?? Any sample code please... I am new to jqGrid and jQuery..
First of all you can use ThemeRoller of jQuery UI to customize theme which you use on the page. You can reduce the applying of the theme only to a paer of your page by usage of "CSS Scope" (see the answer).
Alternatively you can specify background of .ui-jqgrid .ui-widget-header. The demo uses the background from "Dot Luv" theme. Additional to background I specified colors of the text and the border to make the look of header better. I used CSS
.ui-jqgrid .ui-widget-header {
border: 1px solid #0b3e6f;
background: #0b3e6f url(http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/dot-luv/images//ui-bg_diagonals-thick_15_0b3e6f_40x40.png) 50% 50% repeat-x;
color: #f6f6f6;
}
The resulting grid looks like on the picture below
I would like to use Font Awesome icons:
<i class="icon-edit"></i>
in the jqGrid pager area instead of the physical images by default.
.navButtonAdd('#vw_ComplaintSearchGridPager', { caption: '', buttonicon: 'ui-icon-disk', title: 'Save Grid Settings', onClickButton: function () { $(this).SaveGridSetting(); } })
Does anyone know how to achieve this?
It's very interesting question! I never used Font Awesome icons before, but it seems very interesting project.
jqGrid has currently no direct support of Font Awesome icons, but I prepared the simple demo which shows how to replace the standard jQuery UI navigator icons with the corresponding icons from Font Awesome.
One can see mostly clear the difference to the original navigator icons after zoom of the page. I included below the navigator displayed with zoom 400%:
The original navigator using jQuery UI icons
The navigator with Font Awesome icons:
The code which I used is very simple. Instead of usage
$grid.jqGrid("navGrid", "#pager", {view: true});
I used
$grid.jqGrid("navGrid", "#pager", {editicon: "icon-pencil",
addicon: "icon-plus", delicon: "icon-trash", searchicon: "icon-search",
refreshicon: "icon-refresh", viewicon: "icon-file",view: true});
$("#pager .navtable .ui-pg-div>span").removeClass("ui-icon");
I added the CSS
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span { margin: 0 5px; font-size: 12px; }
I think it's possible to replace more jQuery UI icons to Font Awesome icons, but it's not very simple. I will think about the problem more and will contact the developer of jqGrid (Tony Tomov) to consider to make jqGrid more friendly to Font Awesome icons, so that it could be possible very simple switch to Font Awesome icons.
UPDATED: I added the code which allows top replace more icons from the pager:
var $pager = $grid.closest(".ui-jqgrid").find(".ui-pg-table");
$pager.find(".ui-pg-button>span.ui-icon-seek-first")
.removeClass("ui-icon ui-icon-seek-first")
.addClass("icon-step-backward");
$pager.find(".ui-pg-button>span.ui-icon-seek-prev")
.removeClass("ui-icon ui-icon-seek-prev")
.addClass("icon-backward");
$pager.find(".ui-pg-button>span.ui-icon-seek-next")
.removeClass("ui-icon ui-icon-seek-next")
.addClass("icon-forward");
$pager.find(".ui-pg-button>span.ui-icon-seek-end")
.removeClass("ui-icon ui-icon-seek-end")
.addClass("icon-step-forward");
As the result one get the following pager:
instead of
UPDATED 2: The code for changing minimizing icon looks a little completer. One should first change the icon initially
$grid.closest(".ui-jqgrid")
.find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>.ui-icon-circle-triangle-n")
.removeClass("ui-icon ui-icon-circle-triangle-n")
.addClass("icon-circle-arrow-down");
and then change it after every click on the icon:
onHeaderClick: function (gridstate) {
if (gridstate === "visible") {
$(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span")
.removeClass("icon-circle-arrow-up ui-icon-circle-triangle-n")
.addClass("icon-circle-arrow-down");
} else if (gridstate === "hidden") {
$(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span")
.removeClass("icon-circle-arrow-down ui-icon-circle-triangle-s")
.addClass("icon-circle-arrow-up");
}
}
Additionally one need to add the CSS
.ui-jqgrid .ui-jqgrid-titlebar-close>span { margin: 0 3px; font-size: 16px; }
.ui-jqgrid .ui-jqgrid-titlebar-close { text-decoration: none; }
To fix the sorting icons I used the code
var $sortables = $grid.closest(".ui-jqgrid")
.find(".ui-jqgrid-htable .ui-jqgrid-labels .ui-jqgrid-sortable span.s-ico");
$sortables.find(">span.ui-icon-triangle-1-s")
.removeClass("ui-icon ui-icon-triangle-1-s")
.addClass("icon-sort-down");
$sortables.find(">span.ui-icon-triangle-1-n")
.removeClass("ui-icon ui-icon-triangle-1-n")
.addClass("icon-sort-up");
and the CSS
.ui-jqgrid .ui-icon-asc { height: auto; margin-top: 0; }
.ui-jqgrid .ui-icon-asc, .ui-jqgrid .ui-icon-desc {
height: auto; margin-top: 0; margin-left: 5px;
}
.ui-jqgrid .s-ico>.ui-state-disabled, .s-ico>.ui-state-disabled { padding: 0; }
As the result one will get the following:
UPDATED 3: In the next demo one can find more full replacement of jQuery UI icons to Font Awesome icons.
UPDATED 4: The answer provides solution for Font Awesome version 4.x.
Figured I would put a CSS alternative answer for those interested. One of our developers implemented a JS option, which did functionally work, however, there was a delay before it rendered correctly (not ideal).
We used font-awesome icons for our paging options, and here is how we implemented it.
Found the four classes that jqGrid was using for the paging icons we desired to customize and created the following css to apply base font awesome styles
.ui-icon-seek-next, .ui-icon-seek-prev, .ui-icon-seek-end, .ui-icon-seek-first
{
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
Then it is simply a matter of grabbing the content from font-family icon and using them as your own.
.ui-icon-seek-next:before
{
content: "\f105";
}
.ui-icon-seek-prev:before
{
content: "\f104";
}
.ui-icon-seek-end:before
{
content: "\f101";
}
.ui-icon-seek-first:before
{
content: "\f100";
}
So the entire CSS together looks like this
.ui-icon-seek-next, .ui-icon-seek-prev, .ui-icon-seek-end, .ui-icon-seek-first
{
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.ui-icon-seek-next:before
{
content: "\f105";
}
.ui-icon-seek-prev:before
{
content: "\f104";
}
.ui-icon-seek-end:before
{
content: "\f101";
}
.ui-icon-seek-first:before
{
content: "\f100";
}
And the output on our grid without JS and without delay
By looking at answer from Oleg above, I did the following to simplify things.
Additional CSS
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span.fntawsm { margin: 0 5px; font-size: 12px; padding-left:2px;padding-right:2px;}
** padding-left:2px;padding-right:2px; is optional
And this only works with icons only with no caption ...
And then just start adding fontawesome icons in navButtonAdd like
caption:"", // important for above
title:"Give any",
buttonicon:"fntawsm icon-remove"
buttonicon:"fntawsm icon-eject icon-rotate-90"
etc .. You can use all extra functionality from font-awesome like icon-rotate-XX too.
Thisway i did`nt have to remove ui-icon class from spans.
Inspired by #afreeland answer, I created a css available on github which allows you to convert your icons to Font-Awesome icons.
The performance advantage of this over the jquery method that #Oleg described is important in my opinion.
It is also a very elegant solution in my opinion.
You are welcome to use it: https://github.com/guylando/ToAF
Note: you must give priority for this ToAF.css file styles over your other icons styles so that can be achieved for example by copying the css content into a tag in your document.
I am using kendo ui dropdown list and some other pickers. I want to style the selected item background color.
I had tried .k-dropdown .k-state-selected{ background-color: red} but the color of selected item is not changing. It is set to default orange only. But the same code is working for grid and list view.
How can i able to do that.
Regards,
Sri
The following CSS should work for date(time)picker and the dropdownlist:
.k-widget .k-state-selected,
.k-list .k-state-selected
{
background: red;
}
Here is a live demo: http://jsbin.com/efozol/5/edit
KendoUI defines background not just as a background-color: XYZ; but using background-image: none, -webkit-linear-gradient(top, #ffc0cb 0px, #ffc0cb 100%); too
So, start overwriting this definition saying background-image: none;