locked
For 2nd time the same issue occurred about adjasting checkboc and its label RRS feed

  • Question

  • User-2071692902 posted

    Hi all,

    According to issue in previous post. This issue has been occurred again in the following page in spite that I tried to applied the css modifications in the previous pot but it doesn't response.

    <!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>Login 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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .banner {
            width: 100%;
            height: 50px;
            background-color: navy;
        }
    body {
      font-family: Arial, Helvetica, sans-serif;
    }
    
    * {
      box-sizing: border-box;
    }
    
    /* style the container */
    .container {
      border-radius: 5px;
      background-color: #f2f2f2;
      padding: 20px 0 30px 0;
    } 
    
    /* style inputs and link buttons */
    input ,
    .btn  {
      width: 100%;
      padding:15px;
      border: none;
      border-radius: 4px;
      opacity: 0.85;
      display: inline-block;
      font-size: 17px;
      line-height: 20px;
      text-decoration: none; /* remove underline from anchors */
    }
    
    input:hover,
    .btn:hover {
      opacity: 1;
    }
    
    /* 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;
    }
    
    /* style the submit button */
    input[type=submit] {
      background-color: #4CAF50;
      color: white;
      cursor: pointer;
    }
    
    input[type=submit]:hover {
      background-color: #45a049;
    }
    
    /* Two-column layout */
    .col {
      float: left;
      width: 50%;
      margin: auto;
      padding: 0 50px;
      margin-top: 6px;
    }
    
    /* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    
    /* vertical line */
    .vl {
      ;
      left: 50%;
      transform: translate(-50%);
      border: 2px solid #ddd;
      height: 175px;
    }
    
    /* text inside the vertical line */
    .vl-innertext {
      ;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: #f1f1f1;
      border: 1px solid #ccc;
      border-radius: 50%;
      padding: 8px 10px;
    }
    
    /* hide some text on medium and large screens */
    .hide-md-lg {
      display: none;
    }
    
    /* bottom container */
    .bottom-container {
      text-align: center;
      background-color: #f1f1f1;
      border-radius: 0px 0px 4px 4px;
    }
    
    /* Responsive layout - when the screen is less than 650px wide, make the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 650px) {
      .col {
        width: 100%;
        margin-top: 0;
      }
      /* hide the vertical line */
      .vl {
        display: none;
      }
      /* show the hidden text on small screens */
      .hide-md-lg {
        display: block;
        text-align: center;
      }
    }
    </style>
    </head>
    <body>
         <div class=" banner">
    <h2 style="font-family: Times New Roman ; text-align: center ;color: red"> ApplesChat Login</h2>
    </div>
    <div class="container">
      <form action="/action_page.php">
        <div class="row">
          <h2 style="text-align:center">Login with Social Media or Manually</h2>
          <div class="vl">
            <span class="vl-innertext">or</span>
          </div>
    
          <div class="col">
            <a href="#" class="fb btn">
              <i class="fa fa-facebook fa-fw">
              </i> Login with Facebook
             </a>
            <a href="#" class="twitter btn">
              <i class="fa fa-twitter fa-fw">
              </i> Login with Twitter
            </a>
            <a href="#" class="google btn">
                <i class="fa fa-google fa-fw">
              </i> Login with Google
            </a>
          </div>
    
          <div class="col">
            <div class="hide-md-lg">
              <p>Or login manually</p>
            </div>
    
            <input type="text" name="username" placeholder="Username" required>
            <input type="password" name="password" placeholder="Password" required>
            <input type="submit" value="Login">
        <label><input class="checkbox1" type="checkbox" checked="checked" name="remember"   style="margin-  bottom:15px"> Remember me
        </label>
     </div>
        </div>
      </form>
    </div>
    
    <div class="bottom-container">
      <div class="row">
        <div class="col">
       <a href="Sign%20Up%20Form.html" style="color:navy; text-align: left ; line-height:1px;
    " class="btn">Sign up</a>
       <a href="Reset%20Password.html
    " style="color:navy; text-align: left" class="btn">Forgot password?</a>
        </div>
      </div>
    </div>
    </body>
    </html>


     How to put checkbox beside its label in spite of conflicting with CSS "input"elements style ? 

    Wednesday, February 26, 2020 3:28 PM

Answers

  • User-719153870 posted

    Hi Omanxp45-1,

    Not quite sure what's the issue but according to the code and the page it generates, i assume you want to place the "Remember me" and the checkbox horizontally.

    The original page:

    If so, all you need is to fix these two elements' width and float them to the left:

                        <input class="checkbox1" style="width:20px;float:left;" type="checkbox" checked="checked" name="remember">
    <label style="width:120px; float:left;">
    Remember me
    </label>

    The updated page:

    Hope this could help. Or if i misunderstood anything, please feel free to tell.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 27, 2020 2:20 AM

All replies

  • User753101303 posted

    Hi,

    If you have a conflict what about using input[type="radio"] and/or  input[type="text"],input[type="password"] CSS rules to scope them to the exact input type you want...

    You tried F12 Elements to see what is the style that causes your issue ?

    Wednesday, February 26, 2020 6:44 PM
  • User-719153870 posted

    Hi Omanxp45-1,

    Not quite sure what's the issue but according to the code and the page it generates, i assume you want to place the "Remember me" and the checkbox horizontally.

    The original page:

    If so, all you need is to fix these two elements' width and float them to the left:

                        <input class="checkbox1" style="width:20px;float:left;" type="checkbox" checked="checked" name="remember">
    <label style="width:120px; float:left;">
    Remember me
    </label>

    The updated page:

    Hope this could help. Or if i misunderstood anything, please feel free to tell.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 27, 2020 2:20 AM
  • User-2071692902 posted

    Hi

    Thanks, it worked!!

    Thursday, February 27, 2020 7:04 PM