How to position edit button? - vue.js

I am trying to position the edit button in FilePond but it is not working, here is what i've tried:
<file-pond
ref="pond"
stylePanelLayout="compact"
captureMethod="camera"
:allow-multiple="false"
:imageEditor="myEditor"
:files="myFiles"
styleImageEditButtonEditItemPosition="top right"
/>

Related

Special="save" button doesn't work in odoo16 form view

When I add my "save" button and "discard" button as following:
<footer>
<button string="Save" special="save" class="btn-primary" close="1" />
<button string="Discard" class="btn-secondary" special="cancel"/>
</footer>
Both buttons dont work and when I click them, nothing happends.

Material UI button label colour won't change after changing disabled state

After changing programmatically the "disabled" parameter of Material UI button the labels' color won't change on Safari. (It works for Chrome).
CodeSandbox link:
https://codesandbox.io/embed/material-demo-forked-8ly0d
According to this issue https://github.com/mui-org/material-ui/issues/26251
you need to add a prop key to your <Button> component to force it to re-render:
<Button key={`${disabled}`} disabled={disabled} />

How to add Font-awesome icon to tabview in Nativescript Vue platform

I'm trying to use font-awesome icon inside the TabView item. I am able to use this same code elsewhere in the page and it works fine. It just wont show any icon inside the tabview.
In my main.js:
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';
TNSFontIcon.debug = true;
TNSFontIcon.paths = {
'fa': './assets/css/font-awesome.css',
'ion': './ionicons.css'
};
TNSFontIcon.loadCss();
Vue.filter('fonticon', fonticon);
In App.vue:
<TabView class="tab-view" :selectedIndex="selectedIndex" androidTabsPosition="bottom">
<TabViewItem class="fa" :text="'fa-plane' | fonticon" >
<Label text="Content for Tab 1"/>
</TabViewItem>
<TabViewItem title="Tab 2">
<Label text="Content for Tab 2" #tap="pretextsTap()" />
</TabViewItem>
</TabView>
I'm using Nativescript Vue platform and couldn't find the example of using font-awesome icon inside the tabview item. In the first TabViewItem, I was trying to add fa-plane icon to see if I got it right. It didn't. I look forward to your tip.
Thanks.
Tab view items have a title property, not text.
Give :title="'fa-plane' | fonticon" a shot.

Calculating a popover position from a button click, instead of an SVG inside the button

I have been struggling for the past few hours to get a button click to work. The button contains text and an SVG, when clicking on it it opens a popover component.
The popover calculates its position on the element that was clicked upon. This works when clicking on the button itself, but when clicking on the SVG inside of the button, the dimensions/offsets from the SVG are used to calculate popover position instead.
What am I looking for: a way to bubble the click on the SVG to the button, then using the event object from the button click to calculate the popover position.
How my button with events looks like right now:
<button type="button"
#click="popButtonClicked">
Go do magical stuff
<svg path="" />
</button>
I have tried playing with #click.modifiers on both the button and SVG, but to no avail.. Hope someone has the answer for me! :)
You can get the button's reference by passing the $event as a parameter to your function, and then accessing the .currentTarget of that reference:
<button type="button"
#click="popButtonClicked($event)">
Go do magical stuff
<svg path="" />
</button>
And then in your function:
popButtonClicked (event) {
console.log(event.currentTarget)
}
Working codepen: https://codepen.io/anon/pen/gdBBdz

System should not refresh after clicking on already selected radio button

I have 2 radio buttons , i selected one to them , there is an ajax call when i select that , what i want that there should not be any ajax call when i click on the already selected radio button . How to implement this.
<label for="cooperativeAuthorisedRepresentativeType">#{msg['com.crimsonlogic.egov.rol.rnra.landsubdivision.applicantdetails.cooperative.cooperativeAuthorisedRepresentativeType']}</label>
<h:selectOneRadio id="applicantDetails_cooperative_cooperativeAuthorisedRepresentativeType" required="true"
value="#{landSubdivisionController.cooperativeDetails.repCode}" requiredMessage="#{cmn['rol.common.message.error.RADIO_REQUIRED']}" >
<f:selectItem itemLabel="#{msg['REPRWAND']}" itemValue="REPRWAND" />
<f:selectItem itemLabel="#{msg['REPFOR']}" itemValue="REPFOR" />
<f:validateRequired />
<a4j:ajax event="click" listener="#{landSubdivisionController.changeRepresentativeTypeForCooperative()}" render="cooperativeCitizenNationalId,cooperativeCitizenNationalIdForFranchisee,cooperativeCitizenSurname,cooperativeCitizenOtherNames,cooperativeCitizenDistrict,cooperativeCitizenSector,cooperativeCitizenCell,cooperativeCitizenVillage,cooperativeForeignerPassportNo,cooperativeForeignerSurname,cooperativeForeignerOtherNames,cooperativeForeignerCountry,cooperativeForeignerCity" />
</h:selectOneRadio>
<div class="col-md-4">
<h:message for="applicantDetails_cooperative_cooperativeAuthorisedRepresentativeType" styleClass="help-block"></h:message>
</div>
You should use change event instead of click event of javascript.
You can try writing like this:
<a4j:ajax event="change"