I currently use tablesorter on a legacy project to add filtering and i'm stuck with a behaviour:
if you manually use $("#tbody>tr").hide(), then $("#tbody>tr.someClass").show(),
Filtering seems not work ( I think tablesorter lost his reference of tr... but i can't find how to told it to update his internal ref).
here an exemple of this behaviour :
https://jsfiddle.net/f2qdz3dp/
When you use a custom theme, you'll need to add this bit of css:
.filtered {
display: none;
}
You can rename the css class by modifying the filter_filteredRow option.
Also, you can set an initial search value by including a data-value attribute on the header cell:
<td class="info" ... data-value="bla">info</td>
This attribute name can also be changed using the filter_defaultAttrib option.
Related
I made a file called template.css.scss in my Rails app that holds all the color styling that I want dynamically changed based on a user's preferences.
Here's a little sample of it:
/* pink */
$lighter-shade: #F75F9E;
$darker-shade: #B54573;
.navbar-inverse {
background-color: $lighter-shade;
}
#command-header {
color: $darker-shade;
}
I thought I could do a migration to add a column to track the user's styling preference. Of course, there would be a default setting. Then I could update the Sass variables based on the preference.
Unfortunately, from my research it seems like the way to go is to create separate templates and then set those dynamically based on the user's preference. I really hope that's not the case because the way I have things structured right now is concise and efficient, and I'd hate to lose that.
How would you go about this?
one way to handle: get the user's preference and put it into a
data-user-preference="<%= current_user.pref %>">
then use jquery to add the appropriate class based on that pref
$('.class-name').data('user-preference').addClass('whatever')
Is it possible to change the style of only one column heard in grid ?!
The sjg:gridColumn has a cssClass property, but setting this css will only be applied to rows under the column, not the column header.
At JQGRID - Is it possible to change the background color of HTML header text in JavaScript? I got the code as:
in your HTML page. If you want make the changes for one column only
you can use setLabel method:
$("#myGrid").jqGrid('setLabel','Price', '', {'background':'red'});
or
$("#myGrid").jqGrid('setLabel','Price', '', 'myColorClass');
But I could not make it work.
Finally, as the columns headers will have unique Id, I could use below:
document.getElementById("gridtable_sampleColumn").style.backgroundColor = "#FF0000";
Well do you think there is a better way. I was looking for some thing like this:
<sjg:gridColumn name="sampleColumn"
cssClass="makeThisSmall" />
And in my css
.makeThisSmall{
font-size : smaller;
}
Which did not work and only change the rows css not column header.
Also I find that the gridColumn has a formatoptions could this do what I am looking for ?!
There are no declarative way to set style/class of the column header for specific column (I exclude definition of the CSS rule where the id or the column name are set explicitly). So you should use setLabel to set it.
If you need to change background color then you should take in consideration that background-image have to be set to none too. Additionally you should don't forget that other CSS rules will be applied too and the rule with more specific CSS selector will win. For example the font-size in the column header will be applied because of the following rule from ui.jqgrid.css:
.ui-jqgrid .ui-jqgrid-view {
font-size: 11px
}
which have two classes in the rule. If you want to change the value for columns having makeThisSmall class then you should define CSS rule like
.ui-jqgrid .ui-jqgrid-view .makeThisSmall {
font-size: 8px
}
or
.ui-jqgrid-view .makeThisSmall {
font-size: 8px
}
In any way it should be at least so complex or more complex as the CSS rule which you want to overwrite.
In the same way the background will be applied because of CSS rule which contains two classes too
.ui-widget-content .ui-state-default {
background: ...
}
So you need define the corresponding deep (or deeper) CSS role too to be able to ovewrite it via class attribute.
I am playing with the popover component in the Dart "bee" Web Components package (bee)
However, I can't see a way of changing the default styling for internal elements of the component. I want to change the style of the <div class="x-popover-dialog"> so that it has rounded corners. However, if I add the following to my app's css file, it just gets removed by the time it gets to the "out" folder.
.x-popover-dialog {
border-radius: 6px;
}
Is this possible, or is the only way to actually modify the Web Component itself (or perhaps extend it)?
Thanks.
Okay, there are a number of factors here. First, is you cannot redefine a class defined within a component. You can currently apply your own styling to a component if that element does not specify its own styles. For instance, you can change the font-size on on 'p' elements within a component. Or say div#someid { color: red; } but you cannot redefine a class, or add definitions to a class.
The very fact that you can modify the styles at all, unless explicitly allowed, is a bug in the web_ui. Currently tracked as: Issue 374: Support apply-author-styles.
Ideally, when full support is implemented, you will not be able to apply your own styles to a web component unless explicitly permitted by the web-component itself. For more information on apply-author-styles and the related reset-style-inheritance see the great Shadow DOM 201 tutorial.
For the Jquery UI tag-it widget, I'd like to disable text input into the class="ui-widget-content ui-autocomplete-input" textbox which contains all the tags.
My purpose is to just allow certain people the ability to delete inappropriate tags, but not allow anybody to add tags (which are auto-generated).
Is the best thing for me to edit the tag-it .js file and add a disable="disable" for that field? If I do that, won't that prevent the contents of that field from being submitted? Or does that matter as long as the associated hidden field is submitted?
Or is there a better way of doing this (an overriding style?) without modifying the tag-it file itself?
Thanks,
doug
In tag-it.js I replaced this line:
this._tagInput = $('<input type="text"').addClass('ui-widget-content');
with this:
this._tagInput = $('<input type="text" readonly="readonly"/>').addClass('ui-widget-content');
adding the readonly="readonly" attribute. That had the desired effect of preventing input but still allowing users to delete inappropriate auto-generated tags.
I had the same question as original op.
But as the question is 2 and a half years old, and tag-it version is changed.
The accepted answer needs to be updated to the folowing in
tag-it.js around line 478:
from:
if (this.options.readOnly){
tag.addClass('tagit-choice-read-only');
}
To:
if (this.options.readOnly){
tag.addClass('tagit-choice-editable');
// Button for removing the tag.
var removeTagIcon = $('<span></span>')
.addClass('ui-icon ui-icon-close');
var removeTag = $('<a><span class="text-icon">\xd7</span></a>') // \xd7 is an X
.addClass('tagit-close')
.append(removeTagIcon)
.click(function(e) {
// Removes a tag when the little 'x' is clicked.
that.removeTag(tag);
});
tag.append(removeTag);
}
This is under the documentation of git repository having the documentation, under the Properties section:
$("#myTags").data("ui-tagit").tagInput.addClass("fancy"); //Obviously
if you want to do something with class...
This translates to the solution for this below, in my personal implementation style, and probably the only way I could get this to work:
$("#myTags").data("ui-tagit").tagInput.prop('disabled' , true);
This is if I understand your question correctly.
Note: ReadOnly does not make the tags un-editable.
As far as going through the tags, you could use ..
var x = $("#myTags").tagit("assignedTags");
Make it as an input field, and that ensures its "singleFieldNode" meaning tags are , (comma) separated. That way you can parse through it (split for commas(,) into an object, or however you want to do it)
PS: To apply any of the snippets above, simply change to the "id" of the HTML element that contains TagIt, and your code would work correctly.
JQuery TagIt v2.0
For some reason the select rails tag results in a very ugly grey select box. I've been looking around for a way to change this, I'm guessing some sort of default CSS is generated for select boxes by rails but since I have deleted the default stylesheet that rails builds I have no idea where these settings would be set from.
How can I change this ugly default style?
What is the default CSS for a select (outside of ruby)?
EDIT: Turns out the problem is that I"m running it on VirtualBox Linux and the default select box there is the problem.
It's probably the browser default?
Adding select { } to your stylesheet and then customizing it with your own rules will cover all the tags without adding a class to every select box you create. Not that that's a bad idea.
Perhaps you should just override select in one of your CSS files?
css:
.select { … }
view:
<%= select(…, :class => "whatever") %>
Take a look in /railsproject/public/stylesheets.
It's dependent on your operating system, and CSS gives you very little control of how it looks. If you are using jQuery, you could use a plugin such as this.