Solved

ASP.Net Checkboxes on iPad

Posted on 2013-01-04
6
456 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
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…
This video discusses moving either the default database or any database to a new volume.
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

747 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

13 Experts available now in Live!

Get 1:1 Help Now