Semantic UI Dropdown Login Form

2
votes

I am trying to create a dropdown login form for a website using the Semantic UI framework, and can't figure out if there is a better way to make it. Currently, the form is in an item on the menu, so when you click on it the dropdown menu disappears. This is my code now:

     <div class="ui dropdown">Login
      <div class="dropdown menu">
        <div class="item">
          <form class="ui form">
            <div class="ui stacked segment">
              <div class="ui one column middle aligned very relaxed stackable grid">
                <div class="column">
                  <div class="ui form">
                    <div class="field">
                      <label>Username</label>
                      <div class="ui left icon input">
                        <input placeholder="Username" type="text">
                        <i class="icon-user-tie icon"></i>
                      </div>
                    </div>
                    <div class="field">
                      <label>Password</label>
                      <div class="ui left icon input">
                  <input placeholder="Password" type="password">
                  <i class="icon-lock icon"></i>
                </div>
              </div>
              <div class="ui blue submit button">Login</div>
            </div>
          </div>
        </div>
      </div>

          </form>
        </div>
      </div>
    </div>

Is there another way to add the form to the dropdown without making it an actual item on the dropdown menu? Thanks!

2
htmldrop-down-menusemantic-ui
I would like to do the same. Did you find any solution? - Nanego
@Nanego unfortunately still have not. - Alex Meza
I found this answer stackoverflow.com/questions/25265519/… But I don't know how / where to use it. - Nanego

2 Answers

0
votes

I was having the same problem... Here's my solution

<div class="ui teal buttons">
    <div class="ui button">Login</div>
    <div class="ui floating dropdown icon button">
        <i class="dropdown icon"></i>

        <div id="login-form" class="menu">
            <div class="ui basic segment">
                <form class="ui form">
                    <div class="field">
                        <input type="text" name="username" placeholder="Username">
                    </div>
                    <div class="field">
                        <input type="password" name="password" placeholder="Password">
                    </div>
                    <div class="item fluid">
                        <button class="ui fluid button" type="submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>

I then styled the login-form to have width 300px, otherwise it matches the width of the inputs.

0
votes

Struggled with the same problem. Thanks to @MA206 and I make some improvement on his solution.

I think the key is that a menu must have a item, and the form should not be the item. So I think using another virtual item may help.

<div class="item"></div>

Nevertheless, to achieve a perfect dropdown login form, there are some other problems. It seems not display responsively expectedly. I don't know how to solve that.

This is my solution:

$(function() {
  $('.ui.dropdown').dropdown();
  $('form#signIn').form({
    fields: {
      userID: {
        identifier: 'userID',
        rules: [{
          type: 'empty',
          prompt: 'Please enter your username.'
        }, {
          type: 'regExp',
          value: /^[a-z0-9\_]+$/i,
          prompt: `You must only use 'a'-'z','A'-'Z','0'-'9','_'
for your username.`
        }]
      },
      password: {
        identifier: 'password',
        rules: [{
          type: 'minLength[6]',
          prompt: 'Your password must be at least 6 characters.'
        }, {
          type: 'regExp',
          value: /^[a-z0-9\_\@\.]+$/i,
          prompt: `You must only use 'a'-'z','A'-'Z','0'-'9','_','@','.'
for your password.`
        }]
      }
    }
  });
  $('form#signIn input').keydown(function(e) {
    if (e.which == 13) {
      $('form#signIn').submit();
      return false;
    }
  });
});
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.js"></script>
</head>

<body>
  <div class="ui top fixed borderless compact massive stackable menu" style="display: flex">
    <div class="ui container">
      <div class="ui search white disabled fluid item" style="flex-grow:1;">
        <div class="ui transparent icon input">
          <input class="prompt" type="text" placeholder="Search books...">
          <i class="search link icon"></i>
        </div>
        <div class="results"></div>
      </div>

      <div class="right menu">
        <div class="ui dropdown item">
          <div>
            <i class="sign in icon"></i>
            <span class="text">Sign in</span>
          </div>

          <div class="menu">
            <form id="signIn" class="ui form" action="/signIn" method="post">
              <div class="ui stacked segment">
                <div class="field">
                  <div class="ui left icon input">
                    <i class="user icon"></i>
                    <input type="text" name="userID" placeholder="Username" maxlength="16">
                  </div>
                </div>

                <div class="field">
                  <div class="ui left icon input">
                    <i class="lock icon"></i>
                    <input type="password" name="password" placeholder="Password" maxlength="24">
                  </div>
                </div>

                <div class="ui fluid submit button">Sign in</div>

                <div class="ui error message"></div>
              </div>
            </form>

            <span class="item"></span>
          </div>
        </div>

        <a class="item">
          <i class="user plus icon"></i>
          <span class="text">Sign up</span>
        </a>
      </div>
    </div>
  </div>
</body>