Search code examples
twitter-bootstrapzk

ComboBox doesn't show with bootstrap

I'm trying to build a form containing a ComboBox [ZK component] but I can't get it to to show.

here's the code : 

 <h:form class="form form-vb">
    <h:div class="input-group">
        <h:label for="ZipCode">
                Code ZIP :
            </h:label>
            <combobox
              sclass="form-control" 
              width="100%"                  
              id="ZipCode"  
              model="@bind(vm.ZipCodeList)"
              selectedItem="@bind(vm.zipcode)" autodrop="true"
                                            autocomplete="true"
                                            value="@load(ZipCode.name)">
                                            <template name="model">
                                                <comboitem
                                            value="@bind(each.zipcode)" />
                                            </template>
                                        </combobox>             
                                    </h:div>
</h:form>
Solution

  • The problem is the surrounding <html> tag. If you remove it you get the combo.

    <zk xmlns:h="http://www.w3.org/1999/xhtml">
    <style src="css/home/bootstrap.css" />
    <window border="normal" title="hello" apply="pkg$.TestComposer">
        <div>Welcome to ZK Fiddle , run it right now!</div>
        <h:form class="form form-vb">
            <h:div class="input-group">
                <h:label for="ZipCode">
                    Code ZIP :
                </h:label>
                <combobox
                        sclass="form-control" 
                        width="100%"                  
                        id="ZipCode"  
                        model="@bind(vm.ZipCodeList)"
                        selectedItem="@bind(vm.zipcode)" 
                        autodrop="true"
                        autocomplete="true"
                        value="@load(ZipCode.name)">
                    <template name="model">
                        <comboitem value="@bind(each.zipcode)" />
                    </template>
                </combobox>   
            </h:div>
        </h:form>
        <button id="btn" label="Click Me To Evalute Event Binding With Composer"/>
    </window>
</zk>

    Demo: http://zkfiddle.org/sample/af6lv3/1-Another-new-ZK-fiddle