I am trying to replicate this unique select style using bootstrap v5.3
After exploring the options provided by bootstrap,
I have not found any select component that allows details within the <options> tag.
If it is not possible with bootstrap, I may need to design a custom select as the following attempt resulted in inline display:
<select>
<option>
Option 1 <br />
Created At: date...
</option>
</select>
Shout out to @Yogi for suggesting the bootstrap dropdown as an alternative recommendation.
By utilizing bootstrap Dropdown and jquery, I successfully recreated the select functionality in my initial question :)
$(document).ready(function (e) {
$('.dropdown-menu a').on('click', function () {
var selectedOption = $(this).attr("data-value");
$('#accessListOptions').val(selectedOption);
$('.dropdown-item').removeClass('active');
$(this).addClass('active');
});
});.dropdown-toggle {
cursor: pointer;
}
.dropdown-menu {
width: 100%;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e6c61617a7d7a7c6f7e4e3b203d203d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="096b66667d7a7d7b6879493c273a273a">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="mb-3">
<div class="dropdown">
<label for="access_list">Access List</label>
<input type="text" class="form-control dropdown-toggle" id="accessListOptions" placeholder="Select an option"
value="Publicly Accessible" data-bs-toggle="dropdown" aria-expanded="false" readonly />
<ul class="dropdown-menu" aria-labelledby="accessListOptions">
<li>
<a class="dropdown-item active" href="javascript:void(0);" data-value="Publicly Accessible">
<i class="fa-solid fa-lock-open" style="color:gold;"></i> Publicly Accessible <br />
<span class="text-muted" style="font-size:12px;">No Access Restrictions</span>
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);" data-value="Internal Service">
<i class="fa-solid fa-lock" style="color:red;"></i> Internal Service <br />
<span class="text-muted" style="font-size:12px;">0 Users, 2 Rules - Created: 28 May 2022, 06:14 AM</span>
</a>
</li>
</ul>
</div>
</div>Currently, I am in the process of mastering React and developing a small online electronic store. Within my project, there is a tab labeled "View Store". My goal is for a small, hidden column to appear when a user clicks on this tab, revealing text or imag ...
<html> <body> <form action="database.php" method="post"> Name : <input type ="text" name = "Name"/> Number :<input type ="text" name = "Number"/> <input type ="submit" value = "submit" name="submit" ...
Within my django application, I have designed a page featuring a button that controls the operation of a clock. Initially, the page displays only the button, with a hidden form where users can input details such as their name and description. When the butt ...
I have a main container with two nested elements. <div id="middleHolder"> <a href="#"> <img> </a> <div id="sidebar"> <p>content</p> </div> I am looking to achieve a layout where the link ...
Currently, I am attempting to produce a trapeze-like design utilizing various techniques in order to achieve the best possible outcome. The shape I am aiming to create is similar to this: (the content inside the shape will consist of images and text) Th ...
Here is an example of how Elementor tab works. When you click on a tab, the content section appears. I want to be able to close the content section by clicking on any other part of the page, except for the tabs and tab content themselves. This should not a ...
I am facing an issue with three div elements, where the first (content) contains two nested div elements. While in Chrome, the last two div elements fit perfectly inside the first div, in MS Edge, the last div does not and starts after the first div on th ...
I am having trouble centering an anchor on my webpage. I have tried using text-align: center;, but it always puts the link on a new line due to the required div element. Other methods like margins and spans have not worked for me either. span.right { ...
I am currently trying to retrieve data from a list and place them in an exact location. Can someone please provide me with some helpful suggestions on how to achieve this? Below is the Java class used for creating the list: import java.util.ArrayList; im ...
I need help with aligning text in a toolbar-like control. The left side contains variable-size text, the center has a small block of text, and the right side also has text. My goal is to always have the center text centered without knowing its width in ad ...
I need help aligning two divs with text differently - one to the top left and the other centered but not on the same line. Here's the layout I'm aiming for: ---------------------------------------------- |Backstage |Issue 4 | | ...
Within my h1 tag, I have a header text that I would like to display alongside a small icon on the right side. The length of the text can vary, which presents a challenge in alignment. I attempted to use a background image with no repeat, but it ends up p ...
https://i.sstatic.net/ww9AU.png I have set up endpoints for HTML pages, but I am facing an issue where images and files are not being pulled. Every file path I try results in the error message "GET http://localhost:7575/index.js net::ERR_ABORTED 404 (Not F ...
I implemented a popup window on my website, and I utilized jQuery to make it fade in and out when specific areas are clicked. A notable feature is that if the user clicks on the background instead of the box itself, the application will close. $("#fixedHo ...
After grabbing the panel code from the jQuery Mobile website and integrating it into my file, I am interested in changing the appearance. I want to either darken or blur the background content when the panel is displayed. I attempted to use filter:blur(5px ...
Hey there! I've set up the browser camera on my website for users to record live tests. It's been working great on Chrome and Firefox using MediaRecorder, but unfortunately, Safari isn't cooperating. Does anyone know of an alternative to Me ...
Currently, I am enrolled in an online web development course and have been working on creating webpages to grasp the concepts of HTML and CSS. However, I encountered an issue where the font-family rules in my p and h3 elements were overriding the font-fami ...
So, here's the scenario - I currently have a background that looks like this: background:url(../img/arrow_lch.png) right no-repeat #2e443a; The challenge I'm facing is how to decrease the opacity of only the background color (#2e443a). Any sugg ...
I am working with a wrapper/list structure using ul and li elements. The ul element is set to display: table-row;, while the li element is set to display: table-cell;. I am facing an issue where I need to center the li element within the list, but align th ...
I have a photo and some text on my website. The photo is displayed on the left side, while the text appears nicely on the right side. Now, I am looking to include an additional block of text below the existing text. How can I accomplish this? What steps ...