For example, if I want this HTML to be repeated for every element, where H4 and p tags should be filled with info from the object, is it possible?
I've seen only implementations with a table.
<div class="single-menu">
<div class="myContainer">
<button id="decrement" onclick="stepper(this)">-</button>
<input
type="number"
min="0"
max="100"
step="1"
value="0"
id="my-input"
readonly
/>
<button id="increment" onclick="stepper(this)">+</button>
</div>
<img src="https://via.placeholder.com/150" alt="" />
<div class="menu-content">
<h4>chicken fried salad <span>$45</span></h4>
<p>
Aperiam tempore sit,perferendis numquam repudiandae porro
voluptate dicta saepe facilis.
</p>
</div>
</div>
Related
I want to do this but can't find any documentation about how to render components inside components
<x-accordion>
<x-accordion-tab />
<x-accordion-tab />
<x-accordion-tab />
<x-accordion-tab />
<x-accordion-tab />
</x-accordion>
Accordion
<div class="accordion-tabs">
</div>
Accordion Tab
<div class="accordion-tab">
<input type="checkbox" id="chck1" class="accordion-nav">
<label class="accordion-tab-label" for="chck1">Item 1</label>
<div class="accordion-tab-content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!
</div>
</div>
It's blade#slots
<div class="accordion-tabs">
{{ $slot }}
</div>
This is not really a Serenity question but close to Selenium.
When the test run it checks the checkbox, visible on the page and the functionality expects underlying options to be visible once the checkbox is checked.
However, the test run does check the checkbox, however, the underlying options remain invisible.
When I put a breakpoint on it and do it manually, it does work perfectly, as expected.
Also, interestingly, if the automation script checks the checkbox and I again uncheck the checkbox using the script debugger, the underlying option becomes visible with checkbox unchecked - weird, isn't it?
What could be the possible reason?
Any help would be appreciated.
Code Block:
Case.chkbxNewPolicy.click(); //Here it selects the checkbox
Case.selectEntityType.selectByVisibleText(param.get("CaseType").toString()); //Here it is expected to enable the underlying objects
Case.editNewPolicyNum.type(param.get("PolicyNo").toString());
Case.editAdviserId.type(param.get("AdviserId").toString());
//HTML
</div>
<div id="createNewContainer" G360ComponentSpec="type:AdjustableContainer;fs:f;dc:f;cl:f;ic:f;" G360LayoutSpec="l:4;lip:t;lif:f;t:28;tip:t;tif:f;r:142;riw:t;rip:t;rif:f;ra:+-;b:23;bih:t;bip:t;bif:f;ba:+-;o:auto;lbpx:4;tbpx:28;wbpx:142;hbpx:23;efwpx:0;"
style="position:absolute; left:4px; top:28px; width:142px; height:23px; overflow:auto;">
<div id="component_25" G360ComponentSpec="type:FieldComponent;dt:1;format:input;fh:CheckBox;" G360LayoutSpec="l:0;lip:t;lif:f;t:2;tip:t;tif:f;r:135;riw:t;rip:t;rif:t;ra:+-;b:20;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:0;tbpx:2;wbpx:135;hbpx:20;efwpx:0;"
style="position:absolute; left:0px; top:2px; width:135px; height:20px; overflow:hidden;"><span class="fielderror" id="IS_NEWPOLICYerror"></span>
<input name="IS_NEWPOLICY" id="IS_NEWPOLICY" type="checkbox" value="true" onclick="displayPolicyEntry(this)" onchange="setDirtyFlag(true,this);">Create New Policy
<input type="hidden" name="IS_NEWPOLICYoriginal" id="IS_NEWPOLICYoriginal" value="false" />
<input type="hidden" name="IS_NEWPOLICYsemaphore" id="IS_NEWPOLICYsemaphore" value="write" />
<input type="hidden" name="IS_NEWPOLICYformatter" id="IS_NEWPOLICYformatter" value="Check Box:label=Create New Policy" />
</div>
</div>
<div id="SELECT_POLICY_DETAILS" G360ComponentSpec="type:AdjustableContainer;fs:f;dc:f;cl:f;ic:f;" G360LayoutSpec="l:9;lip:t;lif:f;t:50;tip:t;tif:f;r:762;riw:t;rip:t;rif:f;ra:+-;b:62;bih:t;bip:t;bif:f;ba:+-;o:auto;lbpx:9;tbpx:50;wbpx:762;hbpx:62;efwpx:0;"
style="position:absolute; left:9px; top:50px; width:762px; height:62px; overflow:auto;">
<div id="component_18" G360ComponentSpec="type:HtmlTextComponent;" G360LayoutSpec="l:25;lip:t;lif:f;t:5;tip:t;tif:f;r:94;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:25;tbpx:5;wbpx:94;hbpx:16;efwpx:0;" style="background-color:#E6E6E6; position:absolute; left:25px; top:5px; width:94px; height:16px; overflow:hidden;">
<label for="">Policy Number</label>
</div>
<div id="component_19" G360ComponentSpec="type:HtmlTextComponent;" G360LayoutSpec="l:260;lip:t;lif:f;t:5;tip:t;tif:f;r:75;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:260;tbpx:5;wbpx:75;hbpx:16;efwpx:0;" style="background-color:#E6E6E6; position:absolute; left:260px; top:5px; width:75px; height:16px; overflow:hidden;">
<label for="">Adviser ID</label>
</div>
<div id="component_20" G360ComponentSpec="type:HtmlTextComponent;" G360LayoutSpec="l:350;lip:t;lif:f;t:5;tip:t;tif:f;r:90;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:350;tbpx:5;wbpx:90;hbpx:16;efwpx:0;" style="background-color:#E6E6E6; position:absolute; left:350px; top:5px; width:90px; height:16px; overflow:hidden;">
<label for="">Adviser Name</label>
</div>
<div id="component_107" G360ComponentSpec="type:HtmlTextComponent;" G360LayoutSpec="l:474;lip:t;lif:f;t:5;tip:t;tif:f;r:70;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:474;tbpx:5;wbpx:70;hbpx:16;efwpx:0;" style="background-color:#E6E6E6; position:absolute; left:474px; top:5px; width:70px; height:16px; overflow:hidden;">
<label for="">Partner ID</label>
</div>
<div id="component_41" G360ComponentSpec="type:HtmlTextComponent;" G360LayoutSpec="l:565;lip:t;lif:f;t:5;tip:t;tif:f;r:80;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:565;tbpx:5;wbpx:80;hbpx:16;efwpx:0;" style="background-color:#E6E6E6; position:absolute; left:565px; top:5px; width:80px; height:16px; overflow:hidden;">
<label for="">MP Number</label>
</div>
<div id="component_42" G360ComponentSpec="type:HtmlTextComponent;" G360LayoutSpec="l:654;lip:t;lif:f;t:5;tip:t;tif:f;r:102;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:654;tbpx:5;wbpx:102;hbpx:16;efwpx:1;" style="background-color:#E6E6E6; position:absolute; left:654px; top:5px; width:102px; height:16px; overflow:hidden;">
<label for="">Fund Member ID</label>
</div>
<div id="container_18" G360ComponentSpec="type:XmlNodeContainer;fs:f;dc:f;cl:f;ic:f;" G360LayoutSpec="l:4;lip:t;lif:f;t:22;tip:t;tif:f;r:753;riw:t;rip:t;rif:f;ra:+-;b:33;bih:t;bip:t;bif:f;ba:+-;o:auto;lbpx:4;tbpx:22;wbpx:753;hbpx:33;efwpx:0;" style="position:absolute; left:4px; top:22px; width:753px; height:33px; overflow:auto;">
</div>
</div>
<div id="NEW_POLICY_DETAILS" G360ComponentSpec="type:AdjustableContainer;fs:f;dc:f;cl:f;ic:f;" G360LayoutSpec="l:4;lip:t;lif:f;t:53;tip:t;tif:f;r:732;riw:t;rip:t;rif:f;ra:+-;b:59;bih:t;bip:t;bif:f;ba:+-;o:auto;lbpx:4;tbpx:53;wbpx:732;hbpx:59;efwpx:35;"
style="position:absolute; left:4px; top:53px; width:732px; height:59px; overflow:auto;">
<div id="component_51" G360ComponentSpec="type:FieldNameComponent;" G360LayoutSpec="l:2;lip:t;lif:t;t:9;tip:t;tif:t;r:72;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:2;tbpx:9;wbpx:72;hbpx:16;efwpx:46;" style="padding:1px; position:absolute; left:2px; top:9px; width:72px; height:16px; overflow:hidden;">
<label for="ENTITY_TYPE" style="margin-left:1px;margin-right:1px;">Entity Type</label>
</div>
<div id="component_23" G360ComponentSpec="type:FieldNameComponent;" G360LayoutSpec="l:122;lip:t;lif:t;t:9;tip:t;tif:t;r:93;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:122;tbpx:9;wbpx:93;hbpx:16;efwpx:109;" style="padding:1px; position:absolute; left:122px; top:9px; width:93px; height:16px; overflow:hidden;">
<label for="POLICY_NUM" style="margin-left:1px;margin-right:1px;">Policy Number</label>
</div>
<div id="component_21" G360ComponentSpec="type:FieldNameComponent;" G360LayoutSpec="l:327;lip:t;lif:t;t:9;tip:t;tif:t;r:68;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:327;tbpx:9;wbpx:68;hbpx:16;efwpx:24;" style="padding:1px; position:absolute; left:327px; top:9px; width:68px; height:16px; overflow:hidden;">
<label for="ADVISER_ID" style="margin-left:1px;margin-right:1px;">Adviser ID</label>
</div>
<div id="component_101" G360ComponentSpec="type:FieldNameComponent;" G360LayoutSpec="l:424;lip:t;lif:f;t:9;tip:t;tif:f;r:68;riw:t;rip:t;rif:t;ra:+-;b:17;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:424;tbpx:9;wbpx:68;hbpx:17;efwpx:116;" style="padding:1px; position:absolute; left:424px; top:9px; width:68px; height:17px; overflow:hidden;">
<label for="PARTNER_ID" style="margin-left:1px;margin-right:1px;">Partner ID</label>
</div>
<div id="component_53" G360ComponentSpec="type:FieldNameComponent;" G360LayoutSpec="l:426;lip:t;lif:t;t:9;tip:t;tif:t;r:173;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:426;tbpx:9;wbpx:173;hbpx:16;efwpx:9;" style="padding:1px; position:absolute; left:426px; top:9px; width:173px; height:16px; overflow:hidden;">
<label for="FUND_ID" style="margin-left:1px;margin-right:1px;">MP Number</label>
</div>
<div id="component_55" G360ComponentSpec="type:FieldNameComponent;" G360LayoutSpec="l:618;lip:t;lif:t;t:9;tip:t;tif:t;r:102;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:618;tbpx:9;wbpx:102;hbpx:16;efwpx:11;" style="padding:1px; position:absolute; left:618px; top:9px; width:102px; height:16px; overflow:hidden;">
<label for="FUND_MEMBER_ID" style="margin-left:1px;margin-right:1px;">Fund Member ID</label>
</div>
<div id="component_102" G360ComponentSpec="type:FieldComponent;dt:4;format:input;fh:none;" G360LayoutSpec="l:426;lip:t;lif:f;t:29;tip:t;tif:f;r:94;riw:t;rip:t;rif:t;ra:+-;b:22;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:426;tbpx:29;wbpx:94;hbpx:22;efwpx:88;"
style="position:absolute; left:426px; top:29px; width:94px; height:22px; overflow:hidden;">
<table width="100%" cellspacing="0px" cellpadding="0px">
<colgroup>
<col width="*" />
<col width="18px" />
</colgroup>
<tr>
<td>
<input type="text" value="" name="PARTNER_ID" id="PARTNER_ID" style="width:70px;height:15px;" onchange="TextValidate(this,null,128,null);" />
<input type="hidden" name="PARTNER_IDsemaphore" id="PARTNER_IDsemaphore" value="write" />
<input type="hidden" name="PARTNER_IDformatter" id="PARTNER_IDformatter" value="none" />
</td>
<td>
<div class="anchorNoLink" style="width:18px;position:relative;top:1px;">
<a id="PARTNER_IDerrora" href="javascript:alert('');" style="display:none;">
<img id="PARTNER_IDerrorimg" src="Images/fielderror.gif" alt="" title="" />
</a>
</div>
</td>
</tr>
</table>
</div>
<div id="component_52" G360ComponentSpec="type:FieldComponent;dt:4;format:input;fh:none;" G360LayoutSpec="l:3;lip:t;lif:t;t:30;tip:t;tif:t;r:117;riw:t;rip:t;rif:t;ra:+-;b:22;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:3;tbpx:30;wbpx:117;hbpx:22;efwpx:0;" style="position:absolute; left:3px; top:30px; width:117px; height:22px; overflow:hidden;">
<table width="100%" cellspacing="0px" cellpadding="0px">
<colgroup>
<col width="*" />
<col width="18px" />
</colgroup>
<tr>
<td>
<select name="ENTITY_TYPE" id="ENTITY_TYPE" style="width:99px;" tabindex="1" onchange="setDirtyFlag(true,this);policyTypeSelected();">
<option selected value="NA">--Please Select --</option>
<option value="C">Retail Life Insured</option>
<option value="M">Group Life Insured</option>
<option value="A">Adviser</option>
<option value="F">Fund</option>
<option value="P">Partner</option>
<option value="S">Special Member</option>
<option value="U">Function</option>
</select>
<input type="hidden" name="ENTITY_TYPEoriginal" id="ENTITY_TYPEoriginal" value="TkE*" />
<input type="hidden" name="ENTITY_TYPEsemaphore" id="ENTITY_TYPEsemaphore" value="write" />
<input type="hidden" name="ENTITY_TYPEformatter" id="ENTITY_TYPEformatter" value="none" />
</td>
<td>
<div class="anchorNoLink" style="width:18px;position:relative;top:1px;">
<a id="ENTITY_TYPEerrora" href="javascript:alert('');" style="display:none;">
<img id="ENTITY_TYPEerrorimg" src="Images/fielderror.gif" alt="" title="" />
</a>
</div>
</td>
</tr>
</table>
</div>
<div id="component_24" G360ComponentSpec="type:FieldComponent;dt:4;format:input;fh:none;" G360LayoutSpec="l:124;lip:t;lif:t;t:30;tip:t;tif:t;r:200;riw:t;rip:t;rif:t;ra:+-;b:22;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:124;tbpx:30;wbpx:200;hbpx:22;efwpx:0;"
style="position:absolute; left:124px; top:30px; width:200px; height:22px; overflow:hidden;">
<table width="100%" cellspacing="0px" cellpadding="0px">
<colgroup>
<col width="*" />
<col width="18px" />
</colgroup>
<tr>
<td>
<input type="text" value="" name="POLICY_NUM" id="POLICY_NUM" style="width:176px;height:15px;" tabindex="2" maxlength="30" onchange="TextValidate(this,null,30,null);" />
<input type="hidden" name="POLICY_NUMsemaphore" id="POLICY_NUMsemaphore" value="write" />
<input type="hidden" name="POLICY_NUMformatter" id="POLICY_NUMformatter" value="none" />
</td>
<td>
<div class="anchorNoLink" style="width:18px;position:relative;top:1px;">
<a id="POLICY_NUMerrora" href="javascript:alert('');" style="display:none;">
<img id="POLICY_NUMerrorimg" src="Images/fielderror.gif" alt="" title="" />
</a>
</div>
</td>
</tr>
</table>
</div>
<div id="component_22" G360ComponentSpec="type:FieldComponent;dt:4;format:input;fh:none;" G360LayoutSpec="l:329;lip:t;lif:t;t:30;tip:t;tif:t;r:90;riw:t;rip:t;rif:t;ra:+-;b:22;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:329;tbpx:30;wbpx:90;hbpx:22;efwpx:0;"
style="position:absolute; left:329px; top:30px; width:90px; height:22px; overflow:hidden;">
<table width="100%" cellspacing="0px" cellpadding="0px">
<colgroup>
<col width="*" />
<col width="18px" />
</colgroup>
<tr>
<td>
<input type="text" value="" name="ADVISER_ID" id="ADVISER_ID" style="width:66px;height:15px;" tabindex="3" maxlength="9" onchange="TextValidate(this,null,9,null);" />
<input type="hidden" name="ADVISER_IDsemaphore" id="ADVISER_IDsemaphore" value="write" />
<input type="hidden" name="ADVISER_IDformatter" id="ADVISER_IDformatter" value="none" />
</td>
<td>
<div class="anchorNoLink" style="width:18px;position:relative;top:1px;">
<a id="ADVISER_IDerrora" href="javascript:alert('');" style="display:none;">
<img id="ADVISER_IDerrorimg" src="Images/fielderror.gif" alt="" title="" />
</a>
</div>
</td>
</tr>
</table>
</div>
<div id="component_54" G360ComponentSpec="type:FieldComponent;dt:4;format:input;fh:none;" G360LayoutSpec="l:428;lip:t;lif:t;t:30;tip:t;tif:t;r:180;riw:t;rip:t;rif:t;ra:+-;b:22;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:428;tbpx:30;wbpx:180;hbpx:22;efwpx:0;"
style="position:absolute; left:428px; top:30px; width:180px; height:22px; overflow:hidden;">
<table width="100%" cellspacing="0px" cellpadding="0px">
<colgroup>
<col width="*" />
<col width="18px" />
</colgroup>
<tr>
<td>
<input type="text" value="" name="FUND_ID" id="FUND_ID" style="width:156px;height:15px;" tabindex="4" maxlength="8" onchange="TextValidate(this,null,8,null);" />
<input type="hidden" name="FUND_IDsemaphore" id="FUND_IDsemaphore" value="write" />
<input type="hidden" name="FUND_IDformatter" id="FUND_IDformatter" value="none" />
</td>
<td>
<div class="anchorNoLink" style="width:18px;position:relative;top:1px;">
<a id="FUND_IDerrora" href="javascript:alert('');" style="display:none;">
<img id="FUND_IDerrorimg" src="Images/fielderror.gif" alt="" title="" />
</a>
</div>
</td>
</tr>
</table>
</div>
<div id="component_56" G360ComponentSpec="type:FieldComponent;dt:4;format:input;fh:none;" G360LayoutSpec="l:617;lip:t;lif:t;t:30;tip:t;tif:t;r:114;riw:t;rip:t;rif:t;ra:+-;b:22;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:617;tbpx:30;wbpx:114;hbpx:22;efwpx:0;"
style="position:absolute; left:617px; top:30px; width:114px; height:22px; overflow:hidden;">
<table width="100%" cellspacing="0px" cellpadding="0px">
<colgroup>
<col width="*" />
<col width="18px" />
</colgroup>
<tr>
<td>
<input type="text" value="" name="FUND_MEMBER_ID" id="FUND_MEMBER_ID" style="width:90px;height:15px;" tabindex="5" maxlength="60" onchange="TextValidate(this,null,60,null);" />
<input type="hidden" name="FUND_MEMBER_IDsemaphore" id="FUND_MEMBER_IDsemaphore" value="write" />
<input type="hidden" name="FUND_MEMBER_IDformatter" id="FUND_MEMBER_IDformatter" value="none" />
</td>
<td>
<div class="anchorNoLink" style="width:18px;position:relative;top:1px;">
<a id="FUND_MEMBER_IDerrora" href="javascript:alert('');" style="display:none;">
<img id="FUND_MEMBER_IDerrorimg" src="Images/fielderror.gif" alt="" title="" />
</a>
</div>
</td>
</tr>
</table>
</div>
</div>
Two possible reason, either there are javascript errors while rendering the underlying options which can be viewed on jconsole, or you are not waiting for the underlying options to appear.
I am creating a responsive sharepoint visual webpart.
everything works fine and looks good but my mobile view is pretty much off.
the controls doesn't shrink to the lowest mobile size..
i tried many times but still i have the same issue..
<fieldset class="form-horizontal">
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="textinput">Name:
</label>
<div class="controls col-xs-8 col-md-7">
<asp:TextBox MaxLength="50" runat="server" ID="txtTitle" CssClass="form-control">
</asp:TextBox>
</div>
</div>
<div class="clearfix">
</div>
<!-- Select Basic -->
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="selectbasic">Ano:
</label>
<div class="controls col-xs-8 col-md-2">
<asp:DropDownList runat="server" ID="ddYear" CssClass="form-control">
</asp:DropDownList>
</div>
</div>
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="selectbasic">Mes:
</label>
<div class="controls col-xs-8 col-md-2">
<asp:DropDownList runat="server" ID="ddMonth" CssClass="form-control">
</asp:DropDownList>
</div>
</div>
<div class="clearfix">
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="textinput">Tema de Salud:
</label>
<div class="controls col-xs-8 col-md-7">
<asp:DropDownList runat="server" CssClass="form-control" ID="ddHealthTopic">
</asp:DropDownList>
</div>
</div>
<div class="clearfix">
</div>
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="textinput">Unidad administrativa:(por sus siglas en ingles entre paréntesis)
</label>
<div class="controls col-xs-8 col-md-7">
<asp:DropDownList runat="server" CssClass="form-control" ID="ddOrgUnit">
</asp:DropDownList>
</div>
</div>
</fieldset>
<br />
<div class=" col-xs-10 col-md-10">
<div class="input-group" >
<span class="input-group-btn">
<asp:Button CssClass="btn btn-primary" ToolTip="Buscar" runat="server" ID="btnSubmit" Text="Buscar" OnClick="btnSubmit_Click" />
</span>
</div>
</div>
Your code seems to be fine ....
Try to add (If its no there)
<meta name="viewport" content="width=device-width, initial-scale=1">
head section of your master page
I'm trying to get Angular form validation working in ie8. Here is my code:
<form id="contact-form" name="cform" target="_blank" >
<div class="left">
<div>
<div class="group">
<label for="firstname">First Name <span class="asterisk">*</span></label><br />
<input type="text" name="firstname" id="firstname" data-ng-model="firstname" required />
<span class="error" data-ng-show="cform.input.$error.required">Required!</span>
</div>
<div class="group">
<label for="lastname">Last Name <span class="asterisk">*</span></label><br />
<input type="text" name="lastname" id="lastname" data-ng-model="lastname" required />
<span class="error" data-ng-show="cform.input.$error.required">Required!</span>
</div>
</div>
<div>
<div class="group">
<label for="email">Email Address <span class="asterisk">*</span></label><br />
<input type="email" id="email" name="email" data-ng-model="email" required />
<span class="error" data-ng-show="cform.email.$error.email">Required!</span>
</div>
</div>
<div>
<div class="group">
<label for="phone">Primary Phone Number <span class="asterisk">*</span></label><br />
<input type="text" name="phone" id="phone" data-ng-model="phone" required />
<span class="error" data-ng-show="cform.input.$error.required">Required!</span>
</div>
<div class="group">
<label for="-secondary-phone">Secondary Phone Number</label><br />
<input type="text" name="secondary-phone" id="secondary-phone" />
</div>
</div>
</div>
<div class="right">
<div class="group">
<label for="message">Your Message</label><br />
<textarea id="message"></textarea>
</div><br />
<input type="submit" value="SEND MESSAGE" class="button">
</div>
</form>
This works in Firefox and Chrome, but in IE8 no validation errors are triggered. Anyone know what the issue might be?
Thanks.
UPDATE: This seems to be a problem in all versions of IE. {{cform.input.$error}} and {{cform.input}} don't show output in any browser.
<div class="group">
<label for="firstname">First Name <span class="asterisk">*</span></label><br />
<input type="text" name="firstname" id="firstname" data-ng-model="firstname" ng-required="true" />
<span class="error" data-ng-show="cform.firstname.$error.required && cform.firstname.$dirty">Required!</span>
</div>
Ie 8 does not support html 5 ,Angular is using html 5 , Do the work around to get angular working on IE and then use the pattern because you cant use the html 5 element
Is it possible to have a tree structure with check boxes in JQuery MObile. I did not find any thing in demos.
I wanted something similar this image: Is there any alternative way we can achieve this?
Well it's just a concept but I have a couple working examples:
http://jsfiddle.net/JYn53/2/
http://jsfiddle.net/JYn53/4/
HTML
<div data-role="page">
<div data-role="content">
<div data-role="collapsible" data-collapsed="true">
<h3>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
<label for="checkbox-1a">Cheetos</label>
</h3>
<p>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1aa" id="checkbox-1aa" class="custom" />
<label for="checkbox-1aa">Cheetos</label>
<input type="checkbox" name="checkbox-2aa" id="checkbox-2aa" class="custom" />
<label for="checkbox-2aa">Doritos</label>
<input type="checkbox" name="checkbox-3aa" id="checkbox-3aa" class="custom" />
<label for="checkbox-3aa">Fritos</label>
<input type="checkbox" name="checkbox-4aa" id="checkbox-4aa" class="custom" />
<label for="checkbox-4aa">Sun Chips</label>
</fieldset>
</div>
</p>
</div>
</div>
</div>