How to make "Select Gender " in one line instead of four lines? [Answered]RSS

1 reply

Last post Mar 20, 2020 04:34 PM by timur.kh

‹ Previous Thread|Next Thread ›

Shortcuts

Omanxp45-1

Member

49 Points

103 Posts

How to make "Select Gender " in one line instead of four lines?

Mar 20, 2020 03:57 PM|Omanxp45-1|LINK

Hi All,

I have the following code of "Select Gender" and when I test it out side my page it appears on one line but in my page it refuses to appear on one line. Maybe because of the CSS of the page.

Here the "Select Gender " Code

<div>
           Select Gender:
  <label><input type="radio" name="gender" value="male" required>Male</label>
  <label><input type="radio" name="gender" value="female">Female</label>
  <label><input type="radio" name="gender" value="other">Other</label>
          </div>

And here the whole page code

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
<meta name="description" content="Universal and confidential chat,<br> where you can communicate with others, privately or publicly">
            <title> Sign Up To ApplesChat</title>
    <link rel="icon" sizes="57x57" href="https://imgur.com/57AweD4" />
  <link rel=" shortcut icon"  href="https://imgur.com/57AweD4.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1">


<style>
        .banner {
            width: 100%;
            height: 50px;
            background-color: navy;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        * {
            box-sizing: border-box
        }
        /* style inputs and link buttons */
        input:not([type='checkbox']),
        .checkbox-wrapper,
        .btn{
            width: 100%;
            min-width:200px;
            padding: 12px;
            border: none;
            border-radius: 4px;
            /*margin: 5px 0;*/
            opacity: 0.85;
            display: inline-block;
            font-size: 17px;
            line-height: 20px;
            text-decoration: none; /* remove underline from anchors */
        }
        /* add appropriate colors to fb, twitter and google buttons */
        .fb {
            background-color: #3B5998;
            color: white;
        }

        .twitter {
            background-color: #55ACEE;
            color: white;
        }

        .google {
            background-color: #dd4b39;
            color: white;
        }

        hr {
            display: block;
            margin-top: 0em;
            margin-bottom: 0.5em;
            margin-left: auto;
            margin-right: auto;
            border-style: solid;
            border-width: 2px;
            border-color: navy;
        }

        h3 {
            position: relative;
            text-align: center;
            font-size: small;
        }

            h3 span {
                display: inline-block;
                padding: 0 10px;
                background: #fff;
                margin-top:15px;
            }

            h3:before {
                /*content: "";*/
                display: block;
               position: absolute;
                z-index: -1;
                left: 0;
                right: 0;
                top: 50%;
                height: 1px;
                background: #808080;
            }
        /* Two-column layout */
        .col {
            float: left;
            width: 50%;
            margin: auto;
            padding: 0 50px;
            margin-top: 6px;
        }

        hr {
            border: 1px solid #f1f1f1;
            margin-bottom: 25px;
        }

        /* Set a style for all buttons */
        button {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
            opacity: 0.9;
        }

            button:hover {
                opacity: 1;
            }

        /* Extra styles for the cancel button */
        .cancelbtn {
            padding: 14px 20px;
            background-color: #f44336;
        }

        /* Float cancel and signup buttons and add an equal width */
        .cancelbtn, .signupbtn {
            float: left;
            width: 50%;
        }

        /* Add padding to container elements */
        .container {
            padding: 16px;
        }

        /* Clear floats */
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }

        /* Change styles for cancel button and signup button on extra small screens */
        @media screen and (max-width: 300px) {
            .cancelbtn, .signupbtn {
                width: 100%;
            }
        }
    </style>
    </head>
<body>
     <div class=" banner">
<h2 style="font-family: Times New Roman ; text-align: center ;color: red"> ApplesChat Sign Up</h2>
</div>
      <div class="container">
    <h1>Sign Up</h1>
    <p>Sign Up with Social Media to create an account.</p>

                <div class="col">
        <a href="#" class="fb btn">
          <i class="fa fa-facebook fa-fw">
          </i> Sign Up with Facebook
         </a>
        <a href="#" class="twitter btn">
          <i class="fa fa-twitter fa-fw">
          </i> Sign Up with Twitter
        </a>
        <a href="#" class="google btn">
            <i class="fa fa-google fa-fw">
          </i> Sign Up with Googlep;
        </a>
      </div>

<br><br><br><br><br><br><br>  
                    <h3><span>Or Sign Up Manually</span></h3>

      <p>Please fill in this form to create an account.</p>
    <hr>
<form action="123.php" method="post">

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <label for="psw-repeat"><b>Repeat Password</b></label>
    <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
          <div>
           Select Gender:
  <label><input type="radio" name="gender" value="male" required>Male</label>
  <label><input type="radio" name="gender" value="female">Female</label>
  <label><input type="radio" name="gender" value="other">Other</label>
          </div>
          <div class='checkbox-wrapper'>
    <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</div>
    <p>By creating an account you agree to our <a href="Privacy Policy ApplesChat.html" style="color:dodgerblue">Terms & Privacy</a>.</p>

    <div class="clearfix">
      <button type="button" class="cancelbtn">Cancel</button>
      <button type="submit" class="signupbtn">Sign Up</button>
        <div class="container signin">
    <p>Already have an account? <a href="Login%20Form.html">Login</a>.</p>
  </div>     

    </div>
  </div>
    </form>
</body>
</html>

Thanks

timur.kh

Member

170 Points

96 Posts

Re: How to make "Select Gender " in one line instead of four lines?

Mar 20, 2020 04:34 PM|timur.kh|LINK

Omanxp45-1
Maybe because of the CSS of the page.

Indeed, it seems this bit of CSS is at play here:

input:not([type='checkbox']),
.checkbox-wrapper,
.btn {
  /******* look at the following lines *******/
  width: 100%; /* makes each item 100% effectively pushing following item to the next line*/
  min-width: 200px; /* this does somewhat adds onto it by specifying minimal width*/
  .....more CSS here
}

to fix, update your selector to not apply to inputs of type radio:

input:not([type='checkbox'|]):not([type='radio']]), /* <-- change this line */
.checkbox-wrapper,
.btn {
  width: 100%;
  min-width: 200px;
  padding: 12px;
  border: none;
  border-radius: 4px;
  /*margin: 5px 0;*/
  opacity: 0.85;
  display: inline-block;
  font-size: 17px;
  line-height: 20px;
  text-decoration: none;  /* remove underline from anchors */
}

Check out JSFiddle and read more about :not() pseudo-class on MDN.

‹ Previous Thread|Next Thread ›