Solved

ASP.Net Checkboxes on iPad

Posted on 2013-01-04
6
459 Views
Last Modified: 2013-01-05
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
0
Comment
Question by:Simon482
  • 3
  • 3
6 Comments
 
LVL 20

Expert Comment

by:informaniac
ID: 38746240
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
 

Author Comment

by:Simon482
ID: 38746511
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
 
LVL 20

Accepted Solution

by:
informaniac earned 500 total points
ID: 38746538
Can you show the HTML markup. Is this a table td or a div? Any particular reason why you can't use checkedboxlist?
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Author Comment

by:Simon482
ID: 38746724
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
 
LVL 20

Expert Comment

by:informaniac
ID: 38747308
Can you replace the <p> tag with <div width="100px"> and check if that helps?
0
 

Author Closing Comment

by:Simon482
ID: 38747488
using a checkboxlist worked, thanks.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
IIS redirect 1 68
help with regular expression to search string 6 27
Regular expression help 2 25
C# Gridview 1 33
iPad in the Business – Quick Start Part 1 Getting Started with Active Sync Mail Many people seem to have issues connecting their iOS device to their company Exchange Server and this article covers the steps for Active Sync configuration as wel…
Short answer to this question: there is no effective WiFi manager in iOS devices as seen in Windows WiFi or Macbook OSx WiFi management, but this article will try and provide some amicable solutions to better suite your needs.
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question