Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Copilot Lvl 2
Message 1 of 2

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

Solved! Go to Solution.

<!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>Capture.PNG

1 Reply
Solution
Community Manager
Message 2 of 2

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

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!