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.

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

select box not fits it content size in bootstrap5 mode and multiple values #340

Closed
8 of 9 tasks
spo0okie opened this issue Oct 2, 2021 · 0 comments
Closed
8 of 9 tasks

Comments

@spo0okie
Copy link

spo0okie commented Oct 2, 2021

Prerequisites

  • I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
  • The issue still exists against the latest master branch of yii2-widget-select2.
  • This is not an usage question. I confirm having read the widget documentation and demos.
  • This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
  • This is not a source plugin (select2) issue. (Those should be directed to the plugin issues repo).
  • I have attempted to find the simplest possible steps to reproduce the issue.
  • I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

  1. use bootstrap5 + multiple value select2
  2. select as many values as not fit in one row
  3. values renders out of select box
  4. select window still can stretch if items rows count grows, but it stretches to incorrect row count
    image
<?= $form->field($model, 'techs_ids')->widget(Select2::className(), [
	'data' => \app\models\Techs::fetchNames(),
	'options' => ['placeholder' => 'Выберите оборудование',],
	'toggleAllSettings'=>['selectLabel'=>null],
	'pluginOptions' => [
	    'allowClear' => true,
	    'multiple' => true
	]
]) ?>

Expected behavior and actual behavior

on bootstrap3 everything was fine

Environment

Browsers

  • Google Chrome

Operating System

  • Windows

Libraries

  • jQuery version: v3.6.0
  • yii2-widget-select2 version: v2.2.3

Isolating the problem

Dont know how reproduce PHP code anywhere like jsBin
I tried to reproduce it in raw select2, but it works fine

if set display property of <ul> item to "inline-block"
<ul class="select2-selection__rendered" id="select2-services-techs_ids-container" style="display: inline-block;">
then it renders more accurate, but search area makes additional row because it not inside <ul> item in BS5 mode:
image

in BS3 it was inside <ul>:
image
and was working fine

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants