Jump to content

how to text wrap radio buttons?


Sharkadder
 Share

Recommended Posts

ok on my site i have a radio button with some text next to it. Unfortunately the text goes onto the next line. I know for lists you can set the list-style-position property to outside and the text will begin where the text on the previous line does.how do you do it for radio buttons? #leftcontent input {radio-style-position: outside;}that code i tried but it didn't work

Link to comment
Share on other sites

The text shouldn't go on the next line. What does your mark-up look like?

<input type="radio"> Some text

This should render the text on the same line as the radio button.There's no such thing as "radio-style-position". You can see all the CSS properties here: http://w3schools.com/css/css_reference.asp

Link to comment
Share on other sites

yes it does but what if for example i am using a div tag with only limited space within the tag, so the text goes onto the next line. Instead of starting from where the text does on the previous line, it starts from where the radio button is, it just looks odd.I hope you get what i mean now, i need the CSS code to make it align up with the previous lines text, like i have done for the list property.My HTML code isn't the problem, it's the CSS code i need for that div element to make text outside and not inside for radio buttons like i did for lists.My HTML/CSS is as follows:HTML==== <div class="leftcontent"> <img src="satdeal.png"> <p> <form> <input type="radio" name="Type" value="Standard"> Standard <br> <br> <input type="radio" name="Type" value="Standard & Support"> Standard & Support <br> <br> <input type="radio" name="Type" value="Support Only"> Support Only </form> </span> </p> </div>CSS====.leftcontent {float: left;margin: 0px;width: 131px;background: #ffffff;display: block;}

Link to comment
Share on other sites

In that case, I'd try floating a <div> next to it instead:

<input type="radio"><div style="float: left">Some text</div>

By the way, I don't recommend all those <br> tags. Put all of them in list items and use margin to separate them:

ul.form { padding: 0; margin: 0; }ul.form li {list-style-type: none;margin: 1em 0;}.left { float: left; }

<ul class="form"><li><input type="radio" name="Type" value="Standard"> <div class="left">Standard</div></li><li><input type="radio" name="Type" value="Standard & Support"> <div class="left>Standard & Support</div></li><li><input type="radio" name="Type" value="Support Only"> <div class="left">Support Only</div></li></ul>

Link to comment
Share on other sites

your little trick didn't work i'm afraid, infact it made it worse than it originally was. What your way is doing is, having the radio button on one line and the text underneath. Ok yes i would work but i want text on the first line, then when it overflows onto the line underneath it begins from where the first line of text starts off.e.g. (where $ is the radio button itself)without formatting (what i originally had) it will look like this:$ this is an example of radio buttonwith no formattingwith formatting - what i am looking for$ this is an example of a radio button that has been formatted so the next lines text will align with the line above(if above didn't work it's because this forum delete uneeded white spaces at the start of lines)your way$this is an example of a radio button$your way shows the text on the next lineMy CSS and html now looks like this:ul.form { padding: 0; margin: 0; }ul.form li {list-style-position: outside;list-style-type: none;margin: 1em 0;}.left { float: left; } <form> <ul class="form"> <li><input type="radio" name="Type" value="Standard"> <div class="left">Standard</div></li> <li><input type="radio" name="Type" value="Standard & Support"> <div class="left">Standard & Support</div></li> <li><input type="radio" name="Type" value="Support Only"> <div class="left">Support Only</div></li> </ul> </form>hope you now understand, when i first did it with list's i used the list-style-position: outside; property and it worked, now it isn't

Link to comment
Share on other sites

list-style-position only works for the list marker, which is generated by the browser. You can't apply it to any element.My method shouldn't put the text on the next line if you applied float: left; to the <div> element.

Link to comment
Share on other sites

Ok your code isn't working for me, so i have included a screenshot of exactly what is happening:picture.gifI used exactly the code you said, as you can see the readio buttons are not aligned. The browser i am using is firefox 3.0 and i use kubuntu. I cannot test IE as it's not working properly.What do you think is going on then and how can i correct it?The effect i am looking for is this:h**p://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21156883.htmlthanks, hope somebody can help with some appropiate code, again the code i currently have is as follows:CSS.leftcontent {float: left;margin: 0px;width: 131px;background: #ffffff;display: block;}ul.form li {list-style-position: outside;list-style-type: none;margin: 1em 0;}.left { float: left; list-style-position:outside;}HTML <div class="leftcontent"> <img src="satdeal.png"> <p> <form> <ul class="form"> <li><input type="radio" name="Type" value="Standard"> <div class="left">Standard</div></li> <li><input type="radio" name="Type" value="Standard & Support"> <div class="left">Standard & Support</div></li> <li><input type="radio" name="Type" value="Support Only"> <div class="left">Support Only</div></li> </ul> </form> </p> </div>

Link to comment
Share on other sites

The text is wrapping because it's too long. Your box simply can't contain the text.You could solve it by not allowing it to wrap. Also, you need to clear the floats.Try adding this to your CSS:.form { padding: 0; }.form li {clear: left;white-space: nowrap;}

Link to comment
Share on other sites

still not working, a radio button appears and the text is being displayed on the line underneath. I am wondering if it is infact a firefox issue or it might be my kubuntu but it should work if it worked before for a different list.I can do it without wrapping and it is fine except for the start of a new line doesn't match, i could always cheat and insert some white spaces at the start of the new line although that isn't very practical. So it looks like i may just have to get rid of the wrapping all together as it's messing up like this. What i don't get is, without trying to wrap the text, the text will display next to the radio button and if needed it will overflow onto the next line. When i try to wrap it goes on the line underneath the radio button and doesn't overflow, it just continues.I have now done a few more tests, i removed the radio button code and allowed bullets to be displayed in the list. the text does indeed wrap on the next line, so that is happening is, the text is wrapping itself to the start of the radio button and not the start of the text. I think some white spaces may have to do me, unless somebody has got a solution.

Link to comment
Share on other sites

Slightly off topic but why aren't you using a label for your radio button anyway? Although Ingolme's point still remains valid. If the text it too long for the container, whatever that it, then it's just not going to stay on the same line. If you must, maybe try shrinking your text and see if that IS the problem.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...