From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 15 Mar 2016 09:19:25 +0000 (+0100)
Subject: Prevent <select> from overflowing containers
X-Git-Tag: 3.0.0_Beta_1~2030^2~5
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=12f806449d034546f6f101853e9e10c35fed6141;p=GitHub%2FWoltLab%2FWCF.git

Prevent <select> from overflowing containers
---

diff --git a/wcfsetup/install/files/style/layout/form.scss b/wcfsetup/install/files/style/layout/form.scss
index b77a534e81..3c0e707639 100644
--- a/wcfsetup/install/files/style/layout/form.scss
+++ b/wcfsetup/install/files/style/layout/form.scss
@@ -81,6 +81,15 @@ textarea {
 	}
 }
 
+select {
+	// The width is determined by the browser based upon the longest <option> contained,
+	// but this can cause the <select> to overflow the parent container. This is acceptable
+	// to some extent, but on mobile it can cause the entire site to have a horizontal
+	// scrollbar instead. Setting a `max-width` will cause the browser to respect the page
+	// boundaries and nicely wrap the displayed value instead.
+	max-width: 100%;
+}
+
 .selectDropdown {
 	position: relative;