I am trying to achieve few customisations in ag-grid such as:
Change icons of Grid Header - Sort Icon, Filter Menu Icon, Icons of different menu items in Filter Menu, etc.
Change position of the Icons.
Can anyone point me to a possible solution?
According to the docs, you can try this CSS after the loading of the ag-grid.css (or scss) file and the ag-theme-<themename>.css file. In my example, that theme file is for Balham theme ag-theme-balham.css. This CSS will change the icons from default black (using the SVG) to white.
/*
* The override should be placed after the import of the theme.
* Alternatively, you can aso increase the selector's specificity.
*/
.ag-theme-balham .ag-icon-desc,
.ag-theme-balham .ag-icon-asc,
.ag-theme-balham .ag-icon-menu
{
font-family: "Font Awesome 5 Free";
/* FontAwesome uses font-weight bold */
font-weight: bold;
}
.ag-theme-balham .ag-icon-desc::before
{
content: '\f063';
color: white;
}
.ag-theme-balham .ag-icon-asc::before
{
content: '\f062';
color: white;
}
.ag-theme-balham .ag-icon-menu::before
{
content: '\f0c9';
color: white;
}
This Worked for me. Just overide the color
.ag-theme-balham .ag-icon-menu:before,
.ag-theme-balham .ag-icon-asc:before,
.ag-theme-balham .ag-icon-desc:before,
.ag-theme-balham .ag-icon-filter:before{
color: #FFFFFF;
}
Related
I am using vue carousel and I want to change tge color of the pagination dots' borders. I don't know how and if it's even possible. I looked up the style of this buttons in dev tools and tried to rewrite the style. But nothing works
vue-carousel has two properties that control the color of the dots:
paginationColor - (default: #000000) The fill color of the active pagination dot. Any valid CSS color is accepted.
paginationActiveColor - (default: #efefef) The fill color of pagination dots. Any valid CSS color is accepted.
For example:
<carousel paginationColor="gray" paginationActiveColor="red">
demo
Try this in your global CSS
.v-carousel__controls__item{
color: #FFC400 !important;
}
There is a work-around that can give you full control over the dots and their appearance with pure CSS, using pseudo-elements. Make the existing dots transparent, and use ::after to create new dots that you can style as you like.
.VueCarousel-dot {
position: relative;
background-color: transparent !important;
&::after {
content: '';
width: 10px;
height: 10px;
border-radius: 100%;
border: 2px solid black;
background-color: gray;
position: absolute;
top: 10px;
left: 10px;
}
&--active::after {
background-color: red;
}
}
This is not an ideal solution, however the provided options for styling dots in Vue Carousel are quite limited, and if you have a strict style guide to follow, this solution can give you the control you need.
when changing the direction of Vuexy from ltr to rtl. bootstrap-vue data picker style will fail as illustrated in attachment image
.custom-timePicker {
width: max-content;
right: 0px !important;
}
[dir=rtl] .custom-timePicker {
right: 0px !important;
}
add to style.scss
I might make a obvious mistake but somehow I am stuck with the following:
only for large screens i don't want the vertical scrollbar so i have this simple css:
#media (min-width : 2000px) {
// hacky
body {
overflow-y:hidden !important;
}
.mt-5{
margin-top: 80px !important;
}
.mb-5{
margin-bottom: 80px !important;
}
...more style definitions
but somehow this doesn't work
i am using chrome's toggle device bar tool to switch between different resolutions. All other css definitions for > 2000px are there, only body doesn't seem to be set??
#media (min-width : 2000px) {
body {
overflow-y:hidden !important;
}
.mt-5{
margin-top: 80px !important;
}
.mb-5{
margin-bottom: 80px !important;
}
}
Did you set 100% height for html and body, like this:
html, body {
height: 100%;
}
And also for possible other child elements inside body which span the whole height of body?
Otherwise one of them will get a scroll bar (not necessarily body, but it will look very similar)
Is there a way to remove plus icon on Choose button in primefaces component.
I tried #Darka's approach but it failed with Primefaces 3.5.10.
This worked for me.
.ui-fileupload-choose .ui-icon {
visibility: hidden !important;
}
.ui-fileupload-upload .ui-icon {
visibility: hidden !important;
}
.ui-fileupload-cancel .ui-icon {
visibility: hidden !important;
}
I hope it helps also.
if still no luck. You can put this css code (tested) to remove icon:
.fileupload-buttonbar .fileinput-button .ui-icon-plusthick{
display: none !important;
}
And this code to move Choose more left:
.fileupload-buttonbar .fileinput-button .ui-button-text{
padding-left: 1em!important;
}
I hope this helped.
In Primefaces 5.3 use:
span.ui-fileupload-choose > span.ui-icon-plusthick{
display: none !important;
}
span.ui-fileupload-choose > span.ui-button-text{
padding-left: 1em !important;
}
In Primefaces 6.1 use:
.ui-fileupload-simple .ui-icon-plusthick {
display: none !important;
}
.ui-fileupload-simple .ui-button-text{
padding-left: 1em !important;
}
For file upload in advanced mode (tested on PrimeFaces 6+):
.ui-fileupload .ui-icon-plusthick {
display: none !important;
}
.ui-fileupload .ui-icon-arrowreturnthick-1-n {
display: none !important;
}
.ui-fileupload .ui-icon-cancel {
display: none !important;
}
the file primeicons.css has all the icons classes.
Overwrite the property content value with the respective chosen icon code.
For example, if you want to replace the icon for the papper-clip:
/* \e97b is the papper-clip code found in primeicons.css */
.pi-plus:before {
content: "\e97b";
}
I am trying to override the CSS of a back button in a Sencha Touch 2 Navigation View. Using this CSS
#ext-container-1 .x-button {
background: url(../images/button_zurueck.png) no-repeat;
width: 55px;
height: 55px;
margin-top: 120px;
margin-right: 26px;
border: none;
}
I was able to show the image but the width attribute is overidden by the style attribute set on the button so only a small part of the button is shown. This ist the content of the style attribute left after the button animation:
element.style {
left: 0px !important;
-webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg) scaleX(1) scaleY(1) scaleZ(1) !important;
opacity: 1 !important;
width: 16px !important;
}
How can I override the width of the button?
This is a bug in 2.0.0 and has already been fixed by Sencha for the next release.
More information: http://www.sencha.com/forum/showthread.php?188982
I was able to show the full button by adding right padding. Its dirty but its work. Looking forward for the next release of Sencha Touch.
At the end I got rid of that button totally and inserted my own button which simulates the "back" functionality.
On the card:
config: {
defaultBackButtonText: '',
navigationBar: {
backButton: {
iconCls: 'back',
ui: 'plain'
}
}
}
On the CSS:
//Back
.x-button-icon.back {
background-image: url(../../resources/images/bt_seta.png);
background-repeat: no-repeat;
}