how to make these two components appear on the same line? (textbox label and the textbox)

Question

this is my html file

 <div id="radioHeader">
    <div id="radioHeader" onclick="radioClicked()">

      <div class="radio form-check form-check-inline component"> Mode of Transaction<span
          style="color:red;">*</span>
        <div class="radiogq">
          <input type="radio" name="mode" value="cheque" onclick="" checked> Cheque
          <input type="radio" name="mode" value="bank"> Bank Transaction
        </div>
      </div>
      <div>
        <p id="idc"></p><input class="textb" type="text" id="fname" class="col-form-label input" placeholder="Registration Id"
          name="fname" size="100">

      </div>
    </div>
  </div>

this is my js file from where I am adding the value in the textbox, and I want them to be in the same line. this textbox label will chance as per the change in the radio button

  function radioClicked() {
  let shapeChoice = document.querySelector('input[name="mode"]:checked').value;

  switch (shapeChoice) {
    case 'cheque':
      document.getElementById("idc").innerHTML = "Enter your Cheque Id"
      break;

    case 'bank':
      document.getElementById("idc").innerHTML = "Enter your Transaction Id"
      break;



    default:
      doucment.getElementById("idc").innerHTML = "Default"
  }
};

radioClicked();

have you used CSS? display: inline-block or display: inline. — Insula, Jan 21 '21 at 16:32
I would suggest learning the difference between block level elements and inline elements. Typically, block level elements appear underneath eachother, while inline doesn't. However, you can use CSS to control that behavior. Perhaps something like freeCodeCamp would be a good idea to visit? You'll learn all of this interactively and completely free :) — icecub, Jan 21 '21 at 16:36
Where exactly is the textbox label you're talking about? There's no `` element within your code? Also, it seems your JS file was not included in your question. You should probably edit it and include that if it's important. — icecub, Jan 21 '21 at 16:51

Ken Lee · Accepted Answer · 2021-01-21T17:39:17.150

Use CSS, one of the ways is float:left

function radioClicked() {
  let shapeChoice = document.querySelector('input[name="mode"]:checked').value;

  switch (shapeChoice) {
    case 'cheque':
      document.getElementById("idc").innerHTML = "Enter your Cheque Id"
      break;

    case 'bank':
      document.getElementById("idc").innerHTML = "Enter your Transaction Id"
      break;



    default:
      doucment.getElementById("idc").innerHTML = "Default"
  }
};

radioClicked();

.cs1 {
    float:left;
}

<div id="radioHeader">


        <div class="radio form-check form-check-inline component" "> Mode of Transaction<span
            style="color:red;">*</span></div>



    <div id="radioHeader" onclick="radioClicked()">

        <div class="cs1 radiogq">
            <input type="radio" name="mode" value="cheque" onclick="" checked> Cheque
            <input type="radio" name="mode" value="bank"> Bank Transaction
        </div>
        
        
        
    </div>

    <div class='cs1'> &nbsp;&nbsp;</div>

            <div class='cs1' style="position:relative;top:2px;" id=idc></div>

    <div class='cs1'> &nbsp;&nbsp;</div>            
            
        <div class='cs1'>

            <input class="textb" type="text" id="fname" class="col-form-label input" placeholder="Registration Id"
                name="fname" style="width:200px;max-width:100%:">

        </div>
  
    </div>

I have added the result (picture). The input box is on the same line. (or you want other alignment ?) — Ken Lee, Jan 21 '21 at 16:53
@KenLee The question is simply not clear. Looking at your screenshot, I suspect OP wants all elements next to `Mode of Transaction`, but I'm not sure. It's unclear what exactly the "textbox label" is. — icecub, Jan 21 '21 at 16:55
i am sorry last time due to some technical issues my js file didn't get uploaded — Alphonse Prakash, Jan 21 '21 at 17:01
Hi @AlphonsePrakash, I have further revised the answer, please check (click "run code snippet" to see the result). — Ken Lee, Jan 21 '21 at 17:22

icecub · Answer 2 · 2021-01-21T17:39:38.380

I've added a few improvements to your script and made sure your idc element floats left. This makes sure that the next element will appear next to it. To make it look better, I also added some margins to the input box.

Keep in mind that it may look like it doesn't work properly here on Stack Overflow as the window for the example is pretty small. But it'll work fine in your browser.

// Make sure it runs after the page is loaded
document.addEventListener("DOMContentLoaded", function(e){
  // Get all radio buttons where name equals "mode"
    const radios = document.querySelectorAll('input[type=radio][name="mode"]');

    function radioChangeHandler(event){
        const idc = document.getElementById("idc");

        if(this.value === "cheque"){
            idc.innerText = "Enter your Cheque Id";
        } else if(this.value === "bank"){
            idc.innerText = "Enter your Transaction Id";
        } else {
            idc.innerText = "Default";
        }
    }

  // Attach event handler to each radio button
    Array.prototype.forEach.call(radios, function(radio) {
        radio.addEventListener('change', radioChangeHandler);
    });
});

#idc {
    float: left;
}

#fname {
    margin-top: 13px;
    margin-left: 5px;
}

<div id="radioHeader">
    <div id="radioHeader">

        <div class="radio form-check form-check-inline component"> Mode of Transaction<span style="color:red;">*</span>
            <div class="radiogq">
                <input type="radio" name="mode" value="cheque" onclick="" checked> Cheque
                <input type="radio" name="mode" value="bank"> Bank Transaction
            </div>
        </div>
        <div>
            <p id="idc"></p><input class="textb" type="text" id="fname" class="col-form-label input" placeholder="Registration Id" name="fname" size="100">
        </div>
    </div>
</div>

Reference for the radio event handler: How to use radio on change event?

score 0 · Answer 3 · answered Jan 21 '21 at 17:58

The behavior is because the paragraph i.e.

element by default is block element. So, it occupies a block and adds line break before and after it. So, one way of changing it would be to change the behavior of paragraph block i.e.

element by changing the display property to inline or inline block. Since it already has any id of idc, it can be done as :-

#idc {
  display: inline;
}

Alternatively, the label and input can be placed inside the paragraph and it will display in the same line given there is enough to accommodate the element. This is the better approach since, a label tag is used for displaying the label and is linked to the input with for attribute.

<p>
  <label id="idc" for="fname"></label>
  <input class="textb" type="text" id="fname" class="col-form-label input" placeholder="Registration Id" name="fname" size="100">
</p>

how to make these two components appear on the same line? (textbox label and the textbox)

3 Answers3