Semantic-UI-CSS icon indicating copy to clipboard operation
Semantic-UI-CSS copied to clipboard

Vertical Divider goes above other div elements

Open tetiolaw opened this issue 10 years ago • 0 comments

This is a meteor plain html file. I've copied the example available in the Semantic-Ui tutorial and the vertical divider goes above the top attached label and the bottom attached label, which is not the correct behaviour

<head>
  <title>testUiGrid</title>
</head>

<body>

  {{> hello}}
</body>

<template name="hello">
  <div class="html ui top attached segment">
    <div class="ui top attached label">You've pressed the button {{counter}} times.</div>
    <div class="ui two column middle aligned relaxed fitted stackable grid">
      <div class="column">
        <div class="ui form segment">
          <div class="field">
            <label>Username</label>
            <div class="ui left icon input">
              <input type="text" placeholder="Username"><i class="user icon"></i>
            </div>
          </div>
          <div class="field">
            <label>Password</label>
            <div class="ui left icon input"><input type="password"><i class="lock icon"></i></div>
          </div>
          <div class="ui blue submit button">Login</div>
        </div>
      </div>
      <div class="ui vertical divider">Or</div>
      <div class="center aligned column">
        <div class="huge green ui labeled icon button"><i class="signup icon"></i>Sign Up</div>
      </div>
    </div>    
    <div class="ui bottom attached label">You've pressed the button {{counter}} times.</div>
  </div>
</template>

tetiolaw avatar Apr 18 '15 06:04 tetiolaw