Remove count badge on Vuetify data table header with multi-sort? - vuetify.js

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;
}

Related

Bind validation of a control on keypress using Valdr module in AngularJS

I am using Valdr module to validate my form, it is working very well and validates the control content when i press tab, however I wanted to validate the control content while typing (keypress).
Your help is highly appreciated.
valdr is implemented as AngularJS validator. This means the validation happens by default on keypress when the ngModel is updated.
It is possible that you changed this behaviour in your app by configuring ngModelOptions to update the model on blur.
If this is not the case, you most likely have to change your CSS. This is how it is intended to control the visibility of validation messages.
The following CSS would show the valdr messages as soon as the user starts typing in the field:
.valdr-message {
display: none;
}
.valdr-message.ng-invalid.ng-dirty {
display: block;
}

How to customize asp.net MVC validation message position

i am doing MVC model validation through data annotation and my validation message is showing just at right side of input but i want to show it at the below of input box like the screen shot.
so just tell me what i need to do without touching html. thanks
You can alter field-validation-error and validation-summary-errors classes in CSS to make them reside on a new line. One way is to make them block elements by using display:block style. Here is a sample CSS:
.field-validation-error {
display: block;
}

Replace Delete Icon of jqGrid with custom Icon

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;
}

How to Hide Event time in "month" view of of p:schedule in primefaces?

Is it possible to hide time for event in "Month" view ? I am using <p:schedule> and i only want to show the Event Title in the calendar's month view.
Hope there is a way.... help please
Thanks in Advance
You can hide the time by setting the fc-event-time css class to display:none;
Like this
.fc-event-time{
display:none;
}
But you better give it a more specific id , like this (you can set prependId="false" in your form that surrounds the scheduler)
#myscheduleId .fc-event-time{
display:none;
}
just make sure to include the css in the end (in your h:body for example)
Use the attribute rightHeaderTemplate. default its value is month,agendaWeek,agendaDay. change to rightHeaderTemplate ="agendaWeek,agendaDay"

jQuery Token Input (tokenize input) is not working on modal popup, list hidden under popup

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.

Resources