Home Forums Porto Admin Template Radiobuttons as a row

This topic contains 4 replies, has 2 voices, and was last updated by  dsteel 19 hours ago. This post has been viewed 40 times

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #10028510

    dsteel
    Participant

    I want to have my radiobuttons as a horizontal row rather than as a vertical column. How do I do this, please?

    Thanks

    David


    #10028527

    Support
    Keymaster

    Hello, please try this example:

    <div class="form-group row">
    	<label class="col-lg-3 control-label text-lg-right pt-2">Inline checkboxes</label>
    	<div class="col-lg-6">
    		<label class="checkbox-inline">
    			<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
    		</label>
    		<label class="checkbox-inline">
    			<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
    		</label>
    		<label class="checkbox-inline">
    			<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
    		</label>
    	</div>
    </div>

    Kind Regards,

    Jonas


    #10028627

    dsteel
    Participant

    Thanks Jonas but I need radiobuttons rather than checkboxes. Do you have an example for inline radiobuttons?

    Thanks

    David


    #10028640

    Support
    Keymaster

    Hello, sure, here’s an example:

    <div class="form-group row">
        <label class="col-sm-2">Radio: </label>
        <div class="col-sm-10">
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                <label class="form-check-label" for="inlineRadio1">Option one</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                <label class="form-check-label" for="inlineRadio2">Option Two</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
                <label class="form-check-label" for="inlineRadio3">Option tree</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
                <label class="form-check-label" for="inlineRadio3">Option four (disabled)</label>
            </div>
        </div>
    </div>

    Please try that and let me know if you need further assistance.

    Kind Regards,

    Jonas


    #10028648

    dsteel
    Participant

    Thanks. I can get that to work now. I didn’t realise that the class form-check-inline worked with radiobuttons as well as checkboxes.

    David


Viewing 5 posts - 1 through 5 (of 5 total)