striving to showcase components in a horizontal layout

My goal is to have 'Forgot your password?' appear on the same line as 'Remember me', similar to the image. I am using the simple_form gem, but it's causing some issues. Normally, I would use 'display: inline' in my 'forgot your password' div or convert it to a span, which usually works fine. However, in this case, it's not working as expected. Any help would be greatly appreciated!

Below is the code I am working with:

<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>

The CSS for my links div is as follows (I'm wondering if there might be a better way to handle this within simple_form without the need for the div):

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

Answer №1

If you want the link to appear on the right side, you can use the following CSS:

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

If this causes the link to be positioned below the "Remember me" text, you may need to rearrange the HTML elements like so:

<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>

I hope this solution works for you.

Answer №2

I wanted to express my gratitude for all the assistance you provided. Your guidance set me on the right path; some of the answers were modified as I worked on my solution based on your advice, so I appreciate the time and effort you put in. With your suggestions, I managed to align the 'forgot password?' option correctly, although it initially appeared below and to the right of 'Remember me'.

The method I followed involved creating separate div elements for 'Remember me' and 'Forgot password?', as shown below:

<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>

I also made corresponding changes in my CSS stylesheet:

.links1 {
  float:left;
}

.links {
  float:right;
}

Initially, this adjustment caused my 'log in' and 'sign up' buttons to be misplaced. However, switching from <span class> to <div class> resolved the issue and restored the alignment.

It's always remarkable how simple solutions can become apparent once you see them executed!

Answer №3

Check out this recommendation:-

.log-in-container .links,
.log-in-container .fields  {
    display:inline;
}

.log-in-container .links  {
   float: right;
}

Answer №4

This is purely an estimation.

.login-area .hyperlinks {
    width: 350px;
    float: right;
}

Adjust the width measurement in pixels.

Answer №5

To ensure the remember me input is displayed inline, you can utilize the display:inline; property. Alternatively, you can achieve the desired layout by using float:left; and float:right;.

Answer №6

The wrapping div element for the 'forgot password' link is currently displaying as a block element. To change this, you can apply a CSS property:

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

Consider adding this property to a CSS class for 'links' or creating a new class like 'inlined'.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for formatting JSON using jQuery

Imagine my JSON data with 3 different sets of information: [ { "Pair":"", "Id":"8ca2df56-2523-4bc3-a648-61ec4debcaaf", "PubDate":"/Date(1463775846000)/", "Provider":null, "Market":"" }, { "Pair":"", ...

Parsing all HTML elements using Nokogiri

I've been searching everywhere and all I could find was how to use CSS selection with Nokogiri. What I really need is to completely remove all HTML tags. For instance, this: <html> <head><title>My webpage</title></head& ...

Looking for a solution to align the header properly in your React app?

Struggling with aligning a header? The CSS property of the header is inherited from the app's CSS file. For example, in the image below, "Our Mission" is the header that needs to be left-aligned. Looking for some assistance here. You can find the app. ...

CSS styling not rendering consistently across various web browsers

Hey everyone! I've encountered an issue with my webpage. Feel free to check out the code on my CodePen here. When I view this page on Safari, everything looks perfect. However, when I switch over to Chrome or Firefox, the layout is all messed up. Ele ...

Achieving and maintaining the center alignment of a horizontal dropdown menu

Struggling with creating a fixed, 100% width nav bar that stays centered when the page is resized? The drop down menu headings are causing issues as they seem to float left instead of staying centered. Not sure how to fix it? Take a look at the live resul ...

CSS: Adjusting the vertical alignment of numbers in an ordered list

Hey there, I have a question about the vertical alignment of numbering in an ordered list. It seems that the numbers are being pushed to the baseline when <li> elements contain floated divs only. Is there any way to prevent this and have the numbers ...

Is it possible that CSS files are not being excluded from content scripts in manifest.json?

I am looking to create a chrome extension that enforces a specific CSS style on all websites except for Gmail. However, I am facing an issue where the code in the content scripts section of the manifest.json file is not working as expected. Even though I h ...

I am currently working on incorporating dropdown menus using Bootstrap 5 in my project

<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="/dropdownmenus/contenido/5.company.html" id="navbarDropdownCompany" role="button" data-bs-toggle="dropdown" aria ...

Are background images covering hidden text detrimental to accessibility?

Is there a way to display images of text instead of actual text for my menu? I have implemented spans within each menu link. These spans have specific dimensions, block display properties, the text is indented to be hidden, and the background image is set ...

Create a sleek 2-column design featuring a bonus scroll bar exclusively using CSS styling

In my current project, I have a unique challenge. I am working with a list of flattened div elements and unfortunately, I am unable to edit the HTML markup to add any structures. The first div in the list is quite long, and I would like to place it in a se ...

Using CSS to resize an element with both dimensions while maintaining its

Is it feasible to preserve a 1:1 aspect ratio on a div element using the CSS resize property? This particular illustration lacks an aspect ratio. Do you have any recommendations? ...

Creating a sleek CSS drop-down navigation menu

I seem to be facing an issue with the side navigation drop down menu. Below are the link and CSS code: <nav id="nav"> <div class="menu-main_nav-container"><ul id="menu-main_nav" class="menu"><li id="menu-item-270" class="menu-it ...

Ways to conceal Bootstrap-designed elements behind a fullscreen overlay

I'm attempting to create a transparent layer to conceal the entire content of my page behind it. It works fine without the Bootstrap columns, but as soon as I add the columns for responsive design, it stops working (or maybe I'm just not understa ...

Event handler for the MouseLeave event is not successfully triggering when dealing with anchor

When viewing a link to a Codepen, the issue is most noticeable in Chrome: https://codepen.io/pkroupoderov/pen/jdRowv Sometimes, the mouseLeave event fails to trigger when a user quickly moves the cursor over multiple images, resulting in some images reta ...

Troubleshooting: CSS causing images to not show up on

Struggling with a CSS issue, I can't seem to solve it. My images are not showing up on the webpage even though the URLs are correct and the HTML is properly written. There is no specific styling applied to the images, and the only styling for the ima ...

What is the best way to use jQuery to update the color of an SVG shape?

Hello everyone! I'm excited to be a part of this community and looking forward to contributing in the future. But first, I could really use some assistance with what seems like a simple task! My focus has always been on web design, particularly HTML ...

What is the best way to replace a CSS Background that is already marked as important?

Attempting to change the background of a website using Stylish, but encountering issues. The existing background css on the website includes an !important rule which is preventing Stylish from taking effect. Here is my code: body { background-image: n ...

The code seems to be malfunctioning in a separate JS file, but oddly enough, it functions properly when placed within a <script> tag

I am trying to create a loader, but I have encountered an issue where the script works when placed directly in the HTML file, but not when it is in a separate JavaScript file. Here is the script: var loader = document.getElementById("ld"); w ...

CSS - Struggling to center an element with absolute positioning in IE

I have created a layout with 3 div elements. The first parent div has a css property of position relative and is taking up the full width of the viewport. The second child div has an absolute position to cover the entire area of the parent. The third child ...

Tips for dynamically displaying images in both horizontal and vertical orientations

I would like to showcase images in the imageList. Here is what I want: AB CD How can this be achieved? It's not a matter of being even or odd Perhaps the list could look something like this: ABCDE FG I simply want a new row or display:block when ...