Hi I've got a list and the selectedIndex doesn't seem to have any effect. Is the alternatingItemColors causing a problem?
I've got a panel with this list and a few radio buttons. I've set the defaults on the radio buttons, but I'm having problems setting 2010 as the default selection in the list.
<mx:List
id="myList"
width="120"
height="80"
alternatingItemColors="[0xFFFFFF, 0xEEEEEE]"
selectedIndex="0">
<mx:dataProvider>
<mx:Object label="2010" data="myData1" />
<mx:Object label="2009" data="myData2" />
<mx:Object label="2008" data="myData3" />
</mx:dataProvider>
<mx:List>
I also tried adding: creationComplete="myList.selectedIndex=0", but that didn't work, either.
Any suggestions? Thank you.
-Laxmidi
Okay, I fiured it out. I was setting the selectedIndex in the component correctly. But, I had another function acting on the instance, which was causing the problem.
Thank you
-Laxmidi
Related
I'm not sure why but when I try to set medium size (by passing "medium" alongside the other params in className) for icons, I get "unknown symbol" sign. I use semantic with react. It happens to whatever icon.
I use:
react: 16.6.3,
semantic-ui-css: 2.4.1,
semantic-ui-react: 0.83.0
From what I understand in your question, I think you wrote it like this:
<Icon name='users' className='medium' /> which is wrong.
The correct way is:
<Icon name='users' size='large'/>
Also, there's no 'medium'. The values are:
'mini', 'tiny', 'small', 'large', 'big', 'huge', and 'massive'
You can see its props here: https://react.semantic-ui.com/elements/icon/
Syntax for middle is size='mid'
I'm using ion-select component in a form, but got a problem: if users selects one option, but then wanna remove it, it doesn't give the option. I could add a <ion-option> with blank value, but think it wouldn't be nice. Is there a better way to solve that?
EDIT:
This is how my select options looks right now:
If the users selects one option and then changes his mind and don't wanna select any option, it doesn't seems pretty clear the way he can do that. Even if add a "Remove Option" with blank value, it still looks like an option, doesn't seems nice to me. With a traditional select, the blank option without a text seems pretty intuitive. But in this case, I was thinking in something like a " (X) Remove selected", near to "Cancelar/Confirmar" options in the footer, or something like that. Any ideas?
Ps: also, ion-option seems to strip any html tag I put on my option, so it keeps pretty tough to format my "select none" option
#sonu's solution will work if the user wants to click on the ion-select again and chose a select-nothing option, but I don't find that a pleasant experience.
An alternative way to get to what you want is to use a small clear button next to your ion-select, which appears only when user has already selected something:
<ion-label>Options</ion-label>
<ion-select [(ngModel)]="option">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
<div *ngIf="option=='m' || option=='f'">
<ion-label> {{option}} </ion-label>
<ion-button (click)='removeSelection()'>
<ion-icon name='close'></ion-icon>
</ion-button>
</div>
Where removeSelection() is a function that changes the selection to "No selection", perhaps by setting this.option=null.
Of course, you can style this button as you wish. You may also want to look at ionic chips. In particular, delete chips are one way to implement your intention.
To trigger a function that handles the cancel selection you can just use the ionCancel attribute like this
<ion-select okText="Select" cancelText="Clear"formControlName="selectionValue" (ionCancel)="clearSelection()">
<ion-option *ngFor="let selection of selections" [value]="selection.value">{{selection.description}}</ion-option>
</ion-select>
And in the code just implement the function you declared; in this case clearSelection()
clearSelection() {
this.myModel.selectedValue = null;
}
Now every time you press the clear button your function will be triggered
Documentation: ion-select
I had a slight different requirement - after selecting an option and clicking on OK button, the selected value should be used in function called by ionChange and then selected option in ion-select should get deselected. I tried various solutions mentioned in various sites but none worked. Even the working solution in plunker http://embed.plnkr.co/2KVqL2ecColaXgzAfxWI?p=preview where the ngModel value is set to null didn't work for me.
So I tried myself different things and one them did the trick. Below is the way that worked for me:-
In HTML I have used #languageSelect as template reference variable for ViewChild in ion-select
<ion-label>Select Language</ion-label>
<ion-select #languageSelect (ionChange)="langSelected($event)">
<ion-option *ngFor="let lang of languages" [value]="lang">{{lang}}</ion-option>
</ion-select>
And in ts file it is used as
#ViewChild('languageSelect') languageSelect: Select;
In langSelected() it is cleared after doing the needful.
langSelected(value) {
//used the value as required
...
...
this.languageSelect.setValue(''); // This is clearing the selected option in ion-select
}
It's better way to have option with blank value.You can use code as per ionic docs
example:
<ion-label>Gender</ion-label>
<ion-select [(ngModel)]="gender">
<ion-option value="">Select Gender</ion-option>
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
Or you can add any event for selection clear.
I have below code to iterate over the list to get the radio button populate:
<s:iterator value="custData.custList" id="custNameDetail">
<li>
<s:radio name="custname" list="#{'':custName}" ></s:radio><s:property value="DescriptioMess"/>
</li>
</s:iterator>
Its working perfectly but I want to disable the first radio button. How can I iterate through list to get the specific ids and disable the first radio button?
I am getting below as the output while running the above code for all elements:
<input type="radio" name= "custname" id="custname" checked="checked" value>
I think the problem lies here. I should get the different ids for all and then only I can add disabled="disabled" for the first id.
Please let me know if you guys have come across this issue and you have any suggestions.
Thanks for all your help.
Wasn't working with JSPs for few years but isn't the syntax for variables ${variable}? Like ="${someStruct.id}"?
Posting your Java code may help to put specific answer...
What you can do is add a status variable that will give you information about the loop iteration you are on.
So you can do something like this
<s:iterator value="custData.custList" id="custNameDetail" status="loopStatus">
<li>
<s:if test="#loopStatus.first == true"> //make it disabled
<s:radio name="custname" list="#{'':custName}" ></s:radio><s:property value="DescriptioMess"/>
</s:if>
<s:else>
<s:radio name="custname" list="#{'':custName}" ></s:radio><s:property value="DescriptioMess"/>
</s:else>
</li>
</s:iterator>
See here for more information.
I have a selectOneMenu item with some products. Some of them are unavailable so after you click on it the button "Add" should be disabled and some message should appear that "Sorry the product you chose is currently unavailable". I have no idea how to achieve that. Tried listeners, ajax and still nothing.
This is one of many versions of my JSF Page:
<h:form>
<h:selectOneMenu value="#{productBean.productName}">
<f:selectItems id ="other" value="#{productBean.other}" var="other" itemValue="#{ordersBean.productName}" itemLabel="#{other.name}" />
<f:ajax listener="#{productBean.valueChanged}" />
</h:selectOneMenu>
<h:commandButton value ="Dodaj do zamówienia" rendered="#{productBean.available}"/>
<h:outputLabel id="orderSummary"/>
</h:form>
Beans are rather standard. I just need a clue how to do that and probably I will be able to do it myself.
Thanks in advance.
Here's one of the ways:
In your AJAX listener you could check if a product is available and set up bean field accordingly, or add a message for a component.
Introduce a component in your view that'll hold the message to the user, for example with the #{bean.available ? '' : 'Sorry, out of stock'} value, or enclose it within a <h:panelGroup> and let that component have a rendered attribute, or attach <h:message>/<h:messages> somewhere in your view.
Specify id of the message holder to be rendered within render attribute of <f:ajax> tag.
I'm having an issue with a bit XSLT code I'm working with for a client. I cannot change the schema, as a flash application depends on it and making any changes would break the ActionScript. It's unfortunate.
This is my first foray into XSLT and I'm admittedly incompetant with it, so I was hoping the community could help me out.
This is the schema (XML file):
<statement title="Click on your Answer" answer="true">
True or False: The question asked is here.
<feedback>
<answerTrue sound="">
The response if the user answered true is here.
</answerTrue>
<answerFalse sound="">
The response if the user answered false is here
</answerFalse>
</feedback>
</statement>
When I try to access the "statement" like this (XSLT):
<div id="statement">
<xsl:value-of select="statement" />
</div>
It displays the "answerTrue" and "answerFalse" nodes along with it. I would like to only display the text "True or False: The ques...". If anyone knows of a tag I can use to display the statement without displaying the child elements, I'd be eternally grateful! Thanks!
Use:
normalize-space(/statement/text()[1])