skip to Main Content

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:

enter image description here

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>

Below is the HTML for above code when I view the page source:

       <div style="margin-top: 70px;position:relative;top:50px">
        <div  style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%;" class="container body-content"   >
            
    <style>

   .radioBL input[type="radio"] {
    margin-right: 10px;
    
}

   .test1{
       word-break: break-all;
   }
    </style>
  <table id="MainContent_test" class="radioBL test1">
    <tr>
        <td><input id="MainContent_test_0" type="radio" name="ctl00$MainContent$test" value="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." /><label for="MainContent_test_0">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.</label></td>
    </tr><tr>
        <td><input id="MainContent_test_1" type="radio" name="ctl00$MainContent$test" value="
Lorem Ipsum has been the industry&#39;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." /><label for="MainContent_test_1">
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.</label></td>
    </tr>
</table>

I modified my style sheet like so, but still seeing the break between radio button and the text:

    <style>

   .radioBL input[type="radio"] {
    margin-right: 10px;
    
}

label {
  word-wrap: break-word;
}
    </style>
  <asp:RadioButtonList  CssClass="radioBL label" ID="test" runat="server" >
      <asp:ListItem CssClass="label"  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 CssClass="label"  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>

2

Answers


  1. Use word-wrap: break-word; allows unbreakable words to be broken if they are too large .

    You can achieve the same with word-break: break-all;

    label {
      word-wrap: break-word;
    }
    <label for="html"> <input type="radio" id="html" name="fav_language" value="HTML"> 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.</label></td>
    </label>

    Here is your HTML code for the problems solution you are seeking but can’t help with asp.net way , pasted so that you can find some help

    <div style="margin-top: 70px;position:relative;top:50px">
      <div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%;" class="container body-content">
    
        <style>
          .radioBL input[type="radio"] {
            margin-right: 10px;
          }
          
          label {
            word-break: break-all;
          }
        </style>
        <table id="MainContent_test" class="radioBL test1">
          <tr>
            <td><label for="MainContent_test_0"><input id="MainContent_test_0" type="radio" name="ctl00$MainContent$test" value="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."
              />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.</label></td>
          </tr>
          <tr>
            <td><label for="MainContent_test_1"><input id="MainContent_test_1" type="radio" name="ctl00$MainContent$test" value="
    Lorem Ipsum has been the industry&#39;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."
              />
    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.</label></td>
          </tr>
        </table>
    Login or Signup to reply.
  2. Try this stylesheet with radio Buttons and it will work:

    <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 CssClass="label"  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 CssClass="label"  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>
    

    you will see this when you run it:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search