I wanted to change just the delete Icon of jqGrid in actions column with my own Icon(newTrash-icon.png). I've seen that jqGrid loads Icon from one png icons file. How do I replace the default trashcan Icon with some other trashcan Icon.
I tried below code but it doesn't work.
In my gridComplete
$('.ui-icon-trash').removeClass('ui-icon-trash').addClass('ui-icon-customtrash');
In my CSS
.ui-icon-customtrash {
background: url("~/Images/newTrash-icon.png");
background-position: -64px -16px;
}
I want the below icon to display in place of default delete icon
What you can do is just the usage of delicon option of navGrid:
$("#list").jqGrid("navGrid", "#pager", {delicon: "ui-icon-customtrash"});
The demo uses delicon: "ui-icon-scissors" and it displays
UPDATED: The demo demonstrate the same using the icon which you posted. It displays
I used the following CSS
.ui-state-default .ui-icon-customtrash {
background: url("http://i.stack.imgur.com/Gii7J.png");
background-position: 0 0;
}
I found my answer.
I have replaced inline Action Icons(delete and Notes icons) using IcoMoon App (http://icomoon.io/app/). I selected different icons I needed from IcoMoon website and created a stylesheet that I downloaded and added to my application. And using the class name("idoc-icon-trash") provided by IcoMoon I added below code in my afterInsertRow event and boooom.. it worked as shown in the figure.
$("#gridJQ .ui-icon-trash").removeClass('ui-icon ui-icon-trash').addClass('idoc-icon-trash');
.idoc-icon-trash {
font-size: 19px;
color: #022462;
}
Related
I am struggling to remove the badge count of how many columns are selected in multisort next to the column names 'Leído' and "Fecha de envío"...
The badge is span with class v-data-table-header__sort-badge.
And if I edit the html via Chrome and add 'display: none' it gets removed... However I am unable to override it via css in the code.
Is there any other way to remove the badge?
Thanks in advance!
P.S. I've found the way by using !important modifier but I don't know if there is a better way to achieve that
.v-data-table-header__sort-badge {
display: none !important;
}
I use Flatsome theme and I am using the "add to cart" button SHORTCODE in my page with ajax activated. The redirection to cart after adding the product is disabled so user can stay in my page.
But after the button is clicked the off-canvas-cart window appears. And that is I want to stop.
see: https://www.screencast.com/t/yhmloKy7omp
I want that to stop it becose I am using the Fly Cart plugin to achieve a neat result after the add to cart btton is clicked. See: https://www.screencast.com/t/kh8fuPUT
What I have done so far:
1- I have set the cart to "link only" in Flatsome settings - https://www.screencast.com/t/pcaD4HVXIq (but that setting doesnt seem to affect the add to cart button SHORTCODE)
2- I have managed to hide the cart using css: https://www.screencast.com/t/i2YTMpLjYmqf
but I couldnt remove that top right X close button. And the user must click anywhere on the page to make the page active again and that is not a good experience.
this is the css I used:
.off-canvas-cart { display: none !important;}.mfp-bg { display: none!important;}
that is pretty much it.
This is the page: http://vendamais.me/site2/criacao-de-logotipo/
and this is the only button I am using to test the shortcode: https://www.screencast.com/t/aFgvqTbkq
(the other buttons are simple buttons ahref style, not woocommerce shortcode)
could you help me on the right direction please?
I used this:
-Set to dowpdown in the configs, then:
.nav-dropdown.nav-dropdown-default {
display: none;
visibility: hidden;
}
EDIT:
Add the li and classes to do not loose others dropdowns.
li.cart-item.has-icon.has-dropdown .nav-dropdown.nav-dropdown-default {
display: none;
visibility: hidden;
}
I'm having an issue with Fancybox scrolling the underlying page to it's top as soon as the modal window opens. When it closes it doesn't return to where the user was either. It forces the user to have to scroll back down the page to the point they left off.
Any insights?
In jquery.fancybox.css > fancybox-lock...
Change...
overflow: hidden !important;
to...
overflow: visible !important;
To fix it here I used a built in helper function, this is how I set it up now:
$(".fancybox").fancybox({
helpers: {
overlay: {
locked: false
}
}
});
I had same problem when opened fancybox content was iframe. I found out that there was some JS (in my page, loaded into iframe) containing .focus() directive. Removing this, bug was fixed...
I have used mask on loading in my view.
Right now it is showing me default loading image (x-mask-loading)
I want to add my own image instead of that default image.
Can anybody having some idea?
Please let me know.
You can change loading icon by appliing css rules to loadMask Element (see loadingCls config):
Ext.create('Ext.view.View', {
loadingCls: 'custom-loader'
// ...
});
/* CSS */
.x-mask-msg .custom-loader {
background-image: url(http://example.com/custom-loading.gif);
}
Check out a demo.
UPDATE
This doesn't work anymore with extjs 4.2. Checkout the new version. Any idea how to fix this?
This is strange but sencha doesn't provide api (at least I didn't find one) for changing loadMask icon. So the only option is to fiddle with css again:
/* CSS */
.x-mask-msg .custom-loader .x-mask-msg-text {
background-image: url(http://example.com/custom-loading.gif);
}
ExtJs4.2 demo.
I am using a modal popup up control in jQuery, the popup has an input text powered by jQuery Tokenize input plugin. The problem is when i type something on modal popup text box, the search results by tokenize plugin are shown hidden under the popup. Actually they should apprear on top of all controls. Would someone please help me as I am a beginner.
Try to seek help from thread below, zindex is not working.
https://github.com/loopj/jquery-tokeninput/issues/190
here is the input control that i am using.
http://loopj.com/jquery-tokeninput/demo.html
Thank you.
It works by setting the z-index manually:
$(".token-input-dropdown").css("z-index","9999")
The function given in
https://github.com/loopj/jquery-tokeninput/issues/190
does not work in my coffeescript:
$('#book_author_tokens').tokenInput('/authors.json', {
zindex: 9999
});
I think that a better solution is to add it to the css file (instead of doing it via js):
div.token-input-dropdown-facebook {
z-index: 11001 !important;
}
Of course, drop the "-facebook" suffix if you're using the default theme.