Is there a way to make the drop-down from the select tag open to the right side(drop-right)?
<label for="ExpLabel">Select Message Expiry:</label>
<select name="ExpSelect" id="Expiry">
<option value="ExpiryDate">1 Day</option>
<option value="ExpiryDate">2 Days</option>
<option value="ExpiryDate">3 Days</option>
<option value="ExpiryDate">4 Days</option>
</select>You have the ability to create a custom select box and customize its appearance to your liking.
const sel = document.querySelector("#selected");
/* Define an array containing all the options */
const opt = [...document.querySelectorAll(".option")];
const inp = document.querySelector("#sel");
sel.addEventListener("click", () => {
const opts = document.querySelector("#options");
if (opts.classList.contains("open")) {
/* Hide the <ul> if it is visible */
opts.classList.remove("open");
} else {
/* Show the <ul> if it is hidden */
opts.classList.add("open");
}
});
opt.forEach((e, i, o) => {
/* Add an event listener for each option */
o[i].addEventListener("click", () => {
/* Store the selected option value in a variable */
const chosen = e.querySelector("span").innerHTML;
const opts = document.querySelector("#options");
/* Set the value of the selected option in the select box */
sel.innerHTML = chosen;
/* Set the value of the selected option in the hidden input field */
inp.value = chosen;
/* Close the <ul> */
opts.classList.remove("open");
});
}).container {
display: flex;
}
#selected {
border: thin solid darkgray;
border-radius: 5px;
background: lightgray;
display: flex;
align-items: center;
cursor: pointer;
height: 1.5em;
margin-bottom: .2em;
padding-left: .5em;
min-width: 170px;
position: relative;
}
#selected:after {
font-family: FontAwesome;
content: "\f0d7";
margin-left: 1em;
position: absolute;
right: .5em;
}
#options {
display: none;
margin: 0;
padding: 0;
}
#options.open {
display: flex;
}
li {
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
width: 60px;
}
li:hover {
background-color: yellow;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form>
<input type="hidden" id="sel">
<div class="container">
<div id="selected">Choose Message Expiry</div>
<ul id="options">
<li class="option"><span>1 Day</span></li>
<li class="option"><span>2 Days</span></li>
<li class="option"><span>3 Days</span></li>
<li class="option"><span>4 Days</span></li>
</ul>
</div>
</form>I am currently designing a responsive carousel using Bootstrap-4 and slick.js. With the center-mode enabled, I noticed that it shows a partial next slide. I am interested in adding a gradient to this partial next-slide, but I am uncertain about how to acco ...
I've recently encountered an issue with Chrome's password autofill feature that has been troubling me for a few days now. This problem began when I was using Chrome version 69. After much trial and error, I found a solution by removing the id an ...
After working on adjusting my website layout for different screen sizes, I encountered an issue with the navbar overflowing the parent image when viewed on my laptop. Despite trying both relative and absolute positioning for the .navbar element and setting ...
Technologies: CSS React JPG/PNG Objective: I am striving to resize two images to achieve this desired look: https://i.stack.imgur.com/B1b0h.png I am currently developing a 'skirt customizer' for either my mom or portfolio, where users can m ...
In my project, I have implemented a vertical slider with mousewheel control using SwiperJS from https://swiperjs.com/. Although the slider is working perfectly fine, I am looking to fix the positions while scrolling on the page similar to the example pro ...
Possible Duplicate: Issue with JavaScript accessing JSF component using ID Whenever I attempt to retrieve an element by passing a variable in jQuery(idOfElement), it doesn't work. But if I use something like jQuery('#e'), it works perfe ...
I'm struggling to run pact tests with Karma in my Angular app setup. Below is the relevant snippet from my package.json. "@angular/core": "~13.3.6", "@pact-foundation/karma-pact": "^3.1.0", "@pact-foundatio ...
When I created an accordion using HTML, JS, and CSS, I encountered a problem. The "+" sign in the accordion does not rotate correctly as it should. Instead of rotating from the middle of the "+" sign, it rotates from the top. This is my HTML code: <di ...
I've customized the Twitter Bootstrap layout for my website, and everything is looking great except for the @media queries. Can anyone help me figure out what's going wrong? HTML: <section id="lessons" class="bg-black no-padding lesson-conte ...
When navigating the website, I found that I needed to choose a specific time duration from a drop-down menu, as shown in the image. My goal is to automate this process using a Python script. I already have a script in place, but it requires an additional c ...
My attempt to set up AngularCLI and Firebase led to encountering this issue... How should I proceed? ERROR in node_modules/angularfire2/app/firebase.app.module.d.ts(5,22): error TS2420: Class 'FirebaseApp' does not properly implement interface ...
I'm facing challenges with automating an Angular web app. Despite trying simple code, it still isn't working. Here's an example of my code: @BeforeClass public void setUp() { ChromeOptions options = new ChromeOptions(); ...
Why does the top attribute in the animate function of JQuery not seem to work, while the opacity attribute functions correctly in the code snippet below? $(function() { $(window).on('scroll', function() { ...
Can someone please help me figure out how to hide multiple divs with the same id using JavaScript? I attempted the following: <script> function filterfunc() { if(document.getElementById('filter_deductible').value == 'id_50'){ ...
Seeking assistance on adding an image as a :after element to a navigation bar. The goal is for the image to cover the top portion of the next section according to the design. I have set the :after element as position: absolute with a top: 100%, but it app ...
I am currently constructing a React page to display prices. To achieve this, I have created a Card element where all the data will be placed and reused. Here is how it appears at the moment: https://i.stack.imgur.com/iOroS.png Please disregard the red b ...
I am looking to understand how I can insert an HTML element before and after certain elements. For example, let's say we have the following code in a real file: <ul class="abcd" id="abcd></ul> How can I display it like this using JavaScr ...
I've been encountering some issues while trying to bind data from an input in Angular 2. Below is the HTML code snippet: <input type="text" class="animated bounceIn input-proposta" placeholder="Enter your proposal" [(ngModel)]="propo ...
Looking for a way to display photos, biographies, personal details, and more on a webpage? We've got you covered! You can customize the layout using semantic HTML and CSS styles. Build your design online at http://jsfiddle.net/ and thank us later! &l ...
After creating a parent div and using jQuery's insertAfter() method to insert additional divs, an unexpected issue arises. The first record goes to the bottom, while subsequent records are inserted above it. Below is the function in question: functi ...