Solved

ASP.Net Checkboxes on iPad

Posted on 2013-01-04
6
465 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 

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

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

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

Today I had a very interesting conundrum that had to get solved quickly. Needless to say, it wasn't resolved quickly because when we needed it we were very rushed, but as soon as the conference call was over and I took a step back I saw the correct …
This article shows how to deploy dynamic backgrounds to computers depending on the aspect ratio of display

734 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