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.
I am using a bel which will have to display the string which is a combination of string and url.
For example:
Refer to this: https://www.google.com/ or https://www.google.com/ watch this.
I need to display entire string in the same label but the URL should be underlined.
How to do that.
use FormattedText
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="First " />
<Span TextDecorations="Underline" Text="http://www.google.com" />
<Span Text=" Third" />
</FormattedString>
</Label.FormattedText>
</Label>
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"
I have several command on my appbar. I want to align two of them to the left. How would I do it?
I am using Html5/JS
Basically How do you do this in HTML5/JS?
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click"/>
<Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="Button_Click"/>
<Button Style="{StaticResource AddAppBarButtonStyle}" Click="Button_Click"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Style="{StaticResource RefreshAppBarButtonStyle}" Click="Button_Click"/>
<Button Style="{StaticResource HelpAppBarButtonStyle}" Click="Button_Click"/>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>
See the example's below, section:'global' will align the element to right and section:'selection' will align the element to the left.
To align button to the right
<button id="mybutton2"
data-win-control=
"WinJS.UI.AppBarCommand"
data-win-options="{label:'Delete',
icon:'delete',
section:'global',
tooltip:'Delete item'}">
</button>
To align button's to the left
<button id="mybutton3"
data-win-control=
"WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdCamera',
label:'Camera',
icon:'camera',
section:'selection',
tooltip:'Take a picture'}">
</button>
Sincel global is deprecated, I could not figure out how to align command buttons from left to right. The only solution I found is, add extra buttons and remove their label and icon.
I know this is ugly but had to find a work around and this is the one I had to choose.
<div class="toolbar" data-win-control="WinJS.UI.ToolBar">
<!-- Primary commands -->
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdMentions',
label:'Mentions',
type:'button',
icon: 'accounts'
}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdBlocked',
label:'Blocked Accounts',
type:'button',
icon: 'blockcontact'
}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdConfig',
label:'Configuration',
icon: 'edit'
}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdConfig1'
}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdConfig2'
}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdConfig3'
}"></button>
<button data-win-control="WinJS.UI.Command" data-win-options="{
id:'cmdConfig4'
}"></button>
</div>
Just setting it via CSS works fine.
HTML:
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdEdit',label:'Edit',icon:'edit'}"></button>
CSS:
#cmdEdit{
position:absolute;
left:50px;
}
Here is a great sample from CodeShow. This works perfectly.
<button
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdAdd',label:'Add',icon:'add', section:'global',tooltip:'Add item'}"></button>
<button
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove', section:'global',tooltip:'Remove item'}"
onclick="appbar2.remove()"></button>
<hr />
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{type:'separator',section:'global'}" />
<button
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete', section:'global',tooltip:'Delete item'}"></button>
<button
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera', section:'selection',tooltip:'Take a picture'}"></button>
I'm working on creating an XUL app right now and I'm stuck with a few problems at this point. My current file is here: http://projects.thecloudonline.net/gemxul/regrid.xul.
I want that second column to essentially "float: right" (like how CSS works on webpages). The red background shows me that part moved, but my content is stuck oriented left. How can I make the content go along with it?
Secondly, my overall goal is to get it so that the layout is essentially split in half. Setting maxwidth="50%" on the first column doesn't seem to do anything. Is that the correct approach, or am I way off there?
That's all for now!
This should work :
<grid style="border: #000000 solid 1px;">
<columns>
<column style="border-right: #666666 solid 1px;"/>
<column flex="1"/>
<column style="background-color:red;"/>
</columns>
<rows>
<row>
<vbox>
<label value="Launcher 1" id="l1_title"/>
<button label="button" id="l1_btn" />
<label value="This is a description for item 1." id="l1_desc"/>
</vbox>
<spacer/>
<vbox>
<label value="Launcher 2" id="l2_title"/>
<button label="button" id="l2_btn"/>
<label value="This is a description for item 2." id="l2_desc"/>
</vbox>
</row>
<row style="border-top: #666666 solid 1px;">
<vbox>
<label value="Launcher 3" id="l3_title"/>
<button label="button" id="l3_btn"/>
<label value="This is a description for item 3." id="l3_desc"/>
</vbox>
<spacer/>
<vbox>
<label value="Launcher 4" id="l4_title"/>
<button label="button" id="l4_btn"/>
<label value="This is a description for item 4." id="l4_desc"/>
</vbox>
</row>
</rows>
</grid>
There are several ways of doing this. Personally I wouldn't use grid for something like this. vbox and hbox in combination beats anything you would normally do in tables. But of course it depends entirely what your end goal is.