Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Floating Label - Multi Select Box #62

Open
zs6jce opened this issue Feb 1, 2022 · 2 comments
Open

Floating Label - Multi Select Box #62

zs6jce opened this issue Feb 1, 2022 · 2 comments
Labels
bug Something isn't working enhancement New feature or request

Comments

@zs6jce
Copy link

zs6jce commented Feb 1, 2022

Issue Description:
The selected options, overlay the floating label (refer screenshot below).

Screen Shot:
image

Fiddle - Example
https://jsfiddle.net/vtycmdow/12/

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>PMS - Additional Contract</title>
	<!-- Bootstrap 5 -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
	<!-- Select2 --> 
	<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
	<!-- select2-bootstrap-5-theme -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.2.0/dist/select2-bootstrap-5-theme.min.css" />
</head>

<body>
 	<!-- Options -->
	<div class="form-floating m-3">
		<select multiple class="form-select" id="multiSelect" th:field="*{brokerCategoryCodes}">
			<option value="A">Option - A</option>
			<option value="B">Option - B</option>
			<option value="C">Option - C</option>
			<option value="D">Option - D</option>
		</select>
		<label for="multiSelect">Options:</label>
	</div>

	<!-- jQuery -->
	<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
	<!-- Bootstrap -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
	<!-- Select2 -->
	<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

	<script>
		$('#multiSelect').select2({
		theme: "bootstrap-5",
		placeholder: "I AM DA PLACEHOLDER"
		});
	</script>
</body>
</html>
@apalfrey
Copy link
Owner

Floating labels are not currently supported, however there is a request here to have them supported #21, I haven't had much time to work on this recently but I'm hoping to get it sorted out soon

@apalfrey apalfrey added bug Something isn't working enhancement New feature or request labels Feb 22, 2022
@GHPS
Copy link

GHPS commented Jan 11, 2023

The selected options, overlay the floating label (refer screenshot below).

Currently, before floating labels are officially supported, you have two options -
place the selected items a bit lower and/or remove their border.

  1. Lower items with
    .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {padding-top: 0.9em; }
  2. Remove the item border with
    .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice { border: none}

For me personally the combination of both of them looks most pleasant.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@GHPS @zs6jce @apalfrey