Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

How to Position the Radio Buttons?

dave007

Coder
Hello,
I have asked ChatGPT4 but doesn't seem to understand me!
The code is to select which Language the rest of the site should be in.
I want to have the Radio selector on the Left hand side of the Label, both on the same horizontal (of course )
Like this:
o English is my first language
o El español es mi primer idioma
o Le français est ma première langue

Here is my HTML:
HTML:
<div id="base_language_select">
                    <div>
                        <input type="radio" id="english" name="base_language" value="English"
                            <?php echo ($default_base_language == 'English') ? 'checked' : ''; ?>>
                        <label for="english">English is my first language</label><br>
                      
                        <input type="radio" id="spanish" name="base_language" value="Spanish"
                            <?php echo ($default_base_language == 'Spanish') ? 'checked' : ''; ?>>
                        <label for="spanish">El español es mi primer idioma</label><br>
                      
                        <input type="radio" id="french" name="base_language" value="French"
                            <?php echo ($default_base_language == 'French') ? 'checked' : ''; ?>>
                        <label for="french">Le français est ma première langue</label><br>
                      
                        <input type="radio" id="german" name="base_language" value="German"
                            <?php echo ($default_base_language == 'German') ? 'checked' : ''; ?>>
                        <label for="german">Deutsch ist meine Muttersprache</label><br>
</div>
                    <button type="button" id="updateBaseLang"></button>
                </div>

And here is my CSS:
CSS:
/* Form styling */
form {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    max-width: 300px;
    margin: 0 auto;
}

label {
    margin: 10px 0 5px;
    font-weight: bold;
}

select {
    width: 200px; /* Set the desired width */
    padding: 10px; /* Adjust padding if necessary */
    border-radius: 5px; /* Optional: keeps the rounded corners */
    border: 1px solid #ccc; /* Optional: define the border color */
    font-size: 1rem; /* Optional: adjust the font size */
    box-sizing: border-box; /* Ensure padding doesn't affect the width */
}

input[type="email"],
input[type="password"],
input {
    padding: 10px;
    width: 100%;
    max-width: 300px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

input[type="number"] {
    width: 100px; /* Set the desired width */
    padding: 10px; /* Adjust padding if necessary */
    border-radius: 5px; /* Optional: keeps the rounded corners */
    border: 1px solid #ccc; /* Optional: define the border color */
    font-size: 1rem; /* Optional: adjust the font size */
    box-sizing: border-box; /* Ensure padding doesn't affect the width */
    text-align: center; /* Center the text inside the input */
}

This is how it looks now:
The radio selector is ON TOP instead of on Left Hand Side.
Hope you can help.
option-list.png
 
Last edited by a moderator:
I’d suggest putting the input inside the label but before the label text. Then set the label to display:flex; align-items:center;

You might want to add a bit of a margin to the right of the input.

If you don’t want the label text wrapping under the input, wrap the text in a span.
 
Thanks,
The result certainly looks better.
However, I can not seem to get the elements to align to the left.
As you can see in the image, all the elements are nicely aligned on the right!

Also the Radio buttons are a little high - they don't really line up very well.

Any help, much appreciated.
list-01.png

This is my CSS:
CSS:
/* Form styling */
form {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    max-width: 400px;
    margin: 0 auto;
}

label {
    display: flex; /* Use flexbox to align items horizontally */
    align-items: center; /* Vertically center the radio button and text */
    margin: 0 0; /* Add some space between label blocks */
    white-space: nowrap; /* Prevent text from wrapping */
    width: 100%; /* Ensure the label spans the full width of the form */
    text-align: left; /* Explicitly left-align the text */
}

input[type="radio"] {
    margin-right: 2px; /* Add space between the radio button and the label text */
}

And the HTML
HTML:
<form method="POST" action="dashboard.php">
            <div id="base_language_select">
                <div>
                <label for="english">
                    <input type="radio" id="english" name="base_language" value="English"
                        <?php echo ($default_base_language == 'English') ? 'checked' : ''; ?>>
                    English is my first language
                </label>
    
                <label for="spanish">
                    <input type="radio" id="spanish" name="base_language" value="Spanish"
                        <?php echo ($default_base_language == 'Spanish') ? 'checked' : ''; ?>>
                    El español es mi primer idioma
                </label>
    
                <label for="french">
                    <input type="radio" id="french" name="base_language" value="French"
                        <?php echo ($default_base_language == 'French') ? 'checked' : ''; ?>>
                    Le français est ma première langue
                </label>
    
                <label for="german">
                    <input type="radio" id="german" name="base_language" value="German"
                        <?php echo ($default_base_language == 'German') ? 'checked' : ''; ?>>
                    Deutsch ist meine Muttersprache
                </label>
    
             </div>
                <button type="button" id="updateBaseLang"></button>
            </div>
        </form>
 
Here's what I came up with:

CSS:
/* Form styling */
        form {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: left;
            max-width: 400px;
            width: 100%;
            margin: 0 auto;
        }

        label {
            display: flex; /* Use flexbox to align items horizontally */
            justify-content: flex-start;
            align-items: flex-start; /* Vertically center the radio button and text */
            text-align: left; /* Explicitly left-align the text */
            margin: 0 0 1em 0;
        }

        input[type="radio"] {
            margin-right: 6px; /* Add space between the radio button and the label text */
        }

HTML:
<form method="POST" action="dashboard.php">
    <div id="base_language_select">
        <div>
        <label for="english">
            <input type="radio" id="english" name="base_language" value="English"
                <?php echo ($default_base_language == 'English') ? 'checked' : ''; ?>>
            <span>English is my first language</span>
        </label>
        <label for="spanish">
            <input type="radio" id="spanish" name="base_language" value="Spanish"
                <?php echo ($default_base_language == 'Spanish') ? 'checked' : ''; ?>>
            <span>El español es mi primer idioma</span>
        </label>
        <label for="french">
            <input type="radio" id="french" name="base_language" value="French"
                <?php echo ($default_base_language == 'French') ? 'checked' : ''; ?>>
            <span>Le français est ma première langue</span>
        </label>
        <label for="german">
            <input type="radio" id="german" name="base_language" value="German"
                <?php echo ($default_base_language == 'German') ? 'checked' : ''; ?>>
            <span>Deutsch ist meine Muttersprache</span>
        </label>
     </div>
        <button type="button" id="updateBaseLang">Submit</button>
    </div>
</form>

Styles adjusted and added spans around label text.
 
Thanks for your help.
I had tried the changes.

I managed to fix it by setting the this css
Code:
input[type="radio"] {
    margin: 0 0 0 0; /* Add some space between label blocks */
    margin-right: 2px; /* Add space between the radio button and the label text */
    text-align: left; /* Explicitly left-align the text */
    width: 10px;
}
 

New Threads

Buy us a coffee!

Back
Top Bottom