Prevent line breaks between RadioButton and its Label using CSS in ASP.Net

anjali600
 
on Sep 16, 2021 10:42 PM
Sample_761839.zip
544 Views

I have a radiobuttonlist on my web page. when I resize the page to make it smaller, the radio button comes on the top and the text of the radio button comes right underneath it.

Below is screenshot of what I am getting:

https://i.stack.imgur.com/vj4K3.png

When I resize the screen, can I see the radio button and text next to it and the text comes to the second line rather than text and radio button separately.

Below is my code:

<style>
   .radioBL input[type="radio"] {
        margin-right: 10px;
        word-break: break-all;
    }
</style>
<asp:RadioButtonList  CssClass="radioBL" ID="test" runat="server">
    <asp:ListItem Text="In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available."></asp:ListItem>
    <asp:ListItem Text="Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."></asp:ListItem>
</asp:RadioButtonList>

any help in resolving this issue will be greatly appreciated.

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Sep 17, 2021 03:57 AM

Hi anjali600,

Set the RadioButtonList label display property to override the bootstrap class.

HTML

<style type="text/css">
    .radioBL input[type="radio"] {
        margin-right: 10px;
        word-break: break-all;
    }

    .radioBL label {
        display: inline !important;
    }
</style>
<asp:RadioButtonList CssClass="radioBL" ID="test" runat="server">
    <asp:ListItem Text="In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available."></asp:ListItem>
    <asp:ListItem Text="Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."></asp:ListItem>
</asp:RadioButtonList>