Aligning materializecss Radio buttons and Text area

user_12308985 0
Viewed 102

Here is the link to the fiddle https://jsfiddle.net/be21z7wj/2/

I am trying to create a question which has a radio button with options Yes and No. Along with this, there should be a text area where user can type in reason for selecting No. As you would see in the fiddle, there are a few problems with my current code:

  1. The Yes and No radio buttons are overlapping
  2. I would like to have the radio buttons within two column widths and the text area to cover 8 column widths. But this is not working
       <div class="row">
          <div class="input-field col s2 m2 l2">
            <label>
            <input name="group1" id="radio_antibiotics_indicated_yes" type="radio" style ="vertical-align: center"/>
            <span style="padding-left:24px">Yes</span>
            </label>
            <label>
            <input name="group1" id="radio_antibiotics_indicated_no" type="radio"/>
            <span style="padding-left:24px">No</span>
            </label>
          </div>
          <div class="input-field col s8 m8 l8">
            <textarea id="text_antibiotics_indicated_no" class="materialize-textarea" style="margin:0px;padding:0px" required="" aria-required="true"></textarea>
            <label for="text_antibiotics_indicated_no">If ‘No’ response, write the reasons/comment</label>
          </div>
        </div>
      </div>

How do I go about solving these?

materialize radio-button css html
1 Answers

The solution


1. The Yes and No radio buttons are overlapping

The simplest solution is just to wrap this part of the code with a div (i.e., <div id="wrapper"> in the JSFiddle below). Adding an id is not necessary, it just for the purpose that you can understand what I'm talking about. See the JSFiddle snippet here.

2. I would like to have the radio buttons within two column widths and the text area to cover 8 column widths, but this is not working

I think it's working, but the problem is that text overlaping the line is caused because there is not enough space. In other words, the text is too long. If you change <div class="input-field col s8 m8 l8"> to <div class="input-field col s10 m10 l10"> this problem mainly dissappears, but at some specific browser window widths the problem still persists.

The same thing applies to "What is the LIKELY causative Micro-organisms?". Change <div class="input-field col s12 m6 l4"> to <div class="input-field col s12 m12 l12">. See the JSFiddle snippet here.

Let me know if this is helpful.

user_103471450
Related