how can i center this edit icon even when one address string is longer than the other?
This is the column I'm having this problem
<el-table-column
prop="address"
label="Address">
<template slot-scope="scope">
{{scope.row.address}}
<el-button
type="primary"
icon="el-icon-edit"
circle
size="mini"
style="margin-left: 55px"
#click="open(scope.$index, scope.row)"
></el-button>
</template>
</el-table-column>
Here is the complete code:
https://jsfiddle.net/xhbzpvas/
<div style="display: flex">
<address style="flex-grow: 1"/>
<icon/>
</div>
Related
I have a card that displays a "toolbar" whenever I hover over it
Reproduction link
<template>
<v-app>
<v-main>
<div class="py-12"></div>
<v-container>
<v-menu open-on-hover location="top" transition="slide-y-transition">
<template v-slot:activator="{ props }">
<v-card v-bind="props" variant="outlined">
<v-card-title>Card goes here</v-card-title>
</v-card>
</template>
<v-card variant="outlined" class="ml-4">
<v-card-actions>
<v-btn icon="mdi-link-variant-minus" size="small" color="error" />
<v-btn icon="mdi-arrow-expand" size="small" color="primary" class="ml-4" />
</v-card-actions>
</v-card>
</v-menu>
</v-container>
</v-main>
</v-app>
</template>
But this "toolbar" should not expand to full width. I want it to be like a tab, e.g.
Adding the d-inline-block helper class to v-card-actions or to its parent v-card didn't help. I'm basically looking for
<div style="background:red">I don't want this</div>
<div style="display: inline-block; background:red; margin-top: 24px">I want this</div>
width: fit-content; for the toolbar parent block might solve it.
I use DevExtreme with Vue.js
I am working on converting the Vuetify UI component to the DevExtreme UI component
I want to add a pop-up in the page, but the pop-up doesn't work normally.
A pop-up tag was created, but the content was empty inside the tag.
I tried many ways, but I couldn't find a solution. help me
This is tag state
<div data-app="true" class="v-application--is--ltr theme--light" id="app">
<div class="v-application--wrap"> ...page content... </div>
<!-- popup -->
<div>
<div class="dx-overlay dx-popup dx-widget dx-visibility-change-handler">
<div class="dx-overlay-content dx-popup-nomal" tabindex="0" style="width: 800px; height: 600px;">
<div class="dx-popup-content"></div>
</div>
</div>
</div>
</div>
This is code
<dx-popup v-model="isOpen" :visible="isOpen" :width="width" :height="height" :show-title="false" :show-close-button="false">
<div ref="dialog" class="u-dialog">
<u-layout height="*">
<u-layout ref="dialogTitle" class="u-dialog-header">
<div class="pa-0 text-right">
<v-btn depressed small icon class="mr-1" color="transparent"
v-if="isFullScreen && fullScreen"
#click="setFullScreen()"
>
<v-icon color="white">fullscreen_exit</v-icon>
</v-btn>
<v-btn depressed small icon class="mr-1" color="transparent"
v-if="!isFullScreen && fullScreen"
#click="setFullScreen()"
>
<v-icon color="white">fullscreen</v-icon>
</v-btn>
<v-btn depressed small icon class="mr-1" color="transparent" #click="closeButtonClick()">
<v-icon color="white">close</v-icon>
</v-btn>
</div>
</u-layout>
<u-layout ref="dialogContent" height="*" class="u-dialog-content">
<component ref="comp" :is="loader" :param="paramData" :code-map="popup.codeMap" #resolve="resolve" #reject="reject"/>
</u-layout>
</u-layout>
</div>
</dx-popup>
Is it possible to align element on the same height as the v-card-title in the card component of vuetify?
Currentl when using class="float-right" the element goes to the right but it is line below the title. I would like for it to be at the same level.
Here is the codepen:
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<div id="app">
<v-app id="inspire">
<v-card
class="mx-auto"
width="400"
>
<!-- Top row -->
<v-card-title>Cafe Badilico</v-card-title>
<button class="float-right">click me</button>
<!-- End of top row -->
<!-- Put components here -->
<v-card-title >
News
</v-card-title>
<v-list-item dense
>
<v-list-item-avatar>
<v-avatar color="indigo" size="36">
<span class="white--text headline">36</span>
</v-avatar>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>Header</v-list-item-title>
<v-list-item-subtitle>Subheader</v-list-item-subtitle>
<v-list-item-subtitle>2019-05-31</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-card-title >
News
</v-card-title>
<v-list-item dense>
<v-list-item-avatar>
<v-avatar color="indigo" size="36">
<span class="white--text headline">36</span>
</v-avatar>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title >Header</v-list-item-title>
<v-list-item-subtitle >Subheader</v-list-item-subtitle>
<v-list-item-subtitle >2019-05-31</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-card>
</v-app>
</div>
You can move the button into the title and use the v-spacer component:
<v-card-title>
Cafe Badilico
<v-spacer></v-spacer>
<button>click me</button>
</v-card-title>
https://codepen.io/El_Matella/pen/mdJrKNE
If you don't want it to be part of the title component, you can also use a flex container:
<div class="d-flex align-center justify-space-between">
<v-card-title>
Cafe Badilico
</v-card-title>
<button>click me</button>
</div>
https://codepen.io/El_Matella/pen/ZEGpjEq
I used angularjs material tabs here I need scroll for "md-tab-body" section, I have tried all the possibility from stack overflow but not working scroll.
<md-tabs md-enable-disconnect md-dynamic-height md-border-bottom md-selected='vm.tabIndex' id="wardName{{$index}}">
<md-tab ng-repeat="ward in vm.inpatientwards" ng-click="vm.loadWardview(ward._id)">
<md-tab-label>
<span translate id="ipwardId{{$index}}">{{ward.name}}</span>
</md-tab-label>
<md-tab-body>
<div style="margin:10px;" layout="row">
<md-grid-list flex>
<md-grid-tile ng-repeat="bed in vm.wardbeds" ng-click="vm.selectBed(bed)" id="wardBeds{{$index}}">
<md-grid-tile-header>
{{::bed.name}}
</md-grid-tile-header>
</md-grid-tile>
</md-grid-list>
</div>
</md-tab-body>
</md-tab>
</md-tabs>
The above code i used my application. I need help to set oveflow-y for body section.
You can do something like this may this help you in case if your scenario is like this:
<!-- if you have any div outside-->
<div style="height:100%">
<md-tabs md-enable-disconnect md-border-bottom md-selected='vm.tabIndex' id="wardName{{$index}}" class="helloHeight">
<md-tab ng-repeat="ward in vm.inpatientwards" ng-click="vm.loadWardview(ward._id)">
<md-tab-label>
<span translate id="ipwardId{{$index}}">{{ward.name}}</span>
</md-tab-label>
<md-tab-body>
<!-- try to inspect this div-->
<div style="margin:10px;height:100%;overflow-y: auto;" layout="row">
<md-grid-list flex>
<md-grid-tile ng-repeat="bed in vm.wardbeds" ng-click="vm.selectBed(bed)" id="wardBeds{{$index}}">
<md-grid-tile-header >
{{::bed.name}}
</md-grid-tile-header>
</md-grid-tile>
</md-grid-list>
</div>
</md-tab-body>
</md-tab>
.helloHeight{
height:100%;
}
And not sure as not tested this code.
I'm trying to use components like paper-rating, font awesome icons but they don't display anything in the page. I see that the tag is recoginsed but nothing is visible on the page. Below is a sample use of star-rating. Nethier the rating nor the map icon work
<section>
<template is="dom-if" if={{tests}}>
<template is="dom-repeat" items={{tests}}>
<a my-data="test" href="assessment/{{item.testId}}">
<paper-card class ="header" heading="{{item.assessmentTopic}}" image=""elevation="1" animated-shadow="false">
<iron-icon icon="maps:directions-bus"></iron-icon>
<div class="card-content" id="{{item.testId}}">
<img style="width : 75px; margin : 2px;" src="https://image.shutterstock.com/z/stock-vector-blackboard-inscribed-with-scientific-formulas-and-calculations-in-physics-and-mathematics-538136431.jpg" />
<div style="display: inline-block; margin-left: 10;">
<div class="small">
{{item.createdBy}}
</div>
<div class="small">
{{item.testId}}
</div>
<div>
<star-rating rating="4"></star-rating>
</div>
</div>
</div>
</paper-card>
</a>
</template>
</template>
</section>
So, I was able to solve this by updating iron-meta to version 2.0.0 in the bower.json and running bower update.