ASP.Net Checkboxes on iPad

Hi,

I have an ASP.Net page with several CheckBoxes (not a CheckBoxList) that I have formatted to have the Check (Input) to the right of the Label using CSS:

.WizardCheckBox input 
{ 
    float:right; 
}
.WizardCheckBox td 
{ 
    padding-left: 20px; 
}

Open in new window


This renders as expected in pretty much all browsers, with the exception of the iPad. The iPad for some reason staggers the Checks as illustrated below.

Desired Layout:
The layout I desire, working in IE, Firefox, Chrome & Safari
Layout on iPad:
The layout i get on an iPad
I have looked at the html produced in each case and it seems that on the iPad none of the <input> tags are closed, which I presume results in some kind of nesting, which could, perhaps, explain this behaviour?

Is this something anyone else has experienced and are there any workarounds you can suggest?

Cheers

Simon
Simon482ManagerAsked:
Who is Participating?
 
Obadiah ChristopherCommented:
Can you show the HTML markup. Is this a table td or a div? Any particular reason why you can't use checkedboxlist?
0
 
Obadiah ChristopherCommented:
Does this help?
.WizardCheckBox input 
{ 
    float:right; 
    position: absolute;
}

Open in new window


Also you can take a look at User Agent Switcher addon for Firefox. Will help you in debugging.
0
 
Simon482ManagerAuthor Commented:
Thank you for the suggestion, but adding 'position: absolute' changes the layout in the browsers where it was previously working:

CheckBoxes no longer line up
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
Simon482ManagerAuthor Commented:
ASP.net:

<p><b>Please confirm that the company will <span style="text-decoration:underline;">NOT</span>:</b>
                    <br />
                    <asp:CheckBox ID="RequiredConfirmationCheckBox1" runat="server" Text="Carry on the business of banking, unless licenced under the BVI Banks and Trust Companies Act" CssClass="WizardCheckBox" />
                    <br />
                    <asp:CheckBox ID="RequiredConfirmationCheckBox2" runat="server" Text="Carry on the business of an insurance or reinsurance company" CssClass="WizardCheckBox" />
                    <br />
                    <asp:CheckBox ID="RequiredConfirmationCheckBox3" runat="server" Text="Provide registered office addresses to other companies" CssClass="WizardCheckBox" />
                    <br />
                    <asp:CheckBox ID="RequiredConfirmationCheckBox4" runat="server" Text="Engage in any business connected with mutual funds, unless licenced to do so under the Mutual Funds Act" CssClass="WizardCheckBox" />
                </p>

Open in new window


As Rendered in IE etc.:

<span class="WizardCheckBox">
<input id="ctl00_MainContent_Wizard1_RequiredConfirmationCheckBox1" type="checkbox" name="ctl00$MainContent$Wizard1$RequiredConfirmationCheckBox1" />
<label for="ctl00_MainContent_Wizard1_RequiredConfirmationCheckBox1">Carry on the business of banking, unless licenced under the BVI Banks and Trust Companies Act</label>
</span>
                    <br />
<span class="WizardCheckBox">
<input id="ctl00_MainContent_Wizard1_RequiredConfirmationCheckBox2" type="checkbox" name="ctl00$MainContent$Wizard1$RequiredConfirmationCheckBox2" />
<label for="ctl00_MainContent_Wizard1_RequiredConfirmationCheckBox2">Carry on the business of an insurance or reinsurance company</label>
</span>
                    <br />
<span class="WizardCheckBox"><input id="ctl00_MainContent_Wizard1_RequiredConfirmationCheckBox3" type="checkbox" name="ctl00$MainContent$Wizard1$RequiredConfirmationCheckBox3" />
<label for="ctl00_MainContent_Wizard1_RequiredConfirmationCheckBox3">Provide registered office addresses to other companies</label>
</span>
                    <br />
<span class="WizardCheckBox">
<input id="ctl00_MainContent_Wizard1_RequiredConfirmationCheckBox4" type="checkbox" name="ctl00$MainContent$Wizard1$RequiredConfirmationCheckBox4" />
<label for="ctl00_MainContent_Wizard1_RequiredConfirmationCheckBox4">Engage in any business connected with mutual funds, unless licenced to do so under the Mutual Funds Act</label>
</span>

Open in new window


As rendered in iPad:

<span class="WizardCheckBox" style="font-style: inherit; padding: 0px; margin: 0px; border: 0px; vertical-align: baseline; ">
<input id="ctl00_MainContent_Wizard1_RequiredConfirmationCheckBox1" type="checkbox" name="ctl00$MainContent$Wizard1$RequiredConfirmationCheckBox1" style="float: right; ">
<label for="ctl00_MainContent_Wizard1_RequiredConfirmationCheckBox1" style="font-style: inherit; padding: 0px; margin: 0px; border: 0px; vertical-align: baseline; ">Carry on the business of banking, unless licenced under the BVI Banks and Trust Companies Act</label>
</span>
&nbsp;<br>
<span class="WizardCheckBox" style="font-style: inherit; padding: 0px; margin: 0px; border: 0px; vertical-align: baseline; ">
<input id="ctl00_MainContent_Wizard1_RequiredConfirmationCheckBox2" type="checkbox" name="ctl00$MainContent$Wizard1$RequiredConfirmationCheckBox2" style="float: right; ">
<label for="ctl00_MainContent_Wizard1_RequiredConfirmationCheckBox2" style="font-style: inherit; padding: 0px; margin: 0px; border: 0px; vertical-align: baseline; ">Carry on the business of an insurance or reinsurance company</label>
</span>
&nbsp;<br>
<span class="WizardCheckBox" style="font-style: inherit; padding: 0px; margin: 0px; border: 0px; vertical-align: baseline; ">
<input id="ctl00_MainContent_Wizard1_RequiredConfirmationCheckBox3" type="checkbox" name="ctl00$MainContent$Wizard1$RequiredConfirmationCheckBox3" style="float: right; ">
<label for="ctl00_MainContent_Wizard1_RequiredConfirmationCheckBox3" style="font-style: inherit; padding: 0px; margin: 0px; border: 0px; vertical-align: baseline; ">Provide registered office addresses to other companies</label>
</span>
&nbsp;<br>
<span class="WizardCheckBox" style="font-style: inherit; padding: 0px; margin: 0px; border: 0px; vertical-align: baseline; ">
<input id="ctl00_MainContent_Wizard1_RequiredConfirmationCheckBox4" type="checkbox" name="ctl00$MainContent$Wizard1$RequiredConfirmationCheckBox4" style="float: right; ">
<label for="ctl00_MainContent_Wizard1_RequiredConfirmationCheckBox4" style="font-style: inherit; padding: 0px; margin: 0px; border: 0px; vertical-align: baseline; ">Engage in any business connected with mutual funds, unless licenced to do so under the Mutual Funds Act</label>
</span>

Open in new window



The parent container of this checkboxes is a Wizard, itself held in a div.

A CheckBoxList renders as a table and I had found it more difficult for me to style to look as above. However - I have just had another go and can got the look I was after, in IE at least, I will test in other browsers and on iPad and if that works I will mark your post as the answer.

Cheers
0
 
Obadiah ChristopherCommented:
Can you replace the <p> tag with <div width="100px"> and check if that helps?
0
 
Simon482ManagerAuthor Commented:
using a checkboxlist worked, thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.