I'm working in a Vue application with Vuetify. I'm trying to add a v-tooltip around a v-list-tile-avatar element with an image in it like so:
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-list-tile-avatar>
<img src="avatar.png">
</v-list-tile-avatar>
</template>
<span>Click to view.</span>
</v-tooltip>
But this seems to make the avatar image disappear.
Without the tooltip, I inspect the avatar element and I see this:
<div class="v-list__tile__avatar">
<div class="v-avatar">
<img src="avatar.png">
</div>
</div>
With the tooltip, I see this:
<span class="v-tooltip v-tooltip--bottom">
<span></span>
</span>
What's going on here?
you are missing v-on="on" activator:
<img v-on="on" ... />
example: https://codepen.io/hans-felix/pen/XWJadQo
Got it!
<v-tooltip bottom>
<v-list-tile-avatar slot="activator">
<img src="avatar.png">
</v-list-tile-avatar>
<span>Click to view.</span>
</v-tooltip>
^ This works. Not sure what the difference is between including a template with v-slot:activator="{ on }" and setting v-on="on" on the element, and not using a template and putting slot="activator" on the element instead, but if one doesn't work, try the other one I guess.
Related
I'm new to styling, sorry if this is too basic.
In my React app, I am trying to import an image from file, like so:
import cup from './img/cup.png'
and style it alongside text and everything else contained in the <div> like so:
<div style={{display:'inline-block',
textDecoration:'underline',
cursor:'pointer'}}>
<img src={cup} alt=''/>
<h1 className="title is-4">"Item"</h1>
</div>
But this works badly. Image display is too big.
I would like to reference image right into style and manage 'height' and 'width' (or 'size') within it as well, but haven't found a way.
is this possible? how so?
Try this if you want in vertical
<div>
<div style={{ display: "inline-block",
textDecoration: "underline",cursor: "pointer"}}>
<img
style={{ height: 100 }} src={
"https://www.belightsoft.com/products/imagetricks/img/intro-video-poster#2x.jpg"
} alt=""
/>
<h1 className="title is-4">"Item"</h1>
</div>
</div>
and if you want in horizontal
<div>
<div style={{ display: "flex", textDecoration: "underline", cursor: "pointer"}}>
<img style={{ height: 100 }} src={
"https://www.belightsoft.com/products/imagetricks/img/intro-video-poster#2x.jpg"
} alt=""
/>
<h1 className="title is-4">"Item"</h1>
</div>
</div>
just add height and width size to your image, like this
<img src={cup} alt='' height={50} width={50} />
also, you can add auto to and set the size to another it will work best
<img src={cup} alt='' height={50} width='auto' />
<img src={cup} alt='' height='auto' width={50} />
Basically the first step of you is to learn what a selector is. In short, it is a naming convention to link style with the HTML tag(s)(or dom, whatever). For example, let's say you put a class to the image.
<div>
<img src={cup} alt='' className="my-image"/>
<h1 className="title is-4">"Item"</h1>
</div>
And a CSS file, which you have to import it as a dependency of the component at the header of source file, next to the import cup from './img/cup.png'.
style.css
img.my-image {
// css rules here
}
Then the magic occurs, the CSS rule, e.g., the absolute/relative width/height written in the file will be applied to the image accordingly.
I am making an angular component to make a bunch of qr codes and print them. I have a component just for the qr code and want to make it possible to delete a qr code from the list and undo-delete a previously deleted code. I Before adding the undo-delete functionality, everything was working well because I was just removing that particular component from the list. However, now I don't want to completely remove it, I just want to fade it out until print time. I am using ngClass on my div and the "deleted" class does work. Anything that has class noPrint just gets display:none, however when I try to use ngClass to dynamically give a code noPrint, it doesn't set display: none on that particular code.
My qr-code html: The issue is in the first div tag at the top. I have tried adding single quotes on the class names to see if that works as well.
<div
fxLayout="column"
class="qrobj"
[ngClass]="{
deleted: !this.shouldExist,
noPrint: !this.shouldExist
}"
>
<button *ngIf="this.shouldExist" class="noPrint" mat-icon-button>
<mat-icon
matTooltip="Delete this Person?"
matTooltipPosition="after"
color="warn"
(click)="sendDelete()"
>block</mat-icon
>
</button>
<button *ngIf="!this.shouldExist" class="noPrint" mat-icon-button>
<mat-icon
matTooltip="Undo Delete?"
matTooltipPosition="after"
color="primary"
(click)="undoDelete()"
>undo
</mat-icon>
</button>
<div fxLayout="row" class="text">
<p>{{ person.Name }}</p>
<p>{{ person.Name }}</p>
</div>
<div fxLayout="row" class="images">
<img [src]="this.qrlink" (error)="getDefaultUrl()" />
<img [src]="this.piclink" (error)="getDefaultUrl()" />
</div>
</div>
Here is the part of my css that matters:
.deleted {
opacity: 0.3;
}
#media print {
.noPrint {
display: none;
}
}
This is what it looks like
before I delete a Code
This is what it looks like
after I delete a Code:
This is what shows up in the print preview:
(Bootstrap-Vue 2.0, Vue.js 2.5)
I was wondering if it's possible to mix traditional CSS Bootstrap 4 classes with Bootstrap-Vue. For example, can I include the following?:
<section id="introduction">
<b-container class="h-100">
<b-row class="h-100 fill-viewport align-items-center">
<b-col cols="12">
<h1 class="text-primary">Header text</h1>
<p class="lead">This is my text, in a p tag</p>
</b-col>
</b-row>
</b-container>
</section>
with some basic CSS:
<style>
body,html{
height:100%;
}
</style>
I'm asking this, because I'm unable to get align-items-center to work on a page I'm trying to create. I can get it to work with standard Bootstrap 4 using the class= syntax, but not with the Bootstrap-Vue tags such as b-row or b-column. Any help is greatly appreciated.
SOLVED
The answer to this question is that yes, you can combine the two. Going to the Boostrap-Vue playground (from their website) and pasting the following code into the html will make this immediately obvious:
<b-alert show> Hello {{ name }}! </b-alert>
<button class="btn btn-primary"> WOO BLUE BUTTON </button>
<b-btn v-b-popover.hover="'I am popover content!'" title="Popover Title" class="btn btn-danger">Hover Me</b-btn>
My problem was, that I wasn't using the h-100 tag for all the parent tags. Adding this to the section tag solved the problem.
I've a problem with the z-index on IE 11, a dropdown appears under other element in a pop up message. Let me show you a little sketch captured from the page.
Pop-up sample
I reasearch for a lot of possibles solutions but any doesn't works for me. Also I am using PrimeFaces with Angular 2. I found this solution to fix this kind of problem in IE:
<div style="position: relative; z-index: 3000">
<div style="position: absolute; z-index: 1000">
[ ... ] <!-- The drop down menu will be here -->
</div>
</div>
And I tried to use this way with my code, but doesn't work. :(
<p-dialog header="Assign claim {{ vm.request.id }}" [(visible)]="vm.isDisplayed" [width]="700" [modal]="true" >
<div class="ui-g form-group">
<div style="z-index: 3000">
<div class="ui-g-6">
<h4>Lorem ipsum</h4>
{{vm.request.responsible}}
</div>
<div class="ui-g-6">
<h4>et dolo</h4>
<div style="z-index: 1000"> <!-- This dropdown menu should to appear over the form, not behind :( -->
<p-dropdown class="popup-dropdown" [(ngModel)]="vm.id" [options]="vm.users" [autoWidth]="false" (onChange)="changeAssignedUserId($event.value)">
</p-dropdown>
</div>
</div>
<div class="ui-g ui-g-12"></div>
</div>
</div>
<!-- More awesome code! -->
Can anybody help me?
Thanks in advance to everybody.
Ashia.
Because sadly, you cannot redefine z-index for a child component with a parent who already has z-index defined. The child inherit the z-index from it parent when it exist.
You can use the z-index: -1; hack, but it's not really a stable and advisable solution...
The best approach is to define z-index for your “brother” component (both .ui-g-6 for example).
Thanks to everybody, specially to #MadDev, finally I solved the problem following your answer, I used the following code
<p-dialog [contentStyle]="{'overflow':'visible'}">
<p-dropdown appendTo="body"></p-dropdown>
</p-dialog>
Ashia.
I think that your problem comes from PrimeNG. Note that you are using a p-dialog, with a p-dropdown component inside, such the PrimeNG documentation explains:
Overlays Inside
When dialog includes other components with overlays such as dropdown, the
overlay part cannot exceed dialog boundaries due to overflow. In order to
solve this, you can either append the overlay to the body or allow overflow
in dialog.
<p-dialog>
<p-dropdown appendTo="body"></p-dropdown>
</p-dialog>
<p-dialog [contentStyle]="{'overflow':'visible'}">
<p-dropdown></p-dropdown>
</p-dialog>
Then your code should be:
<p-dialog header="Assign claim {{ vm.request.id }}"
[(visible)]="vm.isDisplayed" [width]="700" [modal]="true"
[contentStyle]="{'overflow':'visible'}>
<div class="ui-g form-group">
<div style="z-index: 3000">
<div class="ui-g-6">
<h4>Lorem ipsum</h4>
{{vm.request.responsible}}
</div>
<div class="ui-g-6">
<h4>et dolo</h4>
<div style="z-index: 1000">
<p-dropdown class="popup-dropdown" appendTo="body"
[(ngModel)]="vm.id" [options]="vm.users" [autoWidth]="false"
(onChange)="changeAssignedUserId($event.value)">
</p-dropdown>
</div>
</div>
<div class="ui-g ui-g-12"></div>
</div>
</div>
This should fix your problem.
;-)
My <paper-dialog-scrollable> feature, inside of a <paper-dialog> open modal, has an issue with the scrolling capabilities. The scroll bar offsets into the content of the page, only in the mobile view. When I look through all of the styling, specifically if any margins or padding are changing it, I cannot find any correlation.
For context, it is part of an error window of a paper input box.
This is a snapshot of the HTML inside the Polymer Component.
<paper-input-error id="error">
<paper-dialog autoFitOnAttach="true" opened=[[modalOpen]] modal="true">
<div class="close-div">
<paper-button class="close-button" on-Click="_modalClose" autofocus><iron-icon class="close-icon" icon="icons:cancel"></iron-icon></paper-button>
</div>
<div>
<h3>{{resultMessage}}</h3>
<template is="dom-if" if="[[resultArray.1]]">
<paper-dialog-scrollable id="scrollable-area">
<div class="dialog" id="suggestList">
<template is="dom-repeat" items="[[resultArray]]">
<template is="dom-if" if="{{_isHeader(item.type)}}">
<div class="typeahead-header"><iron-icon class="typeahead-icon" icon="[[item.icon]]"></iron-icon> [[item.value]]</div>
</template>
<template is="dom-if" if="{{_isValue(item.type)}}">
<div>
<paper-item on-mouseenter="_mouseenterItem" class="selectable paper-items" value="[[item]]">
<paper-ripple></paper-ripple>
<span id="error-item">[[item.value]]</span>
</paper-item>
</div>
</template>
</template>
</div>
</paper-dialog-scrollable>
</template>
</div>
<div class="buttons">
<paper-button class="text-close" on-Click="_modalClose" autofocus><strong>Close</strong></paper-button>
</div>
</paper-dialog>
</paper-input-error>
Anyone had any issue with this sort of structure, or know of any styling that may be causing the scroll bar to offset?