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
Styled components claim to cover all of css but I've run into this simple but significant issue. I need to enlarge my line-height but in a relative way, otherwise the line gets cut (it's height is smalled than the letters).
When I try to use rem or % as unit, I get an error saying a number type is expected instead of a string.
line-height: 100% means 100% of the font size for that element, not 100% of its height. In fact, the line height is always relative to the font size, not the height, unless its value uses a unit of absolute length (px, pt, etc). another option which you can try is using table-cell
#wrapper{
height: 40px;
width:200px;
display: table-cell;
vertical-align: middle;
text-align: center;
background: red;
}
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;
}
I'd like to generate multiple classes with mixed in sprites, using recursive, guarded mixins (and LESS compiler version 1.7).
The basic idea looks like this:
.sprite-img {
background: url("sprite.png") no-repeat;
}
.icon_1 { width: 26px; height: 23px; background-position: -27px -27px; }
.icon_1_hover { width: 26px; height: 23px; background-position: -73px -51px; }
.icon_2 { width: 26px; height: 22px; background-position: -73px -28px; }
.icon_2_hover { width: 26px; height: 22px; background-position: 0 -48px; }
// setup some lists
#colors: #efa, #a77 ...;
#IDs: 1, 10,...;
.generate-colored-toggles(#n, #i: 1) when ( #i =< #n) {
#c: extract(#colors, #i); // subtracts 1 from index for list access
#j: extract(#IDs, #i);
.container .toggle._#{j} .img-holder {
border-color: #c;
.sprite;
/* LESS compiler error: */
.icon_#{i}; // adding parentheses won't work either
&:hover {
.icon_#{i}_hover;
}
}
.generate-colored-toggles(#n, (#i + 1)); // recurse
}
.generate-colored-toggles(length(#colors));
The resulting classes ( ._1 ... ._n ) are to be assigned, dynamically (in a loop, cf. JSF's ui-repeat), during page generation.
Now I'm facing numerous limitations:
My sprites are generated using http://zerosprites.com/; thus, names of the sprite mixin classes .icon_ are taken from the image file names, and should therefore not be modified.
The .toggle's structure is determined by my widget library and should be left unchanged. This prevents me from assigning the specific sprite image class to the .img-holder directly in the markup.
Can you think of a workaround (preferably, using LESS only)?
This question already has answers here:
Reduce the gutter (default 30px) on smaller devices in Bootstrap3?
(5 answers)
Closed 8 years ago.
I'd like to have thinner gutters when rendered on mobile devices. I found this in mixins.less to let me set #grid-gutter-width globally. But what's the best way to set a different gutter width for ONLY col-xs- (mobile devices) when the columns are all collapsed without breaking everything else?
// Grid System
// -----------
// Centered container element
.container-fixed() {
margin-right: auto;
margin-left: auto;
padding-left: (#grid-gutter-width / 2);
padding-right: (#grid-gutter-width / 2);
.clearfix();
}
// Creates a wrapper for a series of columns
.make-row(#gutter: #grid-gutter-width) {
margin-left: (#gutter / -2);
margin-right: (#gutter / -2);
.clearfix();
}
// Generate the extra small columns
.make-xs-column(#columns; #gutter: #grid-gutter-width) {
position: relative;
float: left;
width: percentage((#columns / #grid-columns));
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (#gutter / 2);
padding-right: (#gutter / 2);
}
There is a good answer here that will solve this problem: Reduce the gutter (default 30px) on smaller devices in Bootstrap3?
i.e.:
/* Extra-small devices (767px and below) */
#media (max-width: 767px)
{
div[class^="col-xs-"] {
padding-left: 5px;
padding-right: 5px;
}
}
Of course, you might to wrap that up in LESS.
If you want to change gutter size you must open the variable.less, and look for
#grid-gutter-width:
and change it to your desired value.
Tips:
you can also change/edit number of columns, container width inside the variable.less.