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

Unpredictable Redirection when URL is Clicked using PHP or Javascript

Looking to send users to a random URL from a specific list? For instance: With 3 URLs available - Google.com, Facebook.com, and Yahoo.com <a href="<?php $sites[array_rand($sites)] ?>">Click here</a> Upon clicking the link, users will ...

Error: Unable to locate module 'next/font/google/target.css'

After setting up Next.js version 14.0.1 on Node.Js v20.9.0 and Ubuntu 20.04, I encountered an error right from the start. Failed to compile /var/www/html/C#/nextApp/app/layout.js Module not found: Can't resolve 'next/font/google/target.css?{&quo ...

What is the best way to toggle the visibility of a side navigation panel using AngularJS?

For my project, I utilized ng-include to insert HTML content. Within the included HTML, there is a side navigation panel that I only want to display in one specific HTML file and not in another. How can I achieve this? This is what I included: <div ng ...

Extracting information from a table containing both obscured and accessible rows

Currently, I am attempting to scrape data from this specific website by utilizing Selenium. While my code successfully loads the desired table, I encounter challenges when trying to extract data from hidden rows, even though the information is visibly pres ...

Tips for setting the tabindex on an element that has an opacity of 0

I have created a drag and drop image upload field with a hidden input element to style the upload button according to the design. However, I am concerned about accessibility and want the upload functionality to trigger when the user presses 'Enter&apo ...

Utilizing Django fixtures: Importing HTML content as JSON into a Text Field

Currently in the process of transitioning my website to Django from another content management system, I am facing challenges with importing HTML into Django using fixtures. The specific issue revolves around "Events", which is a model within my Django app ...

When attempting to connect to the MongoDB cloud, an unexpected error arises that was not present in previous attempts

npm start > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="650800170b4816001713001725544b554b55">[email protected]</a> start > nodemon index.js [nodemon] 3.0.2 [nodemon] to restart at any time, enter ...

The XMLHttpRequest function successfully logs data in the console, but does not return the data within the function itself

I find it puzzling that the console.log statement at the end of the code snippet displays the data as expected, while the return optiondata line does not. function populate_selectbox() { var ajaxRequest; try { // Opera 8.0+, Firefox, S ...

The incorrect date selection made by the Datepicker feature in the Vue / Buefy component

Currently, I am utilizing Vue / Buefy as a datepicker in the form on a specific page (2nd step). You can find the page here: An issue has arisen where the date of birth input is sometimes recorded inaccurately. For instance, the user selects June 5th, 197 ...

The input field malfunctioned after the clear button was pressed

Hi there, I have a question. Every time I try to click on the clear button, it keeps giving me an error message and I'm not sure what the issue is. Also, I can't type in the field anymore after clicking it. methods: { add () { this.ta ...

Learn the steps to retrieve a user's profile picture using the Microsoft Graph API and showcase it in a React application

I'm currently working on accessing the user's profile picture through Microsoft's Graph API. The code snippet below demonstrates how I am trying to obtain the profile image: export async function fetchProfilePhoto() { const accessToken = a ...

What is the best way to showcase every user on my webpage using HTML?

After running this code snippet in my python terminal, I was able to see the desired output: views.py from django.contrib.auth.models import User userList = User.objects.all() print(userList) The above code produces the following result in the terminal: ...

Make the text area occupy the full width of the remaining screen space

I've been struggling to make the text area fill the remaining width of the screen. Everything is set up nicely, but I just can't seem to find a solution to get it to expand and occupy the rest of the available space. I intentionally refrained fr ...

Should I specify each protected route in the middleware file in the matcher for NextJs 14?

Below is the middleware file I've implemented: import { NextResponse } from "next/server"; import { NextRequest } from "next/server"; import { getApiAuth } from "./app/middleware/api/auth"; const validateApi = (req: Requ ...

Material UI Appbar is throwing an error with an invalid hook call

For my project, I needed to create a simple app bar, so I decided to use the code provided on the Material UI website. Here is the component's code that I used: import React from 'react'; import { fade, makeStyles } from '@material-ui/c ...

Keep moving forward in Sailsjs even after sending back a response with res.json();

It will keep running even if the condition is met and the code inside return res.json() gets executed. _.each(rooms, function(room){ if(room.users.length == users.length) { return res.json(room); // <-- returns but execution continues } ...

Efficiently updating database records without the need for page reloads using EJS

I'm working on a project that resembles the comment section on Reddit. Users can leave comments and others can reply to those comments. My tech stack includes Node, Express, MySQL, and EJS. The issue I'm facing is implementing the upvote/downvo ...

As I embarked on my journey into node.js, I encountered some stumbling blocks in the form of errors - specifically, "Uncaught ReferenceError: module is not defined"

Embarking on my Node.js journey, I am delving into the world of modules. After ensuring that both node and npm are correctly installed, I will share the code below to provide insight into the issue at hand. Within my project, I have two JavaScript files - ...

Learn how to dynamically change a class name with JavaScript to alter the color of a navbar icon

I have little experience with javascript, but I want to make a change to my navbar icon. Currently, my navbar has a black background with a white navbar icon. As I scroll the page, the navbar background changes to white and the font color changes to black. ...

Ways to deactivate just the Clicked button in a mapped over component

Utilizing the request variable, I am displaying an array of objects on the page. Each object in the array contains properties such as question, correct_answer, and incorrect_answer. Moreover, I have implemented a state called disable which toggles between ...