ComboBoxExample.html
<div *ngIf="model">
<wm-window [model]="model" id="ComboBox" class="ComboBoxDocumentation_Form1">
<ng-template let-model>
<div class="ComboBox">
<wm-combobox #comboBox1 id="comboBox1" [model]="model.comboBox1" class="comboBox1" tabindex="1"
(SelectedIndexChanged)="combobox_SelectedIndexChanged()"
(SelectionChangeCommitted)="combobox_SelectionChangeCommitted()"
(SelectedValueChanged)="combobox_SelectedValueChanged()"
(DropDown)="combobox_DropDown()"
(DropDownClosed)="combobox_DropDownClosed()"
(GotFocus)="combobox_GotFocus()"
(LostFocus)="combobox_LostFocus()"
></wm-combobox>
<wm-label #label1 id="label1" [model]="model.label1" class="label1" tabindex="35">Configuration</wm-label>
<wm-label #label2 id="label2" [model]="model.label2" class="label2" tabindex="36">Appearance</wm-label>
<wm-button #button1 id="button1" [model]="model.button1" class="button1" tabindex="37"></wm-button>
<wm-button #button2 id="button2" [model]="model.button2" class="button2" tabindex="38"></wm-button>
<wm-button #button3 id="button3" [model]="model.button3" class="button3" tabindex="39"></wm-button>
<wm-button #button4 id="button4" [model]="model.button4" class="button4" tabindex="40"></wm-button>
<wm-label #label3 id="label3" [model]="model.label3" class="label3" tabindex="41">Configuration</wm-label>
<wm-label #label5 id="label5" [model]="model.label5" class="label5" tabindex="42">Add Item</wm-label>
<wm-label #label8 id="label8" [model]="model.label8" class="label8" tabindex="51">Selected Index</wm-label>
<wm-label #label6 id="label6" [model]="model.label6" class="label6" tabindex="43">Text</wm-label>
<wm-textbox #textBox1 id="textBox1" [model]="model.textBox1" class="textBox1" tabindex="44"></wm-textbox>
<wm-button #button6 id="button6" [model]="model.button6" class="button6" tabindex="47" (Click)="button6_Click()"></wm-button>
<wm-button #button5 id="button5" [model]="model.button5" class="button5" tabindex="2" (Click)="button5_Click()"></wm-button>
<wm-textbox #textBox2 id="textBox2" [model]="model.textBox2" class="textBox2" tabindex="52"></wm-textbox>
</div>
</ng-template>
</wm-window>
</div>
ComboBoxExample.css
@import "../../../../assets/style/live-demos.css";
.ComboBoxDocumentation_Form1 {
left: -1px;
top: -1px;
}
.ComboBoxDocumentation_Form1 .ComboBox {
width: 920px;
height: 316px;
overflow: hidden;
}
.ComboBoxDocumentation_Form1 .comboBox1 {
left: 54px;
top: 127px;
width: 173px;
height: 23px;
position: absolute;
}
.ComboBoxDocumentation_Form1 .button1 {
left: 384px;
top: 113px;
width: 75px;
height: 23px;
position: absolute;
padding: 0px 0px 0px 0px;
display: table-cell;
vertical-align: middle;
display: table-cell;
border: 1px solid var(--primary-color-demos);
}
.ComboBoxDocumentation_Form1 .button2 {
left: 465px;
top: 113px;
width: 75px;
height: 23px;
position: absolute;
padding: 0px 0px 0px 0px;
display: table-cell;
vertical-align: middle;
display: table-cell;
border: 1px solid var(--primary-color-demos);
}
.ComboBoxDocumentation_Form1 .button3 {
left: 384px;
top: 142px;
width: 75px;
height: 23px;
position: absolute;
padding: 0px 0px 0px 0px;
display: table-cell;
vertical-align: middle;
display: table-cell;
border: 1px solid var(--primary-color-demos);
}
.ComboBoxDocumentation_Form1 .button4 {
left: 465px;
top: 142px;
width: 75px;
height: 23px;
position: absolute;
padding: 0px 0px 0px 0px;
display: table-cell;
vertical-align: middle;
display: table-cell;
border: 1px solid var(--primary-color-demos);
}
.ComboBoxDocumentation_Form1 .button5 {
left: 244px;
top: 128px;
width: 86px;
height: 23px;
position: absolute;
padding: 0px 0px 0px 0px;
display: table-cell;
vertical-align: middle;
display: table-cell;
border: 1px solid var(--primary-color-demos);
}
.ComboBoxDocumentation_Form1 .button6 {
left: 723px;
top: 140px;
width: 100px;
height: 23px;
position: absolute;
padding: 0px 0px 0px 0px;
display: table-cell;
vertical-align: middle;
display: table-cell;
border: 1px solid var(--primary-color-demos);
}
.ComboBoxDocumentation_Form1 .label1 {
width: auto;
font-size: 14.25pt;
left: 522px;
top: 11px;
height: auto;
position: absolute;
white-space: nowrap;
overflow: hidden;
}
.ComboBoxDocumentation_Form1 .label2 {
width: auto;
font-size: 12pt;
left: 415px;
top: 66px;
height: auto;
position: absolute;
white-space: nowrap;
overflow: hidden;
}
.ComboBoxDocumentation_Form1 .label3 {
width: auto;
font-size: 14.25pt;
left: 54px;
top: 81px;
height: auto;
position: absolute;
white-space: nowrap;
overflow: hidden;
}
.ComboBoxDocumentation_Form1 .label5 {
width: auto;
font-size: 12pt;
left: 736px;
top: 86px;
height: auto;
position: absolute;
white-space: nowrap;
overflow: hidden;
}
.ComboBoxDocumentation_Form1 .label6 {
width: auto;
font-size: 10pt;
left: 640px;
top: 106px;
height: auto;
position: absolute;
white-space: nowrap;
overflow: hidden;
}
.ComboBoxDocumentation_Form1 .label8 {
width: auto;
font-size: 9pt;
left: 54px;
top: 170px;
height: auto;
position: absolute;
white-space: nowrap;
overflow: hidden;
}
.ComboBoxDocumentation_Form1 .textBox1 {
left: 690px;
top: 104px;
width: 173px;
height: 23px;
position: absolute;
border-color: black;
}
.ComboBoxDocumentation_Form1 .textBox2 {
left: 384px;
top: 175px;
max-width: 230px;
max-height: 130px;
height: 130px;
min-width: 230px;
min-height: 25px;
position: absolute;
border-color: black;
}