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 have implemented styled components to change the text color by passing props. <Button variant = 'colour' type="submit" form="myForm" className="submit-btn"> Submit </Button& ...
My code includes a class: import * as p5 from 'p5'; export class Snake{ constructor() { } sketch = (p: p5) => { p.setup = () => { ... } } } To instantiate this class in app.component, I do the follow ...
Looking for some CSS help as a beginner here! I've been trying to position a transparent PNG image over a centered table, but it seems stuck in the upper left corner of the browser. Absolute positioning should give me freedom to move it around, right? ...
I am facing an issue with displaying random blocks in rows. Each time a block falls into a new row, I want it to have a different style. However, when the user clicks on a button to hide certain blocks using display:none, the problem arises because the nth ...
Currently, I am updating certain values within my HTML page by following this process: The function: function modifyContent(){ var newTitle = document.getElementById('myTextField1').value; if( newTitle.length==0 ){ alert('Plea ...
Could really use some assistance with this. Here are the images for reference: https://i.stack.imgur.com/JNZkT.jpg Currently getting this result: https://i.stack.imgur.com/nW17o.jpg <style> .Nav_bar_links div{ margin: 0% 1 ...
I am attempting to import a 3rd party library called synaptic. This library is written in JavaScript and I have a .d.ts file for it. Here are the steps I have taken: npm install synaptic --save npm install @types/synaptic --save I have also added the fol ...
I'm trying to capture user input from a dynamically changing table with 2 columns. How can I retrieve the data from each column separately? The size of the table is adjusted by a slider that controls the number of rows. Below is the structure of my ta ...
Recently diving into Angular, I've encountered an issue while trying to generate stack bar charts using Kendo UI. Instead of the desired stacked bars, I'm ending up with regular bar charts even after implementing stack="true". The stack ...
Below is a code snippet that is causing an error in the console. This function is part of the service in my Angular application. lastEmployeeID() //code block with error { let temp= this._http.get(this._employeesUrl).subscribe((employees:any ...
My website includes a div positioned below the header that contains quick links. I have implemented the solution from http://davidwalsh.name/persistent-header-opacity to ensure this div remains on-screen at all times. However, I would like it to appear a ...
I attempted to utilize Bootstrap toggle to modify the div HTML content similar to the example shown at with a slight modification, but unfortunately, it did not function as expected due to a discrepancy in my current JavaScript code. I am unsure of what I ...
My current project involves Mui V5 and I am looking to customize the TreeView component. Specifically, I need to remove the collapse/expand icons as I want them to be integrated into the TreeItem label component on the left side instead of the right. Add ...
Hey everyone, I've been working on making a textfield dynamic and I wanted to share my code with you: <input type="text" id="test1" value ="dynamic" onfocus="this.disabled=true" onblur="this.disabled=false"> <input type="text" id="test2 ...
Everything seems to be running smoothly on Mozilla (version 103.0), but unfortunately, it's not performing as expected on Chrome or Microsoft Edge. $('#loading').bind('ajaxStart', function () { $(this).show(); }).bind('ajaxS ...
I am trying to achieve a unique border effect for an element using CSS, where the transparency is maintained against the background: This is the desired outcome: https://i.stack.imgur.com/6Z1MU.png However, the border I am currently able to create looks ...
I have arranged my Social Media Div to the right of my Review Div: http://jsfiddle.net/eYQWE/ The issue: the social media buttons in My Social Media div are not staying in a straight line and keep dropping below my Review Div. Do you have any suggestions ...
Is there a way in next.js to render a normal .html file (index.html) when someone visits my root directory at "https://example.com/"? I have researched and edited my config file as shown below, /** @type {import('next').NextConfig} */ const next ...
Currently, the image is not spanning the entire width of the screen I've looked into various solutions for similar issues, but they always end up aligning the image to the right or left and increasing its size. If anyone has any suggestions, I would ...
I am looking to add a floating button that remains in the same position relative to the content until the window is scrolled to a certain point, after which it sticks to the end of the content. In simple terms, I want the element to act as 'relative& ...