I have created a page with lightening components as shown the below image, I want to change my pick-List field into radio button next to picklist option to choose the appropriate selection, can someone please help to create radio buttons instead of pickList filed
in the component I have used below code
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputSelect label="Race Type"
aura:id="Type"
class="slds-select"
labelClass="slds-form-element__label"
value="{!v.newRace.Race_Type__c}" />
</div>
Maybe something in line with this: (replace v.Name with attribute that contains the name of the race):
<aura:component>
<lightning:radioGroup name="radioGroup"
label="slds-form-element__label"
options="{! v.newRace.Race_Type__c }"
value="{! v.Name}"
type="radio"/>
</aura:component>
Related
Using Selenium and Chrome, I'm attempting to check a box located within a table. The table contains 2 checkboxes but they act as radio buttons, in that if I click one, the other will uncheck.
I've tried a variety of methods, which include the following:
Const CHECKED_STATE As String = "Ag-icon ag-icon-checkbox-checked"
findElementByClassName("ag-selection-checkbox").fireEvent("CHECKED_STATE")
findElementbyXPath("//span[#class=ag-icon ag-icon-checkbox-checked'])[1]").Click
findElementbyXPath(".//div[#class='ag-body-container']").Click
I'm not sure how to click the checkbox when the HTML code doesn't even have a checkbox type or an Id.
The HTML reads:
<span class="ag-icon-checkbox">
<span class = "ag-icon ag-icon checkbox-checked ag-hidden">
<span class = "ag-icon ag-icon checkbox-unchecked">
<span class = "ag-icon ag-icon checkbox-undeterminate ag-hidden"></span>
When I click on the checkbox, the unchecked and hidden lines of HTML will flip. So I'm guessing it's some sort of event that I have to trigger.
The following, depending on the rest of the html, should work to select the unchecked item and thereby toggle off the other item. It targets the class checkbox-unchecked:
driver.FindElementByCss(".ag-icon-checkbox .checkbox-unchecked").click
I have a page where I want a user to be able to edit their room information. For example the name of the room. The code I have currently is that it shows the roomName in an h3 and if they click on the edit button, then the property edit is changed to true (this will then show the text-field instead of the h3).
<!-- Room Name -->
<h2 v-if="edit == false">{{ roomName }}</h2>
<!-- EDIT -->
<v-text-field
v-else
label="Room Name"
v-model="roomName"
/>
<!--Edit Button-->
<v-btn v-if="edit == false"
#click="edit = true"
class="filter">Edit</v-btn>
<!--Cancel Button-->
<v-btn v-if="edit == true"
#click="cancelEdit"
class="filter">Cancel</v-btn>
The problem is: That if a user presses cancel I don't want it to update the property roomName. I try to do this by rerunning a computed property that grabs the roomName from the store. However I doesn't allow me to call a computed property in cancelEdit.
The reason I'm using a roomName property & v-model, and not directly using the value from the computed property is... because I don't understand how I can grab the value from an input if I press save.
How can I grab the value from an input or how can I make a cancel button with this structure?
Check this snippet to see if it can help you,
I didn't use vuex but you can your initial values from your store:
https://jsbin.com/yefiqinewu/edit?html,js,output
I got a paper-listbox containing a paper-checkbox contained within each paper-item of the list.
<paper-listbox id="groupMembers" multi attr-for-selected="label">
<template is="dom-repeat" items="[[users]]" as="member">
<paper-item label="[[member.user]]">
<span class="member-user">[[member.user]]</span>
<paper-checkbox checked="[[member.isManager]]"></paper-checkbox>
</paper-item>
</template>
</paper-listbox>
Whenever the checkbox is clicked it also changes the selected state of the listbox items resulting in an paper-item becoming selected or deselected.
How can that be prevented?
paper-listbox uses Polymer.IronSelectableBehavior and Polymer.IronMultiSelectableBehavior. So, you can use selectable attribute in order to prevent changing the selected state.
selectable is a CSS selector string. If this is set, only items that match the CSS selector are selectable. You can put a random string so that it won't match the paper-item element.
Demo
i solved the problem by avoiding it ;)
Moved the checkbox out of the paper-item into the dom-repeat like so:
<paper-listbox id="groupMembers" multi attr-for-selected="label">
<template is="dom-repeat" items="[[users]]" as="member">
<paper-item label="[[member.user]]">
<span class="member-user">[[member.user]]</span>
</paper-item>
<div class="checkWrapper">
<paper-checkbox checked="[[member.isManager]]"></paper-checkbox>
</div>
</template>
</paper-listbox>
With a bit of CSS positioning magic that works. Added a wrapper div to allow absolute positioning.
Given the following:
<div id="#my-container">
<div class="title">Companies</div>
<div class="tab active tab-apple">Apple</div>
<div class="tab tab-google">Google</div>
</div>
When page is loaded without any tab clicks yet, whichever tab with the default active class, needs to go in the .title div. For the example above, <div class="title">Apple</div>
On click of a tab, the class is switched to active, and vue.js needs to update the .title div once again.
How can this be done with vue.js? I've tried but not able to get it to work as intended.
The answer by David is one way to do it. But Vuejs offers in-line computations for this. So, no need to hook into any CSS event. Here's some code to explain:
Create a data property active_tab, just like David mentioned. And then bind it's value just like he's done it. In your tabs, add an click event and at that event, assign appropriate value to active_tab.
<div class="tab active tab-apple" #click="active_tab = Apple">Apple</div>
<div class="tab tab-google" #click="active_tab = Google">Google</div>
Now, to dynamically assign the active class to the respective tab, make the class attribute, a computed property, like this:
<div
:class="['tab', active_tab == 'Apple' ? 'active' : '', 'tab-apple']"
>
Apple
</div>
What this code is basically doing is, :class makes class a computed property. Then the commas in the array divide the statement. So, the computation will always add tab and tab-apple classes. But, only if active_tab == 'Apple' then ? add 'active' else : add ''
Not sure which CSS framework you are using, but normally I hook into the events thrown by the tab switching (many CSS frameworks provide this access). Once hooked into it, you can write a Vue custom directive that will take that event and use it to update a VM attribute that indicates which tab is active.
Then you can use normal mustache templating to get it into your template:
<div class="title">{{ active_tab }}</div>
What happened: I have a page where user has to click on a button and selection is displayed in modal. When they clicked on what ever they wanted div element on the page is updated, via AJAX, which shows what they have selected and has an option "view item".
I have defined that "view item" should open up another modal view which will have all the information on the item, and now, referring to the above paragraph, rather then opening modal view user is being transferred to that page?
Question:
Is their a walk around for modal to be activated on the elements that were loaded after document load stage?
Example code: On initial load user is presented with following code, at this example item was set prior to load:
<div id="dynamic-area">
Item 1
view selection
</div>
<input type="radio" name="selection" id="selection" value="" data-toggle="modal" data-remote="/selection/search/1" />Change selection
When user have picked a different item after clicking on "change selection" #dynamic-area was fully updated with a data that was fetched via AJAX on the selected item.
So lets say, if user have picked item 3, we would have code below:
<div id="dynamic-area">
Item 3
view selection
</div>
<input type="radio" name="selection" id="selection" value="" data-toggle="modal" data-remote="/selection/search/1" />Change selection
Now if user to click on the "view selection", user is being to the page 'selection/view/3' when user should see modal.
After extending this function action worked as it should