Merge pull request #3007 from nextcloud/fix/2971/yp-suffix

Fix multiselect placeholder overlapping selected tag

Author: ChristophWurst

css/Properties/Properties.scss

@@ -60,24 +60,6 @@ $property-ext-padding-right: 8px;
 		width: $property-label-min-width;
 		min-width: $property-label-min-width !important; // override multiselect
 		max-width: $property-label-max-width;
-		height: $grid-input-height-with-margin;
-		margin: $grid-input-margin 5px $grid-input-margin 0 !important; // override multiselect
-		user-select: none;
-		text-align: right;
-		background-size: 16px;
-		line-height: $grid-input-height-with-margin + 1px;
-
-		&,
-		.multiselect__input {
-			&::placeholder {
-				text-align: right;
-			}
-			+ .multiselect__single {
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-			}
-		}
 
 		&:not(.multiselect) {
 			overflow: hidden;
@@ -114,23 +96,6 @@ $property-ext-padding-right: 8px;
 	&__label.multiselect {
 		.multiselect__tags {
 			border: none !important; // override multiselect
-			.multiselect__single {
-				padding-right: 24px;
-				background-repeat: no-repeat;
-				background-position: center right 4px;
-			}
-		}
-		.multiselect__content-wrapper {
-			right: 0; // align right
-			width: auto !important; // grow bigger if content is bigger than the original 100%
-			min-width: $property-label-max-width; // improve readability on narrow screens
-		}
-		@media only screen and (max-width: 768px) {
-			// align left of screen on narrow views
-			.multiselect__content-wrapper {
-				right: auto;
-				left: 0;
-			}
 		}
 	}
 

src/components/Properties/PropertyGroups.vue

@@ -205,11 +205,8 @@ export default {
 	width: 60px;
 	min-width: 60px !important;
 	max-width: 120px;
-	height: 34px;
-	margin: 3px 5px 3px 0 !important;
 	user-select: none;
 	text-align: right;
 	background-size: 16px;
-	line-height: 35px;
 }
 </style>

src/components/Properties/PropertyMultipleText.vue

@@ -139,12 +139,9 @@ export default {
 	width: 60px;
 	min-width: 60px !important;
 	max-width: 120px;
-	height: 34px;
-	margin: 3px 5px 3px 0 !important;
 	user-select: none;
 	text-align: right;
 	background-size: 16px;
-	line-height: 35px;
 }
 .property__label:not(.multiselect) {
 	overflow: hidden;

src/components/Properties/PropertySelect.vue

@@ -143,12 +143,9 @@ export default {
 	width: 60px;
 	min-width: 60px !important;
 	max-width: 120px;
-	height: 34px;
-	margin: 3px 5px 3px 0 !important;
 	user-select: none;
 	text-align: right;
 	background-size: 16px;
-	line-height: 35px;
 }
 
 </style>

src/components/Properties/PropertyText.vue

@@ -221,11 +221,8 @@ export default {
 	width: 60px;
 	min-width: 60px !important;
 	max-width: 120px;
-	height: 34px;
-	margin: 3px 5px 3px 0 !important;
 	user-select: none;
 	text-align: right;
 	background-size: 16px;
-	line-height: 35px;
 }
 </style>