Solved

Position RadioButtonList on right edge of window and keep text from overlapping it.

Posted on 2007-11-21
3
737 Views
Last Modified: 2008-02-01
On a Web Form with lots of RadioButtonLists for "_Y _N _N/A" answers to questions I'm trying to position the RadioButtonLists in a straight column on the right edge of the window.

I have them positioned on the right edge okay like this
<style>
.ToRight{position:absolute; right:10px;}
#container {padding-left:80px; padding-right:50px}
</style>

<asp:RadioButtonList CssClass="ToRight" ID="radTraining6Months" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" TabIndex="580">
                        <asp:ListItem>Y</asp:ListItem>
                        <asp:ListItem>N</asp:ListItem>
                        <asp:ListItem>N/A</asp:ListItem>
</asp:RadioButtonList>

The whole form is inside a <div id="container"></div>

The problem is that long questions will go to the 50px right edge before wrapping to the next line even if that makes the sentence overlap the RadioButtonList a bit.
I can move the right edge or margin of the questions over more by increasing the padding-right:50px to padding-right:100px or so, but that is not the effect I want.  
I want want the text to wrap when it encounters the RadioButtonList so I can have the margins set to a reasonable width and still not overlap the RadioButtonLists.

I tried setting the margin-left and padding-left style of the RadioButtonList but that had no effect.

Any suggestions?

Thanks,
David
0
Comment
Question by:megnin
[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
  • 2
3 Comments
 
LVL 30

Accepted Solution

by:
Steggs earned 500 total points
ID: 20331162
Hello,

absolute positioning takes the element out of the flow so it will have no 'relationship/interaction' with the other elements on the page.

You should try floating the radio buttons instead

Steggs
0
 
LVL 1

Author Comment

by:megnin
ID: 20359911
Changing it from
<style>
.ToRight{position:absolute; right:10px;}
</style>

to

<style>
.ToRight{float:right}
</style>

causes the RadioButtonLists to appear a one line below the question and some of them to not line up all the way to the right.  I had tried float first.
0
 
LVL 1

Author Comment

by:megnin
ID: 20397122
I tried floating the radio buttons, but they moved down to the next line.  That just won't do.  I think that adding a "width" attribute may help.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Move inline javascript functions to external .js file in asp.net 12 55
Run software updates from the website 6 50
Div not showing up 6 32
Javascript function 3 11
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

739 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