berkanakyurek / select2-bootstrap4-theme Goto Github PK

Hello Berkan,

Is there version for CDN installation? I need this for Search Engine Optimization. Cause in SEO audit technical this script need to using with CDN.

Thankyou

Can we get a live demo up on the README?

Select2 sets the element with to a size in pixels, but in Bootstrap, by default, all inputs are 100% width, save in exception the checkbox, radius, etc for obvius reasons. 😆

The design for multi-select items seems off. The selected elements are to small and not in line with bootstrap 4 elements.

I changed the style with these additional lines:

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    margin: 0 0.175rem 0.2em 0;
    padding: 0.5rem 0.75rem;
    border-color: #80bdff;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
    padding: 0.2rem 0.375rem 0 0.75rem;
}

Problem with Multiple element in line: cant use select2-bootstrap-append

https://www.npmjs.com/package/select2-bootstrap4-theme needs to be updated

Bootstrap 4 final is out
Please provide also scss to permit customise color or font.
Thanks for your work

changing all instances of .has-error to .is-invalid and .has-success to .is-valid allows validation classes to properly render on Select2 elements.

I think it needs to be updated to support form-control-sm instead of input-sm?

The placeholder text is misaligned when using Select2 Bootstrap 4 theme in multiple (tag) mode:

Adjusting the padding-top on .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered from .75rem to `.50rem' aligns it correctly:

This is using Bootstrap 4.1.1 and Select2 Bootstrap4 Theme (latest)

Using yarn to install this package i get only version 1.0.0 and not the latest one.

 $ yarn info select2-bootstrap4-theme

will output

{ name: 'select2-bootstrap4-theme',
  description: 'A theme for Select2 v4 and Bootstrap 4',
  'dist-tags': 
   { latest: '1.0.0' },
  versions: 
   [ '1.0.0' ],
  maintainers: 
(...)

The changelog says the latest version is 1.0.2.

I cant use input-group add-on when I set the select2 width 100%
Any helper class have for this ?

This is more of a stylistic choice, but the tags that are rendered in Select2 (I think) should conform more to Bootstrap 4's badges (since that is what they most closely resemble).

I've outlined what I did to bring the styles into parity with what Bootstrap 4 offers (the only items I did not do was add the font-size:75% and font-weight: 900 that Bootstrap 4's badges have due to my particular font choice).

Here are the style changes:

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
	color: #fff;
	background: #6c757d;
	/* border: 1px solid #343a40; */
	border-radius: .25rem;
	cursor: default;
	float: left;
	margin: .1875rem;
	padding: .25rem .4rem;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-weight: bold;
	margin-right: .375rem;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: #dae0e5;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	line-height: 1;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: .50rem;
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
}

When using component input-group from Bootstrap4 it doesn't fit well.
I've tried for many hours and so I got a solution. Comparing the attributes between the tags that fit well not using select2, I had the idea to apply the same set for both and so it's perfect!
Here is my solution: in select2-bootstrap4.css line 418 we have that code:

.input-group > .select2-container--bootstrap4 {
  display: table;
  table-layout: fixed;
  position: relative;
  z-index: 2;
  width: 100%;
  margin-bottom: 0;
}

We only need to add flex: 1 1; and check it out. Here it is:

.input-group > .select2-container--bootstrap4 {
  display: table;
  flex: 1 1;
  table-layout: fixed;
  position: relative;
  z-index: 2;
  width: 100%;
  margin-bottom: 0;
}

Hi Berkan,
just to tell you that the compilation and usage is perfect with BS 4.1.1.
Thanks for your work.

So I've tried this by npm and style link both ways and nothing changed, I also used selectbox from example file in this package and that didn't work either.

This is what I have:

<link rel="stylesheet" href="{{asset('css/select2.min.css')}}">
<link rel="stylesheet" href="{{asset('css/select2-bootstrap4.min.css')}}">


// my selectbox
{{ Form::label('categories', 'Categories') }}
{{Form::select('categories[]', $categories2, null, ['class' => 'form-control tagsselector', 'multiple' => 'multiple'])}}

//select box from sample page

<select class="tagsselector w-100" multiple>
  <optgroup label="Eastern Time Zone">
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
  </optgroup>
</select>

<script src="{{asset('js/select2.min.js')}}"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $( ".tagsselector" ).select2({
            theme: 'bootstrap4',
            placeholder: "Select an option",
            allowClear: true
        });
    });
    </script>

PS: as I imported this package CSS file to my app.css even if i don't use the link here i have the style already but for testing purpose i used it.

Any idea?

To fix this, I added the following:

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
overflow: visible;
}

and changed line-height:

.select2-container--bootstrap4 .select2-selection--single {
height: calc(2.25rem + 2px);
line-height: 1;
padding: 0.75rem 1.125rem 0.75rem 0.375rem;
}

to

.select2-container--bootstrap4 .select2-selection--single {
height: calc(2.25rem + 2px);
line-height: 0.5;
padding: 0.75rem 1.125rem 0.75rem 0.375rem;
}

and this is what it now looks like: