I have some card with height prop for height ofc..
I need to have different heights for xs and higher sizes so I did this:
<v-card height="250"> --> works
<v-card :height="[$vuetify.breakpoint.xs ? 450 : '250']">
And I get error that says, number or string expected got array.
For other things like :class, :style etc works fine...
Try a computed property to return the height like :
computed:{
getHeight(){
return this.$vuetify.breakpoint.xs ? 450 : '250';
}
}
and inside template :
<v-card :height="getHeight">
if you don't want to use any property you could use it by removing the brackets like :
<v-card :height="$vuetify.breakpoint.xs ? 450 : '250'">
Related
Currently I have the value being passed from the component
<Img $marginTop= {entry?.intersectionRatio} src={imgUrl} alt="" />
The code below is a simple statemnt which check if $marginTop is true (not null), then it should calculate calc($marginTop*-10)vh, else it should set margin-top as 0px. But the code below seems to fail to obtain the $marginTop value.
const Img = styled.img<{$marginTop : number | undefined}>`
margin-top: ${({ $marginTop }) => ($marginTop ? "calc($marginTop*-10)vh" : "0px")};
`
What is the correct way of achieving this?
I can't stretch the table to the entire height of the block, even with one record
I am using PrimeReact in my app, here is my code:
<DataTable
value={dataArr}
headerColumnGroup={headerGroup}
paginator
rows={1}
rowsPerPageOptions={[10, 25, 50]}
rowHover
responsiveLayout="scroll"
showGridlines
stripedRows
resizableColumns
>
....
</DataTable>
Because you are using responsiveLayout="scroll" you want to set scrollHeight="200px" or whatever height you want.
Example: https://codesandbox.io/s/boring-estrela-jvzoei?file=/src/demo/DataTablePaginatorDemo.js
I'm trying to hide multiple elements inside the DOM by changing shared state when window is resized.
<body class="font-body relative" x-data="{hideOnMobile:false}">
<section class="mt-5" :class={'section' : !hideOnMobile , 'hidden' : hideOnMobile}">
...
</section>
</body>
And when i try to
window.onresize = function (event) {
let data = document.querySelector('[x-data]');
if (window.innerWidth > 639) {
return data.__x.$data.hideOnMobile = true;
}
};
It should change the state ** hideOnMobile** to true but it doesn't somehow any idea?
Have you tried using #resize.window? (ie. adding the resize listener using Alpine.js) it should make your code simpler than using window.onresize + trying to update Alpine.js __x.$data internal.
<body
class="font-body relative"
x-data="{hideOnMobile:false}"
#resize.window="hideOnMobile = window.innerWidth > 639"
>
<section class="mt-5" :class={'section' : !hideOnMobile , 'hidden' : hideOnMobile}">
...
</section>
</body>
You have no space before x-data attribute. Try to change this line:
<body class="font-body relative"x-data="{hideOnMobile:false}">
to this:
<body class="font-body relative" x-data="{hideOnMobile:false}">
Looks like this is used as an example in the AlpineJS readme. Check this out:
.window modifier Example:
<div x-on:resize.window="isOpen = window.outerWidth > 768 ? false : open"></div>
Adding .window to an event listener will install the listener on the
global window object instead of the DOM node on which it is declared.
This is useful for when you want to modify component state when
something changes with the window, like the resize event. In this
example, when the window grows larger than 768 pixels wide, we will
close the modal/dropdown, otherwise maintain the same state.
The template of my component contains this html element:
.grid-item(:style="{ width: columnWidth, backgroundColor: 'blue' }")
and I'd like to set its width value using a computed property:
computed: {
columnWidth () {
return ((this.maxWidth - ( this.marginWidth * 2)) - ((this.columnsCount - 1) * this.gutterWidth)) / this.columnsCount;
}
}
How can I achieve this in a correct manner?
The problem is obviously in the :style="{ width: columnWidth part
since every thing works perfectly when I set this width:'20px' for example.
I had to append a unit to the columnWidth value in the inline style.
width: columnWidth + 'px' did the trick.
I am working on syncfusion grid (third party custom controls) using Angularjs in my current project.
I have one little issue with grid regarding height. I have done some angular code that set height of grid (I use "e-scrollsettings-height" attribute to do so) but it will make grid blank when grid is empty you can see attached screen shot for make sense.
One thing is I don't want to use paging in my grid.
I think maybe there is some attribute for min-height but I don't find any related attribute.
Finally i got an answer so i am posting here for others
in view:
<div class="gridStyle" ng-init="getList()" ma-cmis-grid-directive id="cmisGrid" e-scrollsettings-height="{{maximumGridHeight}}" e-actioncomplete="actioncomplete"></div>
in script file:
$scope.maximumGridHeight = 330;
$scope.actioncomplete = function (args) {
if (!this.initialRender && args.requestType == "refresh") {
var height = Math.ceil(this.getRowHeight() * this.model.currentViewData.length);
this.option("model.scrollSettings.height", height > $scope.maximumGridHeight ? $scope.maximumGridHeight : height);
}
else if (args.requestType != "sorting" && this.model.selectionType == "single")
{
var height = Math.ceil(this.getRowHeight() * this.model.currentViewData.length);
this.option("model.scrollSettings.height", height > $scope.maximumGridHeight ? $scope.maximumGridHeight : height);
}
}