I'm trying to load a custom dropdown celleditor component into my Ag-Grid in Vue3. I have reproduced the issue here: https://codesandbox.io/s/ag-grid-vue-3-example-forked-h5z6r5?file=/src/App.vue
The problem is that the options are hidden under the rows.
I have found one cheaty way of fixing this by overriding:
.ag-row-focus {
z-index: 999;
}
.ag-grid-cell {
overflow-y:visible !important;
overflow-x:visible !important;
z-index: 999 !important;
}
The problem with this approach is that it's completely dependent on ag-row-focus. If a user has a specific row selected and then clicks on the dropdown of another row, say the one above, then the selected row is still another row and therefore, the options are still hidden. There were also other issues, for instance that the dropdown itself with these overflow settings do not respect the cell width and height anymore (especially the height). When the text is larger than intended, it is also when collapsed breaking the height rules for that cell.
Ag-Grid versions used:
"ag-grid-community": "26.1.0",
"ag-grid-vue3": "26.1.2",
Update:
I got most of the behavior now working by adding the css below. Remaining issue is that the text inside the dropdown also overflows and gets too big due to which it goes onto other cells & the height goes further than the row. Expected behavior is probably here that the text gets cut off.
.ag-grid-cell {
overflow: visible !important;
z-index: 10030 !important;
}
.ag-row {
z-index: 0;
}
.ag-row.ag-row-focus {
z-index: 1;
}
.ag-root-wrapper,
.ag-root,
.ag-body-viewport,
.ag-body-viewport-wrapper,
.ag-center-cols-clipper {
overflow: visible !important;
z-index: 5;
}
.ag-center-cols-viewport {
overflow: visible !important;
}
Updated sandbox:
https://codesandbox.io/s/ag-grid-vue-3-example-forked-nvnhue?file=/src/App.vue
Related
I searched a lot, but every solution was to include some constant CSS class names into the page, and use the Column's ClassNameGenerator to set the proper classname on the cell/row.
Now this might be a good solution when the developer can decide on formatting a cell, however when a user can decide (especially with a script written as cell renderer) how a cell will look like, it is not possible to use the ClassNameGenerator.
So question is, how can I format the cell/row background programmatically, not using any CSS? I can provide custom component as cell value. So it's fine to render a label with icon, or just icon, or a checkbox, however coloring this rendered component is not enough, since this is smaller than the cell itself, making it look really ugly. I need to access the root element of the cell, and color it using getStyle().set("background", "xxxx"). How to achieve this?
Thanks!
You can use a TemplateRenderer.
For example:
Grid<Person> grid = new Grid<>();
grid.setItems(people);
grid.addColumn(TemplateRenderer
.<Person>of("<b>[[item.name]]</b>")
.withProperty("name", Person::getName)
).setHeader("Name");
Checkout this tutorial for more information: https://vaadin.com/docs/v14/flow/components/tutorial-flow-grid
OK, finally I solved. I use a template renderer with a proper template structure. I modified the cell style in a way, that my renderer DIV fills the entire cell (removed any padding/margin from the original cells)
<dom-module id="grid-style" theme-for="vaadin-grid">
<template>
<style>
[part~='cell'] ::slotted(vaadin-grid-cell-content) {
padding: 0px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
--cellopa: 255;
}
[part~='cell'][aria-selected~="true"] ::slotted(vaadin-grid-cell-content) {
--cellopa: 0;
}
</style>
</template>
</dom-module>
I also added some simple CSS declarations to one of the main CSS:
vaadin-grid-tree-toggle flow-component-renderer {
width: 100%;
height: 100%;
}
vaadin-grid-cell-content flow-component-renderer {
width: 100%;
height: 100%;
flex-grow: 1;
}
This way the rendered DIV fills the whole cell and I can color it's background.
Now the problem comes with the selection, since the selection is not visible any more. For this you find the --cellopa variable set to 255 normally and set to 0 for selected cells.
Now when I define a background-color on the div, I use rgba and I set the alpha to the var(--cellopa) variable, like this for example rgba(255, 0, 0, var(--cellopa))
Now when the row is not selected, the cellopa is 255, so the background is visible, when I select the row the cellopa is set to 0, so the background of the DIV gets transparent, and the row selection color on the row is visible. This is super fast, and changing the selection does not cause any glitch, and also the previous coloring state is restored properly.
I also managed to get around with the treegrid and managed to color even the hierarchy column fully using a special template for the hierarchy column with some padding taking the level into account.
How do I make the ion-menu-button (hamburger menu button) larger?
The ion-menu-button component creates an ion-icon with font-size set to 26px. There is no attribute to set size and CSS seems to have no impact.
[UPDATE]
I reported this as a bug to the Ionic team and they "fixed" it here: https://github.com/ionic-team/ionic/issues/18667 although i still don't see how to modify the size.
setting:
ion-icon {
--font-size: 100px !important;
font-size: 70px;
}
does nothing
Sorted it out on my own. There was a
.sc-ion-buttons-md-h {
display: flew;
}
wrapper that was limiting the size of the button. Once i removed that:
.sc-ion-buttons-md-h {
display: block !important;
}
and used ion-grid to place button on the left side of my header, i could then use:
ion-menu-button {
font-size: 50px !important;
}
to set the size of my menu button.
I've installed Shopware
inherited from the responsive theme and
adjusting the colors (less-files).
This worked well with the header and a few other components like container.less but not offcanvas-menu.less.
In Detail:
finding the color to change:
For this I first made all colors of the entire shop unique. So I can easily tap the color value over the current shop via a pipette tool.
Then I find the color value in the source code and copy the corresponding less source code components into my new theme. Only then do I change the color.
copied inside themes/Frontend :
a) /Responsive/frontend/_public/src/less/_components/offcanvas-menu.less too
b) /MyNewTheme/frontend/_public/src/less/_components/offcanvas-menu.less
the following part :
.sidebar--navigation {
.border-radius();
background: #0492d6;
.navigation--entry {
&:last-child {
border-bottom: 0 none;
}
}
.navigation--link {
overflow: hidden;
text-overflow: ellipsis;
}
}
and changed background: #0492d6; to background: #003E7e; inside b)
Complete result: gist MyNewTheme offcanvas-menu.less
But if i reload and grap the color i got again #0492D6.
As doppelcheck i changed the color in a) to background: black; and its black.
As another doppelcheck i changed the color in themes/Frontend/MyNewTheme/frontend/_public/src/less/_components/container.less to background: red; And red is visible.
Please check if you also imported it.
Please enter in your themes\Frontend\MyNewTheme\frontend_public\src\less\all.less
#import "_components/offcanvas-menu";
Here is the fiddle. I've put a Select box as sample. It seems that it can't be shown inside modal. How can be it solved?
...................................................Update.....................................
To solve this, I've added this CSS:
.bootstrap-select.btn-group .dropdown-menu.inner {
position: static;
}
Now, the Select-Option are showing, but it seems that the dropdown taking the real space which increasing the height of popup. But, I expect dropdown will cross the popup window if the height of dropdown is much. How can I make it?
Updated Fiddle
See the updated jsFiddle: http://jsfiddle.net/mijopabe/gj9axc18/5/ You need to add this to your CSS:
.modal { overflow: visible; }
.modal-body { overflow-y: visible !important; }
I also took the liberty of including the plugins corresponding CSS file from a CDN:
//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css
I've got an inline-block element that contains a very long word. When I resize the viewport until I reach the breakpoint of the text wrapping to the next line, I get a substantial amount of space. However, I would like the inline-block element to wrap immediately to the width of its contents.
I found it hard to explain exactly what's going on, so below an animated gif to illustrate my issue:
Upon resizing the viewport:
To be clear, the image above is me continuously resizing the viewport.
Does anybody know a way to achieve what I'd like? Even with CSS hyphenation the white-space still remains (which I don't want).
JSFiddle. Resize the frames to see what I mean.
div {
display: inline-block;
background-color: black;
color: white;
padding: 5px;
}
The inline-block indeed extends on resizing as your animation shows, so that it keeps place for the long word to go into that space again.
One simple solution would be to add text-align: justify, but I'm afraid it may not exactly be what you want (see demo).
Another one would be the use of media queries, as #Parody suggested, but you would have to know the dimentions of the containing div, and that would not be very scalable as you mentionned.
The word-break: break-all suggested by #yugi also works but causes the words to to collapse letter by letter, regardless of their length.
The only way to achieve the exact behavior is (as far as I know) to use javascript. For example, you would have to wrap your text into a span element inside the div, and then add something like this :
var paddingLeft = parseInt($('#foo').css('padding-left')),
paddingRight = parseInt($('#foo').css('padding-left')),
paddingTop = parseInt($('#foo').css('padding-top')),
paddingBottom = parseInt($('#foo').css('padding-Bottom')),
cloned = $('#foo span').clone(),
cloned_wrap = document.createElement('div');
$(cloned_wrap).css({
paddingLeft : paddingLeft,
paddingRight : paddingRight,
display : 'inline-block',
visibility: 'hidden',
float: 'left',
});
$(cloned_wrap).insertAfter('#foo');
cloned.appendTo(cloned_wrap);
$(window).on('resize', function(){
$('#foo').css('width', cloned.width() + 1);
$(cloned_wrap).css('margin-top',- $('#foo').height() - paddingTop - paddingBottom);
}).resize();
Please see the jsfiddle working demo. (← edited many times)
That's quite a lot of code, but it works ; )
(PS : I assumed jquery was available, if not, quite the same is achievable in pure JS)
I don't think this is possible only with CSS for the one element. The reason for your behavior is that the width of the element is still 100% of its container. The only way I could think to accomplish this is by doing something a little bit "creative"...try setting the style to inline so you get the shrink-wrap behavior, but to get around the background color issue, also put it in a container that shares the same background. That should work.
If im understanding you correctly you could use the #media type to decide what css to use depending on the width of the screen
here is an example of what i mean
#media(min-width:0px) and (max-width:200px){
div {
display: block;
background-color: black;
color: white;
padding: 5px;
}
}
#media (min-width:200px){
div {
display: inline-block;
background-color: black;
color: white;
padding: 5px;
}
}
I am still very appreciative of #lapin's answer (which I accepted and awarded bounty to), I found out after the fact that it didn't quite work on multiple elements next to each other (that has nothing to do with #lapin, I just didn't mention it in my original question as I thought it would be irrelevant information).
Anyway, I've come up with the following that works for me (assuming the elements it should be applied to are .title and .subtitle):
$('.title, .subtitle').each(function(i, el) {
var el = $(el),
inner = $(document.createElement('span')),
bar = $(document.createElement('span'));
inner.addClass('inner');
bar.addClass('bar');
el.wrapInner(inner)
.append(bar)
.css({
backgroundColor: 'transparent'
});
});
function shrinkWrap() {
$('.title, .subtitle').each(function(i, el) {
var el = $(el),
inner = $('.inner', el),
bar = $('.bar', el),
innerWidth = inner.width();
bar.css({
bottom: 0,
width: innerWidth + parseFloat(el.css('paddingLeft')) + parseFloat(el.css('paddingRight'))
});
});
}
shrinkWrap();
$(window).on('resize', function() {
shrinkWrap();
});
Basically what I do is:
put the text in an inner wrap element
create an additional absolutely-positioned background element
get the width of the inline inner wrap element
apply said width to the background element (plus padding and whatnot)
The CSS:
.title, .subtitle {
position: relative;
z-index: 500;
display: table;
padding-left: 10px;
margin-right: 10px;
background-color: red;
}
.title .bar, .subtitle .bar {
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: -10;
background-color: red;
}