Search code examples
jqueryhtmlsemantic-ui

Login fields not properly aligned inside modal in semantic ui

I am a beginner in Semantic UI and trying to develop a login form. I want login form in modal, but the login fields are not getting aligned properly and the modal dialog size is very large. Please suggest fixes to improve look of the login form.

HTML code:-
<a class="item agenda-item" id="test">  
    <span class="side-agenda-item"> <i class="bug icon"></i> File a Bug</span>
    <div class="ui modal test">
       <div class="ui input">
        <input type="text" name="email" placeholder="E-mail address">
       </div>
       <br>
        <div class="ui input">
        <input type="password" name="password" placeholder="Password">
        </div>
        <br>
        <button class="ui primary button">Login</button>
      <br>
    </div>
  </a>

<script>
    $(function(){
      $("#test").click(function(){
        $(".test").modal('show');
      });
      $(".test").modal({
        closable: true
      });
    });
      </script>

Current login form:

Current login form

Solution

  • This CSS should fix the problem.

    div.ui.input {
   width: 100%;
}
div.ui.input input {
    display: block;
    margin: 0 auto !important;
    float: none;
}