Enhance your Razor Pages with Bootstrap 5's floating control for input groups featuring buttons and datetime pickers

I don't have expertise in Bootstrap or CSS. I'm attempting to build an input for DateTime with arrows on the sides using Bootstrap 5 and Razor Pages. My initial tries did not yield satisfactory results.

I want an ItemGroup that includes a DateTime picker and a button on the left with an "arrow". The examples I tried resulted in:

<div class="input-group mb-3">
  <div class="input-group-prepend">
   <button class="btn btn-outline-secondary" type="button"><</button>
  </div>
  <div class="form-floating">
   <input class="form-control" asp-for="startTime" asp-format="{0:yyyy-MM-ddTHH:mm}" />
   <label for="startTime">Start Time</label>
  </div>
</div>

resulting in:

https://i.sstatic.net/f89AW.png

It would be ideal if the button had the same height as the form-floating div.

or Example2:

<div class="form-floating">
  <div class="form-control" id="datetime_wrap">
   <div class="input-group mb-3">
    <div class="input-group-prepend">
     <button class="btn btn-outline-secondary" type="button"><</button>
    </div>
    <input class="form-control" asp-for="startTime" asp-format="{0:yyyy-MM-ddTHH:mm}" />
   </div>
  </div>
  <label for="datetime_wrap">Start Time</label>
</div>

resulting in:

https://i.sstatic.net/3uYZB.png

The second approach seems closer to what I want to achieve, but the bounding box of the floating div should not intersect with the input box.

Question: Can I achieve this using only vanilla bootstrap, or do I need to use a separate CSS class to resolve this issue?

Answer №1

For more information on input groups in Bootstrap, it's recommended to refer to the Bootstrap documentation on input groups

It's worth noting that the .input-group-prepend wrapper is not necessary. By removing it, the functionality should work correctly. Interestingly, the term "prepend" is not mentioned in the input groups documentation, so it might have been from an older version of Bootstrap.

Furthermore, you may find the floating labels documentation helpful. Make sure to switch the order of the <input> and <label> elements, and include a placeholder attribute for the desired animation effect.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f99b96968d8a8d8b9889b9ccd7cad7c9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="583a37372c2b2c2a3928186d766b7668">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

<div class="container mt-3">

  <div class="input-group mb-3">
    <button class="btn btn-outline-secondary" type="button">&lt;</button>
    <div class="form-floating">
      <input type="text" class="form-control" id="startTime" asp-for="startTime" asp-format="{0:yyyy-MM-ddTHH:mm}" placeholder="yyyy-MM-ddTHH">
      <label for="startTime">Start Time</label>
    </div>
  </div>

</div>

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 arranging images in a horizontal layout using FlatList in React Native

Is there a way to display feed images horizontally instead of vertically in FlatList? I've tried wrapping the images in a view with flex-direction set to row, as well as adding horizontal={true} to the FlatList, but nothing seems to work. Any suggesti ...

Acquiring HTML form data using JavaScript

Although it may seem trivial, I'm facing a challenge. I have an HTML form that is dynamically generated by JavaScript and populated with initial data fetched from the server. The form is displayed correctly with the pre-filled data. My goal is to allo ...

Express Node + Styling with CSS

I am in need of a single EJS file (configuration includes Express and Request). app.get('/space', function(req, res){ res.render('space.ejs'); }); The file successfully renders, but only two out of three CSS stylesheet links work ...

Why won't hover over function properly in separate divs for two items?

My goal is to show text when hovering over a logo, but the text and logo are in different divs. Despite trying various solutions like using display: none and display: block, I still can't get it to work. import styles from '../styles/Float.module ...

Tips on customizing the CSS responsiveness of your Bootstrap carousel

I have recently installed a Bootstrap theme on my Wordpress site and I am trying to make some CSS adjustments. One issue I am facing is with the carousel. Currently, when I resize the website or view it on a mobile device... The carousel maintains a lar ...

jquery is unable to fetch the input value from a dynamically generated field inside a function

Something peculiar keeps happening to me when I utilize jQuery, which is different from what others have encountered in the forums. Whenever I make an ajax call and generate an input element (on success), like so: Start Date: <input type="text" id="gr ...

employing the display flex property triggers the emergence of a lavender border

This is an example of a basic HTML structure: <section id="teasers"> <div class="wrapper"> <a href=""> <div class="redbox"> <h2 class="two-lines uppercaseme lowercaseme"> ...

Does MySQL Workbench automatically convert camel case attributes?

I'm curious to understand something. I defined an attribute called userId, but in MySQL Workbench it shows up as user_id. Is this usual? @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name= "userId") private ...

Having issues with the <ul> tag not displaying correctly

I'm currently working on implementing a side navbar for my website, but I've run into an issue with spacing. In the demo linked in my fiddle, you'll notice that the <ul> element inside the receiptDropDown class doesn't push the k ...

Focus border radius for anchor tag image

I am trying to implement the following CSS: .sky:focus {border-radius: 25px; border: #000 solid 1px; outline: none} And my HTML looks like this: <a class='sky' href='#'><img src='cloud.jpg'></a> I want a 25 ...

Struggling to modify CSS properties for :before and :after pseudo-elements?

My current styling looks like this: section.tipos .content > div:before { background: none repeat scroll 0 0 #DDDDDD; content: " "; height: 10px; left: 32%; position: absolute; top: -10px; width: 10px; } It's working p ...

The module 'myapp' with the dependency 'chart.js' could not be loaded due to an uncaught error: [$injector:modulerr]

Just starting out with Angular.JS and looking to create a chart using chart.js I've successfully installed chart.js with npm install angular-chart.js --save .state('index.dashboard', { url: "/dashboard", templateUrl ...

Creating a dynamic linear gradient background color using Angular 2 binding

Using static values works perfectly <div style="background: linear-gradient(to right, #0000FF 0%, #0000FF 50%, #FFA500 50%, #FFA500 100%);"></div> in my TypeScript file. this.blueColor = '#0000FF'; this.orangColor = '#FFA500&a ...

Explore various SVG paths by hovering to reveal or conceal different divs

Hi there, I'll do my best to explain clearly. If this question has already been asked, I apologize as I couldn't find an answer when searching. I've used SVG to create a map on my HTML webpage and it's looking great. I also have hidden ...

What causes the discrepancy in CSS behavior between local and remote websites?

My chrome extension enhances facebook chatbox with jquery autocompletion. I am trying to make the suggestion list menu horizontal by modifying the jquery-ui.css. When changing display:block to display:inline, the list becomes horizontal in a local HTML fil ...

"Exploring the Functionality of Page Scrolling with

Utilizing Codeigniter / PHP along with this Bootstrap template. The template comes with a feature that allows for page scrolling on the homepage. I have a header.php template set up to display the main navigation across all pages. This is the code for th ...

Issues arise with form submissions when attempting to implement them through jQuery

When submitting a form, I am using jQuery to set the action dynamically. Below is the HTML code: <form name="frmSearchTops" id="frmSearchTops" method="post" onsubmit="searchitem();"> <select name="cboCityNameRes" id="cboCityNameRes"> ...

create a function that automatically assigns colors to table fields based on their values

I have a table that dynamically displays a field with the id complaint_status, which can have values of "PENDING" or "CLEARED". I need help to set different background colors for the field based on these values: GREEN for CLEARED RED for PENDING Is the ...

Is it possible to conceal the status bar in a web app designed for iOS 7?

Currently working on a project that involves creating an "add to home screen" game. I am looking for a way to hide the status bar completely, including the time and battery indicators. I know it is possible to change the color of the status bar, but can it ...

Clarity of visual in a lattice

I'm encountering a small issue with my ExtJS 4.2 MVC application that involves grid and image transparency. Below is a snippet of my grid setup: Ext.define('XProject.view.message.inbox.Grid', { extend: 'Ext.grid.Panel', al ...