How do I make the drop box wider (MRS)? HTML Notepad. Please Help

<!DOCTYPE html>
<html>
<head>
<meta name=“viewport” content=“width=10px, initial-scale=10000”>
<style>
body {font-family: Arial;}

/* Style the tab */
.tab {
overflow: hidden;
border: 912x solid #ccc;
background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;

}

/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 3px solid #ccc;
border-top: none;
}
</style>
</head>
<body>

<p>Click on the buttons inside the tabbed menu:</p>

<div class=“tab”>
<button class=“tablinks” onclick=“openCity(event, ‘Client Details’)”>Client Details</button>
<button class=“tablinks” onclick=“openCity(event, ‘Notes’)”>Notes</button>
</div>

<div id=“Client Details” class=“tabcontent”>
<h3>Personal Information</h3>
<p><!DOCTYPE html>
<html>
<body>

<!DOCTYPE html>
<html lang = “en”>
<head>
<meta charset = “UTF-8” />
</head>
<form>
<fieldset>
<p>
<label>Title*</label>
<select id = “myList”>
<option value = “Miss”>Miss</option>
<option value = “Mrs”>Mrs</option>
<option value = “Mr”>Mr</option>
</select>
</p>
</fieldset>
</form>
</body>
</html>

</body>
</html>

</body>
</html>
.</p>
</div>

<div id=“Notes” class=“tabcontent”>
<h3>Notes</h3>
<p>.</p>
</div>

<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName(“tabcontent”);
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = “none”;
}
tablinks = document.getElementsByClassName(“tablinks”);
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", “”);
}
document.getElementById(cityName).style.display = “block”;
evt.currentTarget.className += " active";
}
</script>

</body>
</html>

Hi @youwann7!

I’ve moved your post into the Programming Help and Discussion board as I think you’ll probably get better answers to your questions here.

To answer your question, you should be able to use the width CSS attribute on #myList  to change the width of the dropdown menu. However, every browser interprets the display styles for dropdown menus differently, so you might have to fiddle with the values and selectors. For more information, I personally recommend the CSS Tricks blog which has an article all about styling dropdown menus.

Hope this helps!

2 Likes

just increase the width of your dropbox