I use vuecli3 and vuetify,
the problem is offset in RTL have margin-left instead of right.
Also
i config properly my vuetify.js file and html lang direction too.
Vue.use(Vuetify, {
iconfont: 'md',
rtl: true,
});
Also i tried to add these line to main.styl file
grid-offset-rtl()
for $size in $grid-breakpoints
for n in (0..$grid-columns)
&.offset-{$size}{n}
margin-left: 0
margin-right: (n / $grid-columns * 100)%
rtl(grid-offset-rtl, "flex")
but still doesn't work.
just update Vueitfy package using npm, it is fixed now!
npm update vuetify
I simply solved that by using conditional props
<v-col :offset-lg="isRtl ? 2 : 0" lg="5">
isRtl is computed property that checks for rtl mode:
isRtl() {
return this.$vuetify.rtl;
}
Related
Inside a tippy-js v6.3.7 tooltip, I have a 1px height div with background-color: #333. The div is randomly appearing blurred on some tooltips and not others. Removing the transform property on data-tippy-root fixes it but positions the tooltip in the upper-left.
Your answer saved me a ton of time, thanks Vael Victus! One more thing: you are missing a pair of {}, it should be:
popperOptions={{ modifiers: [{ name: 'computeStyles', options: { gpuAcceleration: false } }] }}
I discovered the problem resulted from the transform property used to position the tooltip itself. Tippy v6 uses popper v2, which defaults to positioning this way. You can disable it via popper's gpuAcceleration setting. Here's how I fixed it through Tippy.
opts = {
...opts,
popperOptions: {
modifiers: [{
name: 'computeStyles',
options: {
gpuAcceleration: false, // true by default
},
}]
}
}
tp = tippy(elem, opts);
Firefox did not have this rendering problem, and both Chrome 94 and 96 did.
In vuetify they have helper classes for typography.
for example, .display-4 goods for h1. here the full list.
When I choose display-1 for some element, In all resolutions the class gets the same font size (34px).
I was expecting to:
.display-4 will have font size of 34px in screen wide of 1024px.
.display-4 will have font size of 18px in screen wide of 300px.
According to this I have two questions, why is that? and how to make my font size elements be responsive using vuetify?
Update
Vuetify version 1.5
Take a look at display helpers example to see how to use a class when hitting a breakpoint. That being said, you can use dynamic class binding and breakpoint object in Vuetify.
Example:
:class="{'subheading': $vuetify.breakpoint. smAndDown, 'display-2': $vuetify.breakpoint. mdAndUp}"
Vuetify version 2
breakpoint object
Display
My solution changes font-sizes globally in the variables.scss file:
This is assuming you're using Vuetify 2 and #vue/cli-service 3.11 or later.
Step 1:
In src/scss/ create _emptyfile.sass and _font-size-overrides.scss.
In the _emptyfile.sass you can add this comment:
// empty file to workaround this issue: https://github.com/vuetifyjs/vuetify/issues/7795
Step 2:
In the _font-size-overrides.scss file:
/**
* define font-sizes with css custom properties.
* you can change the values of these properties in a media query
*/
:root {
--headings-size-h1: 28px;
--headings-size-h2: 22px;
#media #{map-get($display-breakpoints, 'lg-and-up')} {
--headings-size-h1: 32px;
--headings-size-h2: 26px;
}
}
Step 3:
In the variables.scss file (where you override the Vuetify variables):
/**
* Override Vuetify variables as you normally would
* NOTE: remember to provide a fallback for browsers that don't support Custom Properties
* In my case, I've used the mobile font-sizes as a fallback
*/
$headings: (
'h1': (
'size': var(--headings-size-h1, 28px),
),
'h2': (
'size': var(--headings-size-h2, 22px),
)
);
Step 3:
In the vue.config.js file:
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `#import "#/scss/_emptyfile.sass"` // empty file to workaround this issue: https://github.com/vuetifyjs/vuetify/issues/7795
},
scss: {
prependData: `#import "#/scss/variables.scss"; #import "#/scss/_font-size-overrides.scss";`,
}
}
},
};
font-sizes globally in the variables.scss file
html {
font-size: 90%;
#media only screen and (min-width: 600px) {
font-size: 94%;
}
#media only screen and (min-width: 1000px) {
font-size: 98%;
}
#media only screen and (min-width: 1200px) {
font-size: 100%;
}
}
For ag-grid vuejs, how do I wrap text in both headers and cell?
This is my example code.
https://codesandbox.io/embed/x98omwov3o
From v28 of AG Grid this is now natively supported for headers too by setting the properties wrapHeaderText and autoHeaderHeight.
const gridOptions = {
defaultColDef: {
resizable: true,
wrapHeaderText: true,
autoHeaderHeight: true,
},
};
You can play with these properties in this Plunker
Not sure about wrapping text in header, but this is how you could do it for cell.
In your ColDef, provide these two properties.
cellClass: "cell-wrap-text",
autoHeight: true,
And CSS will go like this: .cell-wrap-text { white-space: normal !important; }
There is also a property available for header, headerClass: "cell-wrap-text", but I was not able to achieve it yet.
Hope it helps a little.
I have page with min-height: 100vh
and it renders on mobile browsers with some overflow on bottom. And I use this script to fix it:
methods: {
calcVH() {
const vH = Math.max(document.documentElement.clientHeight, window.innerHeight, window.screen.height || 0)
document.getElementById('app').style.height = vH + 'px';
}
},
mounted() {
this.calcVH();
window.addEventListener('onorientationchange', this.calcVH, true);
window.addEventListener('resize', this.calcVH, true);
}
It works ok in emulator, but it doesn't work on chrome/safari mobile.
Did anyone have same problem?
Yes, I had similar issues using vh. It's a known problem.
My suggestion for you is to stop using vh on mobile and tablets in order to avoid these kind of hacks around. Use classic relative % (percentage) values instead. Since I've replaced vh with % I have no such problems on mobiles but it requires a bit more implementation effort. Using % isn't straightforward in all cases, but it pays you back since you've got a solution which works pretty everywhere in the same predictable way.
This VueJS component is designed to solve it:
https://github.com/razumnyak/vue-div-100vh
<template>
<vue100vh :css="{height: '100rvh';}">
<marquee>Your stuff goes here</marquee>
</vue100vh>
</template>
<script>
import vue100vh from 'vue-100vh'
export default {
components: { vue100vh },
}
</script>
Works for smaller percentages ... where rvh = "real viewport height".
<vue100vh :style="{ minHeight: '50rvh' }">
<marquee>This is inside a div that takes at least 50% of viewport height.</marquee>
</vue100vh>
I want to change the Ext.grid.Panel header height.
The height of a grid panel header is forcibly set at 28px.
No sass settings
Header configuration on the panel did not work for me
Modifying the grid columns height seems to work when configuring < 28px. 28px seems to be the minimum.
This is what I have so far (and it works), but I don't like the solution.
Ext.define('Ext.grid.Panel', {
listeners: {
beforerender: function (cmp, eOpts) {
cmp.headerCt.setHeight(25);
}
}
});
Additionally, column headers seem to be fixed at 28px as well. Setting the height of the header to 25 will not set the column header to 25. You need to override that as well in the scss / css. Otherwise your column header menus will display off the 28px height.
.x-column-header
{
height: 25px;
}
This solution does not work: If you drag column headers, changing the column's index position, it will break -.-
Recommedations?
To set the height of the column headers, you must set the height after their compilation. Again, the height value for the column configuration does not work to set the height < 28, but works > 28.
I have found that modifying the height after compilation correctly sets the height and allows columns to be draggable (everything works as it should).
Ext.define('Ext.grid.Panel', {
listeners: {
beforerender: function (cmp, eOpts) {
cmp.columns[0].setHeight(25);
}
}
});
My solution couldn't use this because I create a dynamic grid. In the dynamic part of the grid I use GRID.reconfigure(); - there by destroying anything that was created on a beforerender state.
Ext.define('Ext.grid.Panel', {
listeners: {
reconfigure: function (cmp, eOpts) {
cmp.columns[0].setHeight(25);
}
}
});
The reconfigure function fires after the reconfiguration so this is how I got around the dynamic grid reconfiguration.
You can also use sass sub-styles for that gridpanel and set the 'ui' config:
add ui:'custom-height-item' to your config
#include extjs-panel-ui(
'custom-height-item',
$ui-header-line-height: 28px,
$ui-header-padding: 2px;
)