I am trying to implement a hover effect on the rows of an Angular ui grid. When the user hovers anywhere on the row, the complete row is supposed to change its background color. However, I am using the expandable grid, which automatically creates a row header with the expand icon. Now the CSS rules either color the row header area or the data area, but never the complete row.
This is the hover effect on the row header:
This is the hover effect on any other column:
Did anyone find a solution for this?
Here is what I did:
In the right part of the table, I added the following to the cell template:
<div class="ui-grid-cell-contents"
ng-class="{ 'ui-grid-cell-hover': (grid.appScope.hoverRow == row.uid) }"
ng-mouseenter="grid.appScope.hoverRow = row.uid"
ng-mouseleave="grid.appScope.hoverRow = undefined">
To cover the left part, I changed the expandableRowHeader template (in the template cache, since it is not exposed externally):
<div class="ui-grid-row-header-cell ui-grid-expandable-buttons-cell">
<div class="ui-grid-cell-contents"
ng-class="{'ui-grid-cell-hover': (grid.appScope.hoverRow == row.uid)}"
ng-mouseenter="grid.appScope.hoverRow = row.uid"
ng-mouseleave="grid.appScope.hoverRow = undefined">
...
</div>
</div>
I do not like this solution. Firstly, I do not like patching a third party component. Secondly, the hover reacts slow: it takes half a second until between hover and color change.
So in case someone has a better solution, please post it here.
Related
I am using antd table to display the information and I want to apply the class to the particular row when I click on it.
Currently its applying the class when I move the mouse out of the row after clicking it.
please consider this Code Sandbox for the code.
the the background color of the row is changing when I move the mouse out of the row after clicking on it.
I want it change as soon as I click on it.
Also when I sort any column the background color for that column is being removed, how can I avoid that?
Any solution, reference or hint is appreciated. thank you
The background color is working as you have intended. The problem is that you are hovering on the row aswell which is changing the color. Try using a table that does not have the :hover functionality.
The problem was even after applying another class the default styles for hover are still being applied, I had to suppress the default styles for hover on a row, for that I added this style for that particular antd css class in my App.css
.ant-table-tbody > tr.ant-table-row:hover > td {
background: unset;
}
is what I did.
I am building a table with user selected columns. The user has 2 different view options. 1 with everything contained in the body with a scroll bar and 1 with everything expanded and sticky headers. The user can click a button to expand the table. I am using Jquery to add a class to the user table to expand it.
Normal Table -
Expanded Table -
The issue I am having is that if only a couple of columns are selected and the user is in expanded view it looks really strange.
What I would like to do is if the table's width is smaller that the body(white background) then remove the expanded class and revert to normal view.
I have tried
if (window.getComputedStyle(document.getElementById('userTable')).width <= window.getComputedStyle(document.getElementsByClassName('siteBody')[0]).width) {
$('#userTable').removeClass('isExpanded');
$('.siteBody').removeClass('expandContainer');
}
Any help would be awesome! Thanks in advance and stay safe.
I think your code should work with this small change:
if (window.getComputedStyle(document.getElementById('userTable')).width <= window.getComputedStyle(document.getElementsByClassName('siteBody')[0]).width) {
$("#userTable").removeClass('isExpanded');
$('.siteBody').removeClass('expandContainer');
}
You have to put the jQuery selector #userTable within quotes, otherwise jQuery would not be able to figure out which element to perform the removeClass action for.
I have a custom bootstrap tooltip that my customer really likes. It works great on various elements. I added it to a datafield of a gridview table, and it Worked (ed) great -- "until" I added an overflow:hidden div to keep the gridview header row fixed.
Now the the tooltip gets occluded by this header row div. I poked around and saw various workarounds - the only one which kind of worked was to use data-container="body" (attribute) or various derivations of that using javascript which placed the tooltip on top of the header row div (when hovering the datafield of the first row in the gridview).
The problem I have with data-container="body" or { container:'body' }is that it overrides the custom style of the tooltip.
I set the width to 500px and I use !important, ... but when I use data-container="body" the width becomes 200px and the background color changes. I played around with z-index:1000; position:relative; in the css which helped the opacity which I have set to 1 but the width/background color still going to bootstrap default.
What is a workaround for this so I can keep my custom tooltip style?
Well, I came up with one -- non-programmatic workaround (which the client is sort of living with) and that is to add two blank rows to the beginning of the gridview and two more rows to the end of the gridview, and that way the rows with data content the popover tooltip doesn't get clipped now by the hidden div. One other thing I tried was to make the overflow div visible. This also worked to prevent clipping the tooltip, but I lost scrollability of the gridview. Is there a workaround for that?
This question is best read with the fiddle open ;). I've got a tables inside a table. The inside grey tables need to be sorted in there own container. So the grey rows can only be moved in the grey table. But the white rows need to move there grey table with them. So you cannot move a white row or a grey table on there own, they are connected.
Here is my fiddle for what I got right now:
fiddle
options = {
helper: (event, ui) ->
children = ui.children()
view = ui.clone()
view.children().each (index) ->
$(#).width(children.eq(index).width())
return view
}
$('#ccc').find('tbody').sortable(options)
I've been cracking my head on this all day but I cannot figure out how to like a grey table to a white row.
With your current html structure this is quite difficult to achieve.
First of all you need two sortables (one to sort big chunks with white headers and second to sort inside grey tables).
You want to be able to move big tables with small ones inside but as these were all inside sibling elements (tr) it was not really possible (so I've added multiple <tbody>s in there).
Anyway here's the working fiddle: https://jsfiddle.net/9vmvjqm4/5/
You still need to exclude thead from being sortable. I don't like CoffeeScript so I left that (add items : ':not(thead)') to options (or sth like that, there are topics how to do that on stackOverflow).
Also, have a look at this: http://johnny.github.io/jquery-sortable/
I'm trying really hard to replicate what happens here angular theme on Wordpress.
I've been able to get isotope to filter the post_thumbnails display them and it animate great but what I'm stuck on is when clicking an image or link the content of that post/portfolio gets displayed in a new div. Ideally in place and pushing boxes out the way so if you're on a mobile you don't have to scroll to the top.
Any pointers to get me started would be great, just can't find anything like this anywhere and think it would be very useful to others :)
Thanks
Actually that can be achieved quite easily. Basically you'll merely have to add a click handler to all Isotope items. The handler has to figure out which element has been clicked (e.g. by checking class names of the clicked item, but of course there are numerous ways) and then add the respective content to your div element.
If the content has to be shown in place, it's even easier. You can simply add the preview and the full content to the same Isotope item, but hide the full content by default:
<div class="item">
<div class="preview">...</div>
<div class="full">...</div> <!-- hidden with CSS -->
</div>
Then add a click handler to all Isotope items:
$(".item").click(function(){
$(this).toggleClass("big");
$("#container").isotope("reLayout");
});
By calling .isotope("reLayout") the other items are pushed out of the way when the clicked one expands.
Finally you need some basic CSS rules making div elements with .big bigger, hiding .full by default, but showing it when .big is set in the parent div. In that case .preview has to be hidden of course; this can all be done with CSS, no JavaScript/jQuery required.
Ok, it's a bit cumbersome to explain - I guess an example says more than a thousand words: JSFiddle
Of course that's just a very basic example, but hopefully it explains what I meant. ;)