I want to remove the blue highlighting that occurs when you mouse over the column header in a grid.Panel column header in ExtJS 4.2.2.
I have successfully changed every other aspect of the CSS using tdCls, baseCls, and manually adding my own classes. I have tried targeting the problem by making CSS classes with the ".x-header-over" or ".x-column-header-inner-over" names. However, these do nothing.
Essentially, I do not want the headers to be clickable or have any affordances that they are. I have turned mouseover off (ie made false) to remove this affordance on the grid itself, but it does not apply to the header.
One option would be to set sortable:false and menuDisabled:true like so in the column configuration itself:
{text: "Name", width:120, dataIndex: 'Name', sortable:false, menuDisabled:true}
This will disable the actions themselves. As far as the CSS highlight goes, if you want to do this for all grids in your application, you can set:
.x-column-header-over {
background:none
}
This will disable the hover background that Ext tacks on when you hover over the element.
Hope this helps!
Related
I have a website with a list of checkboxes that can be used for printing as well. Though when printing it should print a clean slate, not the current state of the checkboxes on the website. However, I don't want to clear the state on the page itself, only on the printed version.
So is it possible to visually remove the tick from checkboxes in CSS?
Something like:
#media print
{
input[type=checkbox]
{
tick: none;
}
}
I suggest following approach.
In print you want just the border square box which can be manually ticked, right?
So in print CSS you might just change the design of check boxes so that you hide the original checkbox html , doesn't matter if checked or not. And then just style or show a square border box using some pseudo selector like : before :after, , good enough for a checkbox looking box for printing.
As via CSS you can change design and not the html state of the forms. So in media query of print or print style sheet only option is designing, styling...
I built a GUI with a treeview based on GTK+3. The tree view does currently not show the expander of the treeview. However, I can see that there is some space reserved for the expander as the indentation of the rows is larger if there is one element with a 'subcategory'.
In addition, I figured out, that the expander is shown if I use another GTK style.
Therefore, I tried to change to color of the expander, but it has no effect:
*.view { background-color: ... } changes the background color of the 'buttons' in the tree view. However, the expander is still not visible.
treeview.view.expander { color: ...} does not have any effect at all.
Now, my assumption is that the expander is hidden or has some transparency, but I could not find any option to change it.
Do you have any documentation links that explains exactly which CSS option does have an influence on the treeview or its expander or a hint what could be wrong in the CSS file?
Thanks!
I figured out what the problem is: I am missing the icon used by the treeview expander in /usr/share/icons.
The problem is solved by adding the icons specified in .expander { -gtk-icon-source: -gtk-icontheme("icon"); } to the icon sources in /usr/share/icons or /~.icons.
I need to change the styling of my checkboxes. I have read many articles on this but what I am expecting is this: http://i.imgur.com/q2HdOJO.png
When checked, instead of the "check", the checkbox be filled with (in this case) blue color.
I am not sure if this is the "intermediate" state in Mac and thus looks different in my Ubuntu machine but how can I fill the checkbox with color?
You can use the accent-color property in CSS:
#checkbox {
accent-color: #00FFF0;
}
Use images and bind click events with Javascript. It will be much easier than trying to use CSS. CSS will be impossible in some browsers that don't support the styling to hope to achieve.
Here is a related post: How to use images for check boxes using CSS or may be Javascript?
Chrome has some cute features to make the selected form element (input ect) stand out like adding a border color and, more annoyingly, it slightly reduces the margins on some of my form elements after they've been selected, shifting the page slightly each time a text entry box is selected.
It's not the textarea draggable resize effect that chrome has, it's effecting input elements that should have a constant size, but they automatically change once selected.
Is there any CSS to disable this feature, or do I simply have to make sure my text box margins/padding are set up such that Chrome doesn't resize them?
Here it is
textarea { resize:none; }
I love working on other people's sites...the problem was javascript they were using to restyle form elements after click and I have no idea why. Solution was to remove that junk.
Is it possible to add new CSS properties in the Chrome inspector? It seems that you can only edit existing properties.
Also, once you edit the properties, is there a way to view the revised CSS as a whole?
Yes, it's possible to add new CSS properties in the Chrome inspector and review them in a few easy steps:
Right click in the element you want to change and choose "Inspect element";
Click the "New Style Rule" button (1 in the image below);
Google Chrome will assign a CSS matching rule which you can rename (2 in the image below);
Add your CSS rules (2 in the image below);
When you're done just check the "Computed Style" pane (3 in the image below).
You can add new property in a rule double clicking within the rule. Also you can add a new rule from the wheel in the corner and then select "New Style Rule".
To view the whole revised document go to: Resources > Frame > site name > Stylesheets > stylesheet-name.css
Or simply Click the + symbol above the css properties
Is it possible to add new CSS properties in the Chrome inspector? It
seems that you can only edit existing properties...
Simply double-click in any white and empty space in the "Styles" panel.
I tend to double-click to the right of the } for whichever CSS rule I want to edit.
Also, once you edit the properties, is there a way to view the revised
CSS as a whole?
See #Sotiris's answer.
Not that I know of.
There may be an extension that can do this, but if one exists, it probably won't preserve the exact formatting of your original CSS.
Why not? Here is the screenshot of the Styles panel of the Google Chrome inspector
Notice the block:
element.style {
}
You just click with mouse in that area and inspector will give you an opportunity to add new styles. If you need to add a new attribute to an element, you right click on it in the Elements panel and choose 'Add attribute'.
Also, once you edit the properties, is there a way to view the revised CSS as a whole?
Doesn't Computed Style panel give you this information? There you can check al lthe styles applied to a node and, actually, in what rule and from what stylesheet they are applied.