https://i.sstatic.net/7kkqL.png
https://i.sstatic.net/dCwkI.png
After creating a drop-down menu using ul and li tags, I realized that when the menu is opened, it shifts the blocks below on the screen. To prevent this from happening, I adjusted my CSS as follows:
#select-ul {
display: block;
cursor: pointer;
border: 0.1px solid rgba(0, 0, 0, .1);
border-top: 0;
background-color: white;
padding: 12px;
height: 300px;
overflow: auto;
float: none;
overflow-y:scroll;
}
Make some adjustments to your CSS code:
ORIGINAL CSS
#select-ul {
display: block;
cursor: pointer;
border: 0.1px solid rgba(0, 0, 0, .1);
border-top: 0;
background-color: white;
padding: 12px;
height: 300px;
overflow: auto;
float: none;
overflow-y:scroll;
}
UPDATED CSS
#select-ul {
z-index: 1;
display: none;
position: absolute;
width: 100%; /* you can change but must give width */
max-height: 300px;
cursor: pointer;
border: 1px solid #e5e5e5; /* 0.1px doesn't work */
border-top: 0;
padding: 12px;
background-color: white;
overflow: hidden scroll;
}
#select-ul.active {
display: flex;
flex-direction: column;
}
Ensure to convert some JavaScript parts into vue since you are utilizing it.
const dropdown = document.querySelector('#select-ul');
dropdown.addEventListener('click', () => {
dropdown.classList.add('active'); // you can also use toggle
});
// additionally
dropdown.addEventListener('blur', () => {
dropdown.classList.remove('active');
});
Please let me know if this solution resolves the issue! Feel free to provide more details about the scaling problem you mentioned so I can better assist you.
#container { position: fixed; height: 100%; left: 0px; right: 0px; top: 0px; width: 10%; background-color: blue; } #container>div {} <html> <div id="container"> <div>up</div> <div>down</div> <d ...
I am currently facing a dilemma that I am unsure how to approach. It seems that JQuery requires unique ID's in order to be called in the document ready function. I use PHP to read my MySQL table and print out HTML forms, each with a button that adds a ...
Looking to provide users with the ability to construct a table where they can create expressions. For example, in the expression shown below (((c1 A/O c2) A/O C3) A/O C4), where A/O represents 'And' and 'Or' conditions selected by the u ...
We have a detailed guide on extracting PHP values using Jquery AJAX with JSON data type. Below, you will find the necessary code snippets for implementation. HTML CODE <html> <head> <meta http-equiv="Content-Type" content="text/html; c ...
I am facing an issue with one specific page on my website that contains links to the database. The loading speed of this page is extremely slow and I'm looking for ways to speed it up. I have noticed that even when there are no visitors on the server ...
I am currently working on implementing a search function with tabbed features. Everything seems to be displaying correctly without any errors. However, the issue arises when I try to click on any tab in order to show or hide specific content from other tab ...
Currently, I am facing an issue with the Material-UI card header as the background color is affecting the readability of the default font. My aim is to use the typography prop h4 for the header, but I am struggling to achieve this. https://i.stack.imgur.c ...
My attempt to retrieve a variable from javascript code using selenium is encountering difficulties. Despite the presence of the variable (confirmed by inspecting the source code before executing the script), the command driver.execute_script('return v ...
Here is a design mockup along with my current solution. The issue arises when two numbers are adjacent to each other (either horizontally or vertically) as they should merge, illustrated in the mockup below. For example, when selecting numbers 48-49-50, t ...
================================= My webpage acts like a homepage on the web. The issue arises when clicking on a new link, as my navbar is fixed and covers the section heading. I need the page to display the section heading properly even after clicking o ...
Creating a webpage with a full-page layout using a content session that spans the entire height of its container is my current project. To achieve this, I have implemented the following: The content's container (div.inner) is set to be absolute-posi ...
The bootstrap modal body is not containing all of my content and some of it is overflowing. <div class="modal fade" tabindex="-1" role="dialog" id= "blockModel"> <div class="modal-dialog"> <div class="modal-content"> < ...
Can I use *ngFor inside a <mat-cell> in Angular? I want to add a new column in my Material table and keep it hidden, using it only for filtering purposes... My current table setup looks like this: <ng-container matColumnDef="email"> < ...
I am designing an Input form with two input fields that need to be compared and values displayed if a certain condition is met. The input fields are: <td class="td_label"><label>Client Age :</label></td> <td class="td_input"> ...
I am working on a project where I need to create a link that acts as a file input when clicked. Here is the code for the link: <a id="upload-file">Upload your photo</a> Is there a way to make this link function as a browse file input? Any ...
I'm working with the following html code and I want to extract the text that comes after <b>Name in Thai</b>, specifically : this is what I want content = """ <html><body><b>Name of Bangkok Bus station:</b> <spa ...
Can a virtual caret be displayed between two letter boundaries in HTML/CSS/JavaScript, for example in a regular div without using contenteditable=true? Imagine having the following: <div>Hello world</div> If I were to click between the "w" a ...
I have a Progressive Web App where I use the getUserMedia() API to access the camera and HTML audio tags for handling media content. However, ever since updating to iOS 17, I've faced an issue where audio plays through the earpiece instead of the medi ...
Although I have come across similar questions to the one I am facing, none of the solutions provided seem to work for me at the moment. My CSS file loads and functions as expected when tested locally, but once I upload it to GitHub, it stops working. In my ...
I have been encountering exclamation points appearing randomly in the output of my PHP email function. After some research, I learned that this could be due to long lines or the need to encode the email in Base64. However, I am unsure how to go about doing ...