I have a problem with vue media manager, it's a div with drag drop
<div
class="modal-content"
id="dragdropzone"
:class="{ 'has-active-dropzone': dragging }"
:data-dropzone-text="__('Drop your files here')"
#dragstart.prevent
#dragend.prevent="dragging = false"
#dragover.prevent="dragging = true"
#dragleave.prevent="dragging = false"
#drop.prevent="handleFiles($event.dataTransfer.files)"
>
The problem is i don't have button to upload browse the files
It's only drag and drop, i tried to put on vue this input with type="file" but got vue crash
<input type="button" ref="media2" id="btn-add-file" value="Upload" multiple accept="image/*" name="fileupload" :disabled="$parent.busy" class="btn btn-secondary" #change="handleFiles($event.dataTransfer.files)">
This is the console error and page blank:
Related
In vuejs 2 app using vee-validate ^3.4.14 I have several inputs on modal form of fixed height.
On validation errors I got validation error messages below of inputs, as I have layout like :
<div class="form-group">
<ValidationProvider
name="password_confirmation"
rules="required"
v-slot="{ errors }"
>
<div class="input-group">
<input type="password"
v-model="password_confirmation"
id="password_confirmation"
name="password_confirmation"
class="form-control editable_field"
placeholder="Password confirmation"
autocomplete=off
ref="password"
>
</div>
<p class="error">{{ errors[0] }}</p>
</ValidationProvider>
</div>
But these messages break layout of modal form, as height of modal form is increased and elements
on bottom of the form are hidden. If there is a way to show these errors in some other way ?
Say a) select input with “error_border” class and b) show some tooltip message near with any input with error text?
Thanks in advance!
Unable to upload the image.After click on the "add photo" button browser popup displayed. But its not taking the path of the file and not clicking the open button.
WebElement uploadElement=ep.Addphoto();
uploadElement.click();
uploadElement.sendKeys("Path_of_the_image");
driver.findElement(By.xpath("//input[#id='profile_pic']")).sendKeys("absolute-path-of-image-file")
Can you please try the above code ?
No need to click on the element. Directly use the above code to sendKeys to the input element.
The issue is that the element is present in the dom structure but not visible on the UI. As you can see in your DOM which is as follows:
<label class="d-flex flex-column cursor-pointer justify-content-center profile-photo garage-photos grey-bg" xpath="1">
<i class="material-icons large-font text-muted">photo_camera</i>
<p class="mb-0">Add Photo</p> <p class="mb-0">(optional) </p>
<input class=" display-none " type="file" name="profile_pic" id="profile_pic" accept="image/*">
</label>
The input class has display-none
I have a nested v-for of item
<div class="media" v-for="(comment, parentIndex) in adminComments">
<div class="media-body">
<div class="media" v-for="(answer, index) in comment">
<label class="control-label upload" v-if="comment.data===''">
<input class="file-upload" type="file" #change="uploadFile($event, parentIndex)">
Upload file
</label>
<label class="control-label upload" v-else>
<input class="file-upload" type="file" #change="uploadFile($event, parentIndex)">
{{comment.name}}
</label>
</div>
</div>
</div>
This is basically it, my adminComments is an array of objects and these objects have some attrs, including name, however, this name is changed with a function after the file is uploaded as well as a "loading" attribute to change an icon class, however, none of them is rendering.
As i read here the labels should be rendered well, however, this is not happening. I know that my comment object is indeed working because I also have a textarea with a v-model="comment.response". What could be wrong? I have done the same before and it has worked but in a single v-for and not in a nested list. Thanks in advance
I'm developing a mobile app using phonegap, vuejs2 and onsenui. I installed vue2-touch-events plugin for touch events. In this app i'm rendering some data using v-for. Here is the div.
<v-ons-list-item class="swipeArea"
v-for="(list, index) in todoLists"
v-bind:key="list.todo"
v-if="!list.completed"
v-touch:swipe.left="deleteLisItem(index)"
v-touch:swipe.right="doneLisItem(index)"
v-touch:longtap="deleteOrDone(index)" tappable>
<label class="center">
<i class="zmdi zmdi-check" aria-hidden="true"></i> {{ list.todo }}
</label>
</v-ons-list-item>
And then when user longtap a list there will be a pop with 3 button. Done, Delete and cancel. When user tap done, the item will be mark as done, if click delete, the item will be deleted and click cancel will cancel the event. Here is the div
<div v-if="doneOrDelete" id="doneOrDelete">
<div class="action-sheet-mask"></div>
<div class="action-sheet">
<button class="action-sheet-button" #click="doneLisItem">Done</button>
<button class="action-sheet-button action-sheet-button--destructive" #click="deleteLisItem">Delete</button>
<button class="action-sheet-button" #click="doneOrDelete=false">Cancel</button>
</div>
</div>
Now all i have to do is pass the index to the method. Can anyone help me how pass the index? TIA
I am developing an Angular 4 application using ngx-bootstrap modals heavily. I am currently using the template + modalService way of opening up modals. During a click event, this line of code is called:
#ViewChild() worklistTemplate;
// ...
this.modalRef = this.modalService.show(this.worklistTemplate, this.config);
And the worklist template looks like this:
<ng-template #worklistTemplate>
<app-action-view
[leftButtons]="leftButtons"
[labelHeader]="modalHeader"
[labelIcon]="modalIcon"
[modalRef]="modalRef">
<div class="row modal-info-panel">
<div class="col-xs-4 modal-user-info">
<fa name="mars" class="gender-icon"></fa>
<div class="field-panel">
<input type="text"
[ngModel]="rowInfo.lastName"
[ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
[disabled]="!modalFieldsEditable">
<input type="text"
[ngModel]="rowInfo.firstName"
[ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
[disabled]="!modalFieldsEditable">
<div>
<label for="modal-mrn">MRN --</label>
<input id="modal-mrn" type="text"
[ngModel]="rowInfo.mrn"
[ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
[disabled]="!modalFieldsEditable">
</div>
<div>
<label for="modal-dob">DOB --</label>
<input id="modal-dob" type="text"
[ngModel]="rowInfo.birthDate"
[ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
[disabled]="!modalFieldsEditable">
</div>
<div class="edit-panel">
<fa *ngIf=modalFieldsEditable class="worklist-edit-buttons green-hover link" name="floppy-o" tooltip="Save" (click)=saveChanges()></fa>
<fa *ngIf=modalFieldsEditable class="worklist-edit-buttons red-hover link" name="times" tooltip="Cancel" (click)=toggleModalFields()></fa>
</div>
</div>
</div>
<div class="col-xs-8 modal-id-info">
Associated ID
<div class="full-width">
<div class="row" *ngFor="let i of rowInfo.associatedIDs">
<div class="col-xs-6 cell">{{i.id}}</div><div class="col-xs-6 cell">{{i.source}}</div>
</div>
</div>
</div>
</div>
<div class="row" id="modal-table">
<app-table-view
[columns]="objDetailsCols"
[tableData]="objDetailsData"
[expandTemplate]="rowImageContainer"
[expandColStyle]="expandColStyle">
</app-table-view>
</div>
<div *ngIf="resolvePanelVisible" class="resolve-panel"
[#slideRight]>
<div class="resolve-label">
<fa class="lt-icon" name="wrench"></fa>
Resolve QA Issue
</div>
<div class="resolve-body">
Hello, World!
</div>
<div class="resolve-footer">
<a>Validate</a>
<a>Resolve</a>
<a>Reload</a>
<a (click)="toggleResolvePanel()">Close</a>
</div>
</div>
</app-action-view>
</ng-template>
The modal can be closed by clicking outside of the modal boundaries or there is a button inside the ActionViewComponent that calls modalRef.hide().
Memory usage increases drastically as more and more modals are opened. In fact, if I open the modal around 5 times, the application becomes sluggish and almost unusable. This is especially apparent if there are many rows in our TableViewComponent.
Is there a problem with the way I am using the modals, or is this an issue related to ngx-bootstrap modals? OR, is the issue related to the browser and unavoidable? I am developing on Chrome 62 right now.
I have verified that onDestroy is never called on the TableViewComponent inside the modal. It is not even called if I navigate to a different page component, though another table (not in the template) does have onDestroy called when navigating from the page.
Any feedback is appreciated greatly- I have been stuck for way too long on this.
This is an issue of ngx-bootstrap, unfortunately. I created a pull request (https://github.com/valor-software/ngx-bootstrap/pull/3179) so this will be fixed as soon as my PR is merged and new version is released.