I'm deeply customizing the appearance of a jqGrid with subgrid.
One thing I had to do is to change the Expand/Collapse buttons which is supported by the configuration option, no problem.
The thing is that the width of the column where the Expand/Collapse buttons are is the same size of the images and I want to increase its width.
I tried to "hack" the CSS but I couldn't find a nice way of doing it.
So, is there a way to consistently set the Expand/Collapse column width?
Thanks!
I'll just place my way of doing it.
.jqGridWrapper .ui-sgcollapsed .ui-icon { margin: 8px; }
.jqGridWrapper is a class applied to a div that wraps the grid elements.
I use this to make sure my css customizations will only affect what's inside that div.
Cheers!
Related
I'm running into a problem where I can't style the default footer in v-data-table. For some reason, the pagination buttons are appearing white when enabled, and light gray when they are disabled (pagination is disabled). I've already double checked to make sure its not a theme issue.
My question is: how can I change the color of the default pagination icons in v-data-table? And more broadly, what is a way to find the class names of the vuetify elements so that I can avoid asking these types of questions in the future.
Thanks.
Here's a couple screen shots in case my description was clear enough.
Per Varun's request, here is one of my declarations for a v-data-table.
<v-data-table
:headers="headers"
:items="tickets"
item-key="ticketId"
class="red--text"
></v-data-table>
Result:
The recommendation of using the text-coloring class didn't work as it just turn all of the text in the table to red, but didn't change the icons. Is there any way to edit the CSS of the icons directly?
can you share the code please ?
Usually the color of the default pagination icons in v-data-table are black when enabled and grey while disabled.
you can use class="<color>--text" to change the text and enabled icon color to your preference
After digging through the CSS file in Vuetify and finding the class name of several of the v-data-table components, I found this solution to work.
Inside the style tag in my component:
#table > .v-data-footer .v-icon {
color: black;
}
Small note: without the !important keyword, this styles only the enabled icons in the footer (i.e. if you can go to the next page or not). If you want to style both, just add the keyword and your good to go.
How to disable blue highlight from this kendo list :
Thank you in advance
You can do it with some creative style overriding to get the effect you want.
i.e.
<style>
.k-item.k-state-selected.k-state-focused:not(:hover) {
background-color: transparent;
color: inherit;
}
</style>
will get rid of the blue highlight colour but still show the grey highlight when hovering and it also fixes the font colour back to black. So you get black on transparent instead of white on blue.
http://dojo.telerik.com/#Stephen/EtUXE
But it can be difficult to get the CSS selector just right to only change the particular styling you want without affected other kendo widgets on the page that use similar styling selectors.
Getting the correct style rule is particularly difficult in this case because the list portion that pops up is a disconnected popup that is not a child of the dropdownlist so you can't use a child selector to only target dropdownlist popups...as you can see in my dojo example, both dropdownlists are affected, as would an comboboxes and any other kendo widgets that use the same style rules.
I've noticed this for a while now on my Kendo Grids. I haven't been able to find anything on SO or the Telerik Support Forums about it so I figured I would just ask to see if anyone else has this same issue.
Basically, if I set my Kendo Grid to have vertical scrolling, the heading columns for my grid are then offset by the width of the scrollbar which appears in the grid body.
I'm not sure if this is a CSS conflict that I have somewhere or if this is just the way Kendo intends it to be (doesn't seem right though).
Here is a screenshot of what I'm referring to:
As I expected, it was a CSS style that was causing this problem.
Someone at some point overrode the default .kendo-grid-header class and gave it a padding-right of 0px instead of the default 17px.
Changed it back and now it's displaying as I expect it to.
Thank you so much for this answer! While it didn't work for me with the latest version of kendo-grid, it was the reason that I was able to find the answer in the latest version.
We were overwriting the default .k-grid-header class. Inspecting the HTML, we found that the latest version has the padding as 0px 16px 0px 0px.
I'm using Kendo grid in my application. When I try to resize a column in IE, all the other columns in the table disappear.
This does not happen in Firefox or Chrome, just IE 9 and 10.
Can someone please help on this as I'm breaking my head over this issue from a day?
The issue is with mixing percentages and px for your column width.
One solution is to make sure you assign a specific width to EVERY column in your grid (120px).
Do NOT use percentages, unless your parent has a specific width (not 100%, but 800px or something like that).
There is a good chance this is to do with IE not inheriting CSS properties the same way as the other browsers. The Kendo widget will be output in its own div (check the kendo CSS, might be something like k-container or k-widget), so look at its CSS and that of any parent divs and you might have some luck.
This question already has answers here:
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
(9 answers)
Closed 6 years ago.
I have a div set to hide content with overflow-x and display (visible) content with overflow-y.
Unfortunately it's not working how I'd like it to. It adds vertical scroll bars - I assume this is because overflow-x and overflow-y don't function together.
As far as I'm aware if one overflow is set to hidden, the other gets set to auto.
Is there any other way around this? So I can have the overflow hidden horizontally and displayed (without a scroll) vertically?
Just so there's no confusion here's a fiddle to explain a little more: http://jsfiddle.net/kwnQk/
edit
Here is the actual issue I'm having: http://jsfiddle.net/kwnQk/1/
I have a select box, created from divs and jQuery, that ends up going over the div height, causing it to add scroll bars.
It's a shame the overflow function works the way it does because the div's overflow-x must be hidden, causing the div's overflow-y to be auto.
edit 2
Please see this new JSFiddle to show exactly why I need the overflow: http://jsfiddle.net/kwnQk/3/
It consists of sliders too, which need to be set to a certain width. And they cannot take up the entire height of the page so I have to limit their height, too.
I would think you can just leave the overflow property to visible and just use padding left and right.
Unless you have images, the text should just get wrapped.
For images, you should look at using children divs with width:100%
Can you try some jQuery scroll plugins for this?
http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
http://baijs.nl/tinyscrollbar/
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
Try the jquery selectbox plugin, it's great and do exactly what you are trying to:
http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html
Bad combination, unfortunately. From the documentation http://www.w3.org/TR/css3-box/#overflow-x:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.