Solved

ASP.Net Checkboxes on iPad

Posted on 2013-01-04
6
457 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
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.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

There are many out there who own an iPad but are frustrated by the lack of Flash support. This prevents many webpages from displaying their content correctly on the iPad .  In addition Flash games are not supported on the iPad either.  Regardless of…
What's a UDID? If you're involved in developing, testing, or even reviewing an iOS application that's in beta, then at some point you may need to know the UDID for any iOS devices that you'll be testing on. What's the UDID? It stands for Unique Dev…
Windows 10 is mostly good. However the one thing that annoys me is how many clicks you have to do to dial a VPN connection. You have to go to settings from the start menu, (2 clicks), Network and Internet (1 click), Click VPN (another click) then fi…
Both in life and business – not all partnerships are created equal. As the demand for cloud services increases, so do the number of self-proclaimed cloud partners. Asking the right questions up front in the partnership, will enable both parties …

911 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now