Adjust the dropdown width based on the screen's resolution

I recently encountered an issue while implementing a dropdown menu in my React application. Everything was functioning smoothly until I attempted to change the browser resolution through the console.

// index.js:
<select
    id="project_type"
    name="project_type"
    className="dropdown_menu"}
>
    <option value="Yes">
        Yes
    </option>
    <option value="No">
        No
    </option>
</select>

css file:

.dropdown_menu {
    position: absolute;
    width: 590px;
    height: 48px;
    background: rgba(0, 50, 160, 0.1);
    margin-top: 270px;
    border-radius: 5px;
    border: 1px solid rgba(46, 81, 158, 0.6);
    padding-left: 23.33px;
    padding-top: 0;
}

Upon changing resolutions, this issue emerged:

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

I am seeking advice on how to modify the dropdown menu so that its width matches that of its options, preventing overflow when resolutions are changed.

Note: I have tried setting 'width: inherit' but it did not resolve the issue.

htmlcssreactjs

Answer №1

Simply opt for the content-box option

input,
select {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
<select id="project_type" name="project_type" className="dropdown_menu" }>
  <option value="Yes">
    Yes
  </option>
  <option value="No">
    No
  </option>
</select>

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

Navigation is failing to float in the correct position

Having issues with my navigation positioning, specifically when it reaches the breakpoint. There's a strange gap on the right side that I can't seem to fix by adjusting padding or margin settings. I'm relatively new to this so please bear wi ...

htmlcss

Step-by-step guide to dynamically updating array indexes using jQuery and HTML input fields

const list = []; function updateIndex(index) { list.splice(index, 1); console.log(list); var html = ""; html += "<ul id = 'del'>"; for (var i = 0; i < list.length; i++) { html += "<li>" + list[i] + " <button oncl ...

htmljquery

Managing the load more feature with a Selenium script using Python

As a newcomer to Python, I am experimenting with automating clicks on the "load more" button found in the comment section of Instagram using Selenium and Python. Despite being able to click once successfully, the button disappears after the first click. ...

pythonhtmlseleniumwebautomation

How can CSS be used to create a responsive form script?

We have enlisted the services of an SEO provider through upcity.com, which necessitates us to embed a form on our website. However, we are facing challenges with the responsiveness of the form on mobile devices, which undermines our efforts. Therefore, I a ...

htmlcssresponsive-design

Steps for Removing Multiple CSS Styles from an Element's Style:

When my application generates inline styles, I sometimes need to remove the height, width, and max-width styles from certain elements. I have identified the element using this code: const elems = window.$('.myElements'); window.$.each(elems ...

javascriptjquerycss

A step-by-step guide on rotating a solitary image within HTML

Is there any way to make these three images in my table rotate continuously? I've looked everywhere for a solution but can't find anything. I want the rotation to mimic that of a planet rotating on its axis. Check out this one: BARCELONA <t ...

htmlcsstransform

Navigation Bar Search Box Alignment Problem

Hi there, I'm new to programming and I'm trying to center my search bar with the navigation links beside it within a fixed navigation bar. However, I'm having trouble getting it to work properly. Can someone take a look at my HTML and CSS co ...

htmlcssnavigationsearchbarcenter-align

Issue with CSS line height - Struggling to determine the precise number of lines

Despite finding an old post on this topic, the most popular answer and other solutions didn't work for many people. Even years later, I am still facing the same issue. My goal is to create a div that is precisely 19 lines tall (ideally aiming for 19. ...

htmlcssfonts

Rerender not occurring after array splice with React hooks setter

My parent component structure is as follows: import React from "react"; import Test from "./Test"; function App() { const [configs, setConfigs] = React.useState([1, 2, 3]) return ( <div> ...

javascriptreactjsfrontend

When the state of the grandparent component is updated, the React list element vanishes in the grandchild component. Caution: It is important for each child in a list to have a unique

In my development project, I've crafted a functional component that is part of the sidebar. This component consists of 3 unique elements. ProductFilters - serves as the primary list component, fetching potential data filters from the server and offer ...

javascriptreactjsmaterial-ui

Using line breaks and horizontal scrolling in HTML and CSS

I am struggling with a div that contains multiple small spans. My goal is to implement a horizontal scrollbar that extends up until the line break tags (a-z on each line) in order to view the full content on narrow screens. Although I have applied the &ap ...

htmlcss

Text font automatically adjusts size in Chrome on Android

It seems that when a paragraph of text reaches a certain length, Google Chrome on Android decides to resize the text and make it larger (which can cause some interesting results). I've noticed that on my website, about half of the p-tags stick to the ...

androidhtmlcssgoogle-chromefont-size

Switching up the size of individual components in the Bootstrap grid system: The ultimate guide

Is it possible to adjust the width of specific elements in Bootstrap's grid system without affecting the default customization? Here is an example of what I am referring to: For example, I would like to make col-xs-1 smaller as seen in the top row ( ...

jqueryhtmlcsstwitter-bootstrapgrid

Adding a variable to the .append function in HTML code

I am currently working on a way to include the current date and time when a user comments on a post in my forum. While I have successfully managed to upload the text inputted by the user into the comment section, I am now looking to also dynamically insert ...

javascriptjqueryhtml

Sending form data to the server using JavaScript: A step-by-step guide

Currently, I am dealing with the configuration of two servers. One server is running on React at address http://localhost:3000/contact, while the other is powered by Express at address http://localhost:5000/. My goal is to transmit form data as an object v ...

javascriptnode.jsreactjsexpressfetch-api

Learn the step-by-step process of graphing equations in React similar to Desmos

I am currently attempting to create a graph of an equation based on user input, similar to how it is done on Desmos () For example While I have come across a function plotting tool at , I have encountered difficulties when trying to plot equations contai ...

javascriptreactjsgraphequation

adjusting the background with repeat-y pattern placement

I'm having an issue with setting a background image as a wrapper for the main content of my page. Currently, I've set the background image like this: #background { background: url("../image/bg.png") repeat-y 133px 50px; color: #000000; ...

cssbackground-image

PHP - What is the reason for the output being a multi-dimensional array?

Hey there, I'm currently working with this code and for some reason, the variable records2 is returning a multi-dimensional array. Can anyone help me figure out why this is happening? I actually need it to be a simple, single dimension array. functi ...

phphtmlmultidimensional-array

Problem with overlapping numbers in the Vis network

I am currently working on a project using Angular 8 and Visnetwork. Everything is going well, but I am facing an issue with overlapping numbers on lines. Is there a way to adjust the position of the numbers on one line without separating the lines? Can s ...

javascripthtmlangularnetworkingvisnetwork

Press the button to reveal the table - jQuery/JavaScript

Can you please provide guidance on how to hide the inner HTML table when the page loads and then display the table with results only after clicking the search button? I do not want to show an empty table. Below is the code snippet that I have tried: Howev ...

javascriptjqueryhtml