CODEWITHSUNDEEP
cssruby-on-railssimple-form
CHarris
CHarris

Reputation: 2793

trying to display elements on the same line

here's what I'm trying to do - I want 'Forgot your password?' to appear on the same line as 'Remember me', like in the image. I'm using the simple_form gem, and it's really messing things up - I mean, normally I'd put 'display:inline' in my 'forget your password' div , or I'd make it into a span, and it would show up ok, I'm sure, but not in this case. Thanks for any help!

enter image description here

Here's my code:

<div class='sign-in-section'>

          <%= simple_form_for(User.new, :as => :user, :url => session_path(:user), :html => {}) do |f| %>

            <div class="inputs">
    <%= f.input_field :email, :required => false, :autofocus => true, :placeholder => I18n.t('sign_in.email_address_placeholder') %>
              <br/>
              <%= f.input_field :password, :required => false,  :placeholder => I18n.t('sign_in.password_placeholder') %>
              <%= f.input :remember_me, :as => :boolean, :label => false, :inline_label => 'Remember me' %>
              <div class='links'>
              <%= link_to I18n.t('sign_in.forgot_password'), new_user_password_path %>
              </div>
            </div>

   </br>
   <span class="actions"><%= f.button :submit, I18n.t('sign_in.sign_in_button'), :class => 'btn btn-primary' %>

              <%= link_to I18n.t('sign_in.sign_up_button'), new_user_registration_path, :class => "btn btn-warning" %>

          <% end %>
        </span>

    </div>

And my links div css is this (maybe there's a way with simple_form I don't even need the div in there?):

.sign-in-section .links {
    display:inline;
}

Upvotes: 1

Views: 6355

Answers (6)

CHarris
CHarris

Reputation: 2793

thanks for all your help. They put me on the right track; some answers were updated while I was working on my solution based on what you said, so cheers for the time and effort. With some of your solutions I got the 'forgot password?' on the right, ok, but it was below-right of 'Remember me'.

The solution I used was adding a new div for 'remember me', and then another div for 'Forgot password?', like so:

      <div class='links1'>
      <%= f.input :remember_me, :as => :boolean, :label => false, :inline_label => 'Remember me' %>
      </div>
      <div class='links'>
      <%= link_to I18n.t('sign_in.forgot_password'), new_user_password_path %>
      </div>

And in my css:

.links1 {
  float:left;
}

.links {
  float:right;
}

For some reason it was throwing my 'log in' and 'sign up' buttons out of place, but I changed my <span class> to a <div class>, and it looked ok again.

So simple when you see it done!

Upvotes: 1

Ashis Kumar
Ashis Kumar

Reputation: 6544

You can make the link to float on right side.

.sign-in-section .links {
    display:inline;
    float: right;
}

If this puts the link below the Remember me, then you need to make a re-ordering of the html elements as like 

<div class="inputs">
    <%= f.input_field :email, :required => false, :autofocus => true, :placeholder => I18n.t('sign_in.email_address_placeholder') %>
    <br/>
    <div class='links'>
        <%= link_to I18n.t('sign_in.forgot_password'), new_user_password_path %>
    </div>
    <%= f.input_field :password, :required => false,  :placeholder => I18n.t('sign_in.password_placeholder') %>
    <%= f.input :remember_me, :as => :boolean, :label => false, :inline_label => 'Remember me' %>

</div>

Hope it helps you.

Upvotes: 3

collapsar
collapsar

Reputation: 17238

the div element which wraps the 'forgotten password' link is rendered as a block-elment. you can override this with a css property:

<div class='links' style='display:inline;'>
<%= link_to I18n.t('sign_in.forgot_password'), new_user_password_path %>
</div>

think about adding the property to a css style for class 'links' or to define another css class, eg. 'inlined'.

Upvotes: 0

alireza
alireza

Reputation: 507

use display:inline; for remember me input too or use float:left; and float:right;

Upvotes: 0

Bachan Smruty
Bachan Smruty

Reputation: 5734

It is just a guess.

.sign-in-section .links {
    width: 350px;
    float: right;
}

You need to modify the width px.

Upvotes: 0

Sujata Chanda
Sujata Chanda

Reputation: 3395

Try this:-

.sign-in-section .links,
.sign-in-section .inputs  {
    display:inline;
}

.sign-in-section .links  {
   float: right;
}

Upvotes: 0

Related Questions