CODEWITHSUNDEEP
htmlcssforms
snovosad54
snovosad54

Reputation: 391

How do I specify where I want spacing in a W3.CSS hover over dropdown?

First off, I know this question has probably been asked a million times. That being said, this is my first time putting my hand in the HTML/CSS cookie jar and I feel like a complete idiot for not being able to figure this out with all the resources available already. This is what I have come up with from god knows how many websites:

<div class="w3-dropdown-hover">
        <button class="w3-button w3-hide-small"><i class="fa fa-user"></i> REGISTER</button>
        <div class="w3-dropdown-content w3-bar-block w3-border">
        <form autocomplete="off">
                <div class="form-group">
                    <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
                </div>
                <div class="form-group">
                    <input type="email" name="email" id="email" tabindex="2" class="form-control" placeholder="Email Address" value="">
                </div>
                <div class="form-group">
                    <input type="password" name="password" id="password" tabindex="3" class="form-control" placeholder="Password">
                </div>
                <div class="form-group">
                    <input type="password" name="confirm-password" id="confirm-password" tabindex="4" class="form-control" placeholder="Confirm Password">
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-xs-6 col-xs-offset-3">
                            <input type="submit" name="register-submit" id="register-submit" tabindex="5" class="form-control btn btn-info" value="Register Now">
                        </div>
                    </div>
                </div>
                <input type="hidden" class="hide" name="token" id="token" value="7c6f19960d63f53fcd05c3e0cbc434c0">
            </form>
        </div>
    </div>

It looks like this when I run it:

enter image description here

I would like to have some buffer around it like I see an all of the example codes. However, for some reason, when I try to add class="px-4 py-4" to the form scope definition nothing happens. I am sure I am doing something stupid and would appreciate any help on this. If I am missing any important information, please let me know and I will be happy to add it. Thank you.

Upvotes: 0

Views: 98

Answers (2)

Berat &#199;elik
Berat &#199;elik

Reputation: 11

"w3-padding" does what you need. You may add the class "w3-border" around the inputs and the "Register Now" button. BTW i suggest you stick on one of the css libraries, either bootstrap or w3.css. Otherwise, it gets too complicated and may interfere each other. You may loose time while trying to understand why your code acts weird. 

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
  <div class="w3-light-grey">
    <div class="w3-dropdown-hover">
      <button class="w3-button">Register</button>
      <div class="w3-dropdown-content w3-bar-block w3-card-4 w3-padding">
        <input type="text" placeholder="Username" class="w3-input"/>
        <input type="email" placeholder="Email Address" class="w3-input"/>
        <input type="password" placeholder="Password" class="w3-input"/>
        <input type="password" placeholder="Confirm Password" class="w3-input"/>
        <button  class="w3-button">Register Now</button>
      </div>
  </div>
</div>
 </body>
</html>

Upvotes: 0

j3ff
j3ff

Reputation: 6099

I haven't found any reference about px-4 or py-4 class on W3.CSS reference page: https://www.w3schools.com/w3css/w3css_references.asp#padding

I think what you meant to use is w3-padding-small class (or any similar padding class present on the W3.CSS reference page) on the same element as the w3-dropdown-content class.

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-dropdown-hover">
  <button class="w3-button w3-hide-small"><i class="fa fa-user"></i> REGISTER</button>
  <div class="w3-dropdown-content w3-bar-block w3-border w3-padding-small">
    <form autocomplete="off">
      <div class="form-group">
        <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
      </div>
      <div class="form-group">
        <input type="email" name="email" id="email" tabindex="2" class="form-control" placeholder="Email Address" value="">
      </div>
      <div class="form-group">
        <input type="password" name="password" id="password" tabindex="3" class="form-control" placeholder="Password">
      </div>
      <div class="form-group">
        <input type="password" name="confirm-password" id="confirm-password" tabindex="4" class="form-control" placeholder="Confirm Password">
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-xs-6 col-xs-offset-3">
            <input type="submit" name="register-submit" id="register-submit" tabindex="5" class="form-control btn btn-info" value="Register Now">
          </div>
        </div>
      </div>
      <input type="hidden" class="hide" name="token" id="token" value="7c6f19960d63f53fcd05c3e0cbc434c0">
    </form>
  </div>
</div>

Upvotes: 2

Related Questions