I have a cell renderer that shows an mgt-person fine but the hover mgt-person-card goes behind the following ag-rows.
I tried
.ag-row {
z-index: -unset !important;
}
.ag-cell {
overflow: visible !important;
}
and
mgt-person-card {
z-index: 100000;
}
Also suppressRowTransform={true}
Any help appreciated
Thanks
I'm not sure if this will work for a cell renderer, but I had a similar issue with a cell editor with a custom drop down. The issue occurred after I upgraded from ag-Grid version 24 to version 27. I didn't need to set suppressRowTransform to true or tinker with the CSS to fix it. Instead, in the column definition where I am using the cellEditor I added the property cellEditorPopup and set it to true.
Related
I am working with "after" pseudo elements' content-property to add divider between my footer-links.
.link::after {
content: " | ";
}
On iOS the the whole element including it's after-pseudo-element gets highlighted. This behaviour is unwanted - I would like the after-content not to get highlighted when its parent element (the "real" element) is active.
Here's a screenshot of an clicked link on an iOS device
Setting the tap-highlight-color-property separately for the after-element doesn't seem to have any effect.
jsfiddle representing this problem
Is there any css-way that can solve this problem or do I have to change the non-css code to make the divider not get highlighted?
Try using these two:
.link,
.link::after {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
A few more SO answers and links are here.
I'm trying to disable the checkbox on a specific row based on some property of it's Bean (or just make the whole row generally unselectable), but I can't really see any method or property I could use to get a handle of the checkboxes on the left hand side added when using a multi-selection model or something as broad as disabling the whole row. Any thoughts on how this could be achieved, or where I should be looking?
You can use CSS to hide uncheckable rows. First set their styles using setRowStyleGenerator:
grid.setRowStyleGenerator(row -> {
boolean uncheckable = (Boolean)
row.getItem().getItemProperty("uncheckable").getValue();
return uncheckable ? "uncheckable-row" : "";
});
Then change styles in your .scss, they should look something like:
.v-grid-row.uncheckable-row td {
background: #b1b9d6 none repeat scroll 0 0;
}
.v-grid-row.uncheckable-row td:first-child {
visibility: hidden;
}
.v-grid-row.uncheckable-row.v-grid-row-selected > .v-grid-cell {
background-image: none;
border-color: #d4d4d4;
color: inherit;
text-shadow: inherit;
}
Here I hide the whole cell with checkbox (if hiding the content of td itself, user will still be available to select the row), use a different color for these rows and prevent them from being highlighted when "select all" checkbox is active. Surely, further styling is available. Since we only hide them from user, they still can be selected with grid.select() and located in grid.getSelectedRows() collection, you should filter them manually (by using some "uncheckable" property, as shown above).
It is not possible to disable checkbox on a specific row.
One solution is to use generated column and/or custom renderer.
if you are using twitter bootstrap as your responsive framework, you should be able to find that row and give it a class of ".inactive", and if that doesn't work you can always rig it but placing and absolute positioned box with a height and width of 100% inside of that row and z-index it to at least 250. That should make everything in that row un-clickable!
This question already has answers here:
Why does margin-top work with inline-block but not with inline?
(3 answers)
Closed 7 years ago.
I'm trying to make what I thought would be a minor change to the CSS / SCSS in Bourbon in my Rails 4 website.
I'm simply trying to create more margin between my submit button and the "go back" link. At the moment the two elements are too close together as shown in the image below:
I've tried to solve this in a number of ways, both using my own standalone style sheet and within the Bourbon "source code" itself.
First I attached this class and tried this in my own plain app.css file, but element only shifted right slightly, no top margin:
.go-back-link {
margin: 20px 20px 20px 20px;
}
Then in Bourbon's _typography.scss file I tried adding margin to the a section, again no result:
a {
#include transition(color 0.1s linear);
color: $base-link-color;
text-decoration: none;
margin: 20px;
&:hover {
color: $hover-link-color;
}
&:active, &:focus {
color: $hover-link-color;
outline: none;
}
}
Third in _variables.scss I tried changing the line height property from 1.5 to 2, but this changed everything else on the page but has nothing to do with the a link element:
// Line height
$base-line-height: 1.5;
$header-line-height: 1.25;
Clearly I'm missing something fundamental here, so any nudges in the right direction would be greatly appreciated!
try using !important, for example :
margin: 20px !important;
As highlighted by #cinnamon this has little to nothing to do with Neat/Bourbon/Sass/Rails while more to CSS.
Clearly I'm missing something fundamental here, so any nudges in the right direction would be greatly appreciated!
Indeed.
You're currently trying to style an inline element, such as an anchor.
For more information, I'd strongly suggest reading the visual formatting model of CSS 2.1 which is quite comprehensive.
In order to solve this problem of yours you need to change the display mode of your anchor, which will then bring in the needed spacing you're requiring.
I'd also suggest to target the element with its own class, rather than using the generic global selector.
I am trying to get an OptionGroup to have the labels next to them, on the right hand side like normal radio buttons in every other UI I have ever used, instead of underneath them. I do not see anything in the API regarding how to change the layout of this? Anyone point me in the correct direction?
Follow these steps:
Add these lines to your css
.v-select-optiongroup-horizontal .v-select-option {
display: inline-block;
}
.v-select-optiongroup-horizontal {
white-space: nowrap;
}
.v-select-optiongroup-horizontal
.v-select-option.v-radiobutton {
padding-right: 10px;
}
And call
group.setStyleName("horizontal");
where group is the OptionGroup object.
Is it possible that you inherited some styles that display the text like that?
Did you try to call hzl.setSizeUndefined()? Or maybe playing with the width (setWidth()).
sIFR doesn't seem to work on objects with display set to none. I've tried calling sIFR.redraw() after setting display to block but the replacement isn't showing up. Am I just calling the wrong method?
sIFR can't calculate an element that isn't displayed, because the dimensions are 0x0. The alternative is to offset it via
el { position:absolute; left:-999em; top:-999em; }
You can also use overflow:hidden on the parent element to clip it away, when you need to show it you just re-set the element's position to 'static'.
Setting the style to {height: 0; overflow: hidden;} seems to work for me.