Looking to integrate the date, month, and year selection tags into the inline format

The Edit User Profile page includes a Birthday field, which is currently displayed vertically.

I am looking to change the layout so that the Birthday field appears horizontally. Here is the code I am using:

Within visitors/edit.html.erb,

<%= simple_form_for([@user],:url => visitor_path(@user), method: :put, :class => 'form form-horizontal') do |f| %>
  <%= f.label :birthday %>      
  <div class="form-group">
    <div class="col-sm-2">
      <%= birthday_field_for(f, end_year: Date.today.year) %>
    </div>
  </div>
<% end %>

Within application_helper.rb,

def birthday_field_for(form,options={})
  date_field_for(form,:birthday,options.reverse_merge!(start_year: Date.today.year - 90, end_year: Date.today.year - 13))
end

def date_field_for(form,field,options={})
  form.date_select(field, options.reverse_merge!(order: [:day, :month, :year],
                                               include_blank: true))
end

I would appreciate assistance with the CSS styling for this task.

Answer №1

Thank you to everyone who provided an answer!

The select containers were originally set to a width of 100%, causing the next select tab to appear on a new line.

By adding a CSS code snippet in visitors/edit.html.erb, I was able to solve my issue,

<% content_for :head_css do %>
  <style type="text/css">
    .select2-container {
      width: 120px !important;
    }
  </style>
<% end %>

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

Swap out the image backdrop by utilizing the forward and backward buttons

I am currently working on developing a Character Selection feature for Airconsole. I had the idea of implementing this using a Jquery method similar to a Gallery. In order to achieve this, I require a previous button, a next button, and the character disp ...

I need to verify that the input type for time is valid, starting from today's date and extending beyond the current

<input type="date" onChange={(e)=>setDate(e.target.value)}/> <input type="time" onChange={(e)=>setTime(e.target.value)} /> If the selected date is after today and the time is after the current time, display a valida ...

Creating a function within document.ready using jQuery is a common practice for ensuring that

I am currently working on creating a straightforward function that will replace an attribute when called using onclick="changeYoutube('XXXXXX');" within a link tag. However, I am encountering an issue where it says calling "changeYoutube" is resu ...

The jQuery ajax function functions flawlessly on a local environment, but encounters issues when used on a

After spending the entire day researching this issue, it appears to be a common problem without a solution in sight. The challenge I am facing involves using jquery's $.ajax() function to update database values through a service call. While it works ...

Using identical CSS styles across various classes in material UI

Three classes have been defined with identical CSS properties. const useStyles = makeStyles((theme) => ({ classA: { color: 'green' }, classB: { color: 'green' }, classC: { color: 'green' } }) Is there a way to combin ...

Error: Attempted to access 'embed' before it was initialized (hi)

module.exports = { name: "slowmode", description: "Set the slowmode of a channel.", execute(message, args, Discord) { if(!message.member.hasPermission("ADMINISTRATOR")) { return message.reply(&q ...

Tips for fixing alignment problems using CSS

I am experiencing a problem where I am unable to figure out how to align the content in one column with text positioned next to it in a right-aligned format. /* Personal Details */ .personal-info { width: 90%; padding: 25px; border-bottom: 1px so ...

Steps to indicate a cucumber test as incomplete using a callback function in a node environment

Can a cucumber test in Node be flagged as pending to prevent automated test failures while still specifying upcoming features? module.exports = function() { this.Given(/^Scenario for an upcoming feature$/, function(callback) { callback(); } ...

The height of the browser action will not return to its original state

I'm currently working on an extension that provides responses based on user text input. However, I'm running into an issue where the height of the browser action won't reset properly. I've tried various methods to fix this problem, in ...

Check off all checkboxes and send their values to an AJAX script using a table

I currently have a table set up with checkboxes in the first column. By checking these boxes, an AJAX script is triggered that updates a PHP session variable with the selected values. This functionality is working smoothly. However, I am now looking to enh ...

Adding dropdown values to text area

I'm encountering a simple issue. My goal is to allow users to select values from a dropdown menu and have those values added to a text area. Additionally, users should be able to input extra content in the text area. Here's what I want: the user ...

There are errors occurring in the getter I created within the vuex store.js file

Currently utilizing vuejs, vuex, and vuetify. Within this project there are 3 files in play and I will share the key sections here. The main objective is to showcase data associated with the route parameter. Despite my attempts in Product.vue as shown bel ...

Creating aesthetically pleasing and uniform rows of responsive Bootstrap 4 cards with consistent heights

I'm a beginner in the world of design and Bootstrap, so please be patient with me. My goal is to create a series of cards that have equal height and width (responsive, not fixed) in each row. In other words, I want all the cards to be as tall and wid ...

What is the best way to implement a dialog box that displays a website within it, all while keeping my SharePoint site running in the background?

For a while now, I've been working on SharePoint Online and trying to troubleshoot an issue without success. That's why I'm considering starting over with a specific section of my SP site from scratch. My current project involves creating a ...

Shipment calculation involves the consideration of factors such as the quantity,

Hello, my name is Mirella and I am from Italy. Please bear with me as I communicate through Google Translate. I am facing some issues with shipping costs while using Simplecart. My customers have varying shipping costs based on the items they purchase. T ...

A step-by-step guide on revealing a complete div upon selection

Can anyone assist me in showing a div with a form inside it whenever a specific option is selected from a tag? Here is the code I currently have: <script type="text/javascript"> $(function() { $('#contactOptionSelect&apo ...

NodeJS allows for seamless uploading of files

I'm encountering difficulties when trying to upload a file using nodeJS and Angular. I've come across some solutions, but they all involve Ajax which is unfamiliar territory for me. Is there a way to achieve this without using Ajax? Whenever I ...

Experiencing difficulty in retrieving the title of the latest post

In my current Wordpress project, I'm facing an issue where a link is supposed to play a wav file based on the title of the post. For example, if the post title is 'one', then it should play one.wav from the uploads folder. However, the sound ...

The containerElement is not compatible for routing when using a menuItem in React JS

Greetings, I am fairly new to working with React.js and I am currently exploring how to implement routing using material-ui MenuItem. However, I seem to be encountering some difficulties when trying to utilize the ContainerElement feature upon clicking on ...

An error occurred during conversion: trying to convert an object to an array

After reading numerous articles about this issue and trying multiple solutions, I am still unable to resolve it! I have been stuck with this error for the past 3 days and I'm hoping someone can assist me. Thank you in advance for any help! My situati ...