I am working on a grid in GXT (not Ext JS) 2.4 and got stuck with this following issue.
I am trying to flag a column with a dynamic icon as soon a filter is set on it so that the user can know that he/she has applied a filter on the column. It is very similar to what is inbuilt in Excel where the a filtered icon is set on the filtered column.
I am unable to do so or find an article which points me in the right direction to get it fixed. I have tried changing the CSS as suggested in various forums but didn't help. The CSS change does equally impact all the headers though. All I want is for the filtered column to be different than the others.
Any help would be much appreciated. I will go to the extent of saying to consider me a newbie and giving me a step-by-step instruction on how to get it fixed. Sorry, if I sound too desparate but I am and I think I may have spent a little too much time figuring this out.
Thank you
GXT 2 already has this functionality, you can take a look at the Filter Grid Demo. bold and italic are used for filtered columns by default, here is the snippet from gxt-all.css
.x-grid3-hd-row .x-filtered-column {
font-style: italic !important;
font-weight: bold !important;
}
You need to override this css definition to have your own styles applied.
Related
I am using Template10 with the Hamburger starting project template. I'd like to have a margin between the hamburger area on the left and all content. I tried changing the shared Shell.xaml page (by adding a margin, etc.) but couldn't figure out the best way to sort it out. Conceptually, that makes sense, but it's the specific detail of how to make it work that I'm missing.
Is there an easy way to do it without changing each content page?
Regarding the questions in the comments: I want it in the closed case of a wide view; the question doesn't make any sense in any other case. As far as what I tried, it doesn't really ultimately matter, since none of what I tried worked - I'm asking what the right way is to do it, which I never figured out.
Here's what the default looks like, without a margin:
Here's what it looks like with a margin added to the content area, which is also how the sample template contents handle this:
I don't want to have to mark up every content page with left margins to get the offset in the second picture.
1: https://i.stack.imgur.com/jUIuO.png
Okay, now I have enough information. You have a few options here. The first is just bite the bullet like the rest of the developer community and format your pages like normal. But if you simply must, you can create an implicit Page style with a setter setting Margin="16,16,16,16" but, listen, and I am not kidding, you will ultimately regret it unless your app is super-simple. The biggest problem will be the spacing will be OUTSIDE the containing ScrollViewer.
Thanks for using Template 10.
I want to display the following grid header style like Excel. Is there some perfect solutions available? And I've found some solutions, but the cells borders cannot display normally.
Thanks in advance.
That's easy to do with Dgrid and it's CompoundColumns mixin.
See the docs here : https://github.com/SitePen/dgrid/wiki/CompoundColumns
See the tests here : http://dojofoundation.org/packages/dgrid/js/dgrid/test/complex_column.html
I am using dojox.form.DropDownSelect (not filtering select) in my page. But I am not able to restrict the height of the dropdown. I tried using size, maxHeght etc. but the drop down leep growing as the list grows.
Is there any way to restrict the height?
I don't know if there is a convenient, documented, way already there. Did you just try to guess things or did you actually search the API reference?
In case there is not you could try inspecting the generated dom structure through Firebug. There is probably a div ot table somewhere in there that you can limit the height via a css rule.
#that_drop_down .class_of_the_convenient_div {
height: 500px;
}
I'd like to style a select-box with some gradients.
My problem is that somehow there is a shadow added.
You'll see what I mean by opening this fiddle.
The gradient of both classes is the same ...
I do not know why a shadow is added to the select-box and I just can't find a solution.
Can you help me?
Thank you.
The select element is handled by the underlying platform/OS, rather than the browser; as such it's not possible to style them (using Chrome 8/Win XP). If you feel the need to use styled select elements then you'll need to use a regular html element (such as an ol or ul) in combination with JavaScript.
I put together a demo of the ideas involved for another question, which shows how this might be achieved: JS Fiddle demo.
I'm not sure what you mean by the 'shadow', although typically input elements are styled with a :focus pseudo-element rule, to indicate that the element has focus. This can be amended with:
select:focus {
outline: 0 none transparent;
}
Although this does reduce the accessibility of the form for those navigating with keyboards/non-mouse input-devices. Ideally, it's better to define an outline that fits with your site's design.
i guess maybe using javascript im gonna do it.... but if anybody knows a better and faster way to do it .. easily im gonna appreciate any ideas...
thanks!...
this is to make impossible for a user to view badly the page increasing the text or doing something like a zoom in the browsers ...
ive got some QA engineers asking me that .....
thanks!
This is a very bad idea from a usability/accessibility point of view. Please don't do it.
Even if you block that key combination, the user would still be able to increase the zoom level via the "View" menu.
You haven't given a good reason, I doubt there is one, so I agree that you shouldn't do it. It's a fun little challenge though, so I have a possible answer, though I don't really know if it would work.
First, have a font-size: 70% or whatever percent you want in an outermost containing element.
Then, create a dummy testing element with:
display:block;
position:absolute;
visibility:hidden;
font-size:1em;
font-family:Arial;
Find the actual height of the element (say, 25px) and then test it over and over again on a timer (window.setInterval()). If it doesn't match, change the font-size percentage on the outer element until it does.