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.

My check boxes moving to right

A

anuraa

Legendary Coder
Hello Friends: I guess, you guys have the answer for this. My check boxes are moved to the right. Tried with a class for checkbox and it's label to be left aligned with no success.
HTML: 
<!doctype html>
<html>
<head>
<style>
      .container {
    width: 600px;
    margin: 25px auto;
  }
  form {
    padding: 20px;
    background: #26c9bb;
    color: #000;
    border-radius: 4px;
  }
  form label,
  form input,
  form button {
    border: 0;
    display: block;
    width: 100%;
  }
  form input {
    height: 25px;
    line-height: 25px;
    background: #fff;
    color: #000;
    font-family: "Open Sans";
    font-size: 20px;
    padding: 0 6px;
    box-sizing: border-box;
  }
  form button {
    background: #ec921b;
    color: #000;
    cursor: pointer;
  }

</style>
<script src="index.js"></script>
</head>
<body>
    <div class="container">
        <form action="" name="registration"> 
          <label for="name">Enter your Name</label><br> 
          <input type="text" name="name" id="name" placeholder="Your Name"/><br>
          <label for="etype">Entity Type:</label>
          <select name="etype" id="etype">
            <option value=""></option> 
            <option value="Spropriter">Sole Propriter</option>
            <option value="partnership">Partnershio</option>
          </select><br><br>
          <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
          <label for="vehicle1"> I have a bikes</label><br>
          <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
          <label for="vehicle2"> I have a car</label><br>
          <label for="message">Message</label>
         <textarea class="tarea" name="message" id="message"   rows="5" cols="50"></textarea>
         <button type="submit" name="submit"  value="submit">Message</button>
      </form>
     </div>
</body>
</html>

I want to get it as running the following code.
HTML: 
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">

          <label for="vehicle1"> I have a bikes</label><br>

          <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">

          <label for="vehicle2"> I have a car</label><br>
</form>

Thanks for your guidance. Regards Anura
 
Sort by date Sort by votes
Hey @anuraa

Is this what you're after? Where the checkboxes are on the left as to them being on the right.
1672432032148.png
So in the CSS statement down below, you are telling all the inputs, all the buttons and all the labels to have a border of 0, to be a block and to be 100% width. However, your checkboxes are a type of input, meaning you are telling the checkboxes to make the width as big as it can, which then moves the checkbox into the middle.
CSS: 
  form label,
  form input,
  form button {
    border: 0;
    display: block;
    width: 100%;
  }

I was able to fix this by removing the form input from the above code, so it looks like this:

CSS: 
  form label,
  form button {
    display:block;
    border: 0;
    width: 100%;
  }
 
Upvote 0 Downvote
Thank you so much. I managed to understand with your explanation and to accomplish as seen below.
Right now, under "list to sell", there are two items. Is it possible to reduce the width between the two listed items.
HTML: 
<!doctype html>
<html>
<head>
<style>
  .container {
    width: 600px;
    margin: 3px auto;
  }
  form {
    padding: 5px 5px 10px 10px;
    background: #26c9bb;
    color: #000;
    border-radius: 4px;
  }
  form label,
  form button {
    border: 0; 
  }
  form input {
    height: 25px;
    line-height: 55px;
    background: #fff;
    color: #000;
    font-family: "Open Sans";
    font-size: 20px;
    padding: 0 2px;
    box-sizing: border-box;
  }
  form button {
    background: #ec921b;
    color: #000;
    cursor: pointer;
  }
  input[type="checkbox"]{
    vertical-align: middle;
  }
</style>
</head>
<body>
  <div class="container">
    <form action="" name="registration"> 
      <label for="name">Enter your Name</label><br> 
      <input  type="text" name="name" id="name" placeholder="Your Name" size="50"><br>
      <label for="etype">Entity Type:</label>
      <select name="etype" id="etype">
        <option value=""></option>     
        <option value="Spropriter">Sole Propriter</option>
        <option value="partnership">Partnershio</option>
      </select>
      <p>List to sell<br>
        <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
        <label for="vehicle1"> I have a bikes</label><br>
        <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
        <label for="vehicle2"> I have a car</label><br>
      </p> 
        <textarea class="tarea" name="message" id="message"   rows="5" cols="50"></textarea><br>
        <button type="submit" name="submit"  value="submit">Message</button>
    </form>
  </div>
</body>
</html>
 
Upvote 0 Downvote
Thank you. I never thought of the existence of -ve -8px until you showed me. Further, I really appreciate the direction towards W3Schools Bootstrap. I didn't know until reading your post. That would be the first thing in my agenda for the new year.

Thank you again everyone so much. Wish you a happy new year. Regards Anura
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom