Skip to content

Fix the docs examples #10

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

Merged
MikeAlhayek merged 8 commits into from
Jun 15, 2026
Merged

Fix the docs examples #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
09d7999
Fix Awesomefont Icons on Docs
MikeAlhayek Jun 15, 2026
811ef83
Fix workflow
MikeAlhayek Jun 15, 2026
1ef9965
Fix select loading error
MikeAlhayek Jun 15, 2026
2b1f30f
Fix the deployed docs location
MikeAlhayek Jun 15, 2026
84441fd
Merge remote-tracking branch 'origin/main' into ma/fix-docs
Copilot Jun 15, 2026
9d4b7a5
Fix select loading error
MikeAlhayek Jun 15, 2026
35f9e6b
Fix missing assets
MikeAlhayek Jun 15, 2026
76f2a5c
Merge branch 'main' into ma/fix-docs-ui
MikeAlhayek Jun 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ bower_components
# Dist zip
bootstrap-select-*.zip
dist/
!docs/dist/
!docs/dist/**

# Playwright
test-results/
Expand Down
4 changes: 2 additions & 2 deletions docs/404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
<script src="/js/chunk-recovery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" defer="defer"></script>
<script src="/dist/js/bootstrap-select.min.js" defer="defer"></script><link rel="stylesheet" href="/assets/css/styles.30561164.css">
<script src="/assets/js/runtime~main.2be3e872.js" defer="defer"></script>
<script src="/assets/js/main.a8771451.js" defer="defer"></script>
<script src="/assets/js/runtime~main.ac979132.js" defer="defer"></script>
<script src="/assets/js/main.24f6b2fe.js" defer="defer"></script>
</head>
<body>
<svg style="display: none;"><defs>
Expand Down
42 changes: 25 additions & 17 deletions docs/assets/js/20e3dd10.86c95c01.js → docs/assets/js/20e3dd10.2925bf3a.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,24 +100,32 @@
<option>2018</option>
</select>
<label for="floating-tags-example">Years</label>
</div>`}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-html",children:'<div class="form-floating">\n <select\n id="floating-tags-example"\n class="selectpicker"\n multiple\n data-live-search="true"\n data-show-selected-tags="true"\n data-open-options="true"\n placeholder="Years">\n <option selected>2026</option>\n <option selected>2023</option>\n <option selected>2021</option>\n </select>\n <label for="floating-tags-example">Years</label>\n</div>\n'})}),"\n",(0,s.jsxs)(t.p,{children:["For remote-backed pickers, initialize with JavaScript and provide ",(0,s.jsx)(t.code,{children:"source.create(callback, searchValue)"})," to save the new item before selecting it:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"new Selectpicker('#tag-editor', {\n liveSearch: true,\n showSelectedTags: true,\n openOptions: true,\n source: {\n data: function (callback) {\n callback(existingTags);\n },\n search: function (callback, page, searchValue) {\n callback(filterTags(searchValue));\n },\n create: function (callback, searchValue) {\n saveTag(searchValue).then(function (tag) {\n callback({\n text: tag.displayText,\n value: tag.id\n });\n });\n }\n }\n});\n"})}),"\n",(0,s.jsx)(t.h1,{id:"limit-the-number-of-selections",children:"Limit the number of selections"}),"\n",(0,s.jsxs)(t.p,{children:["Limit the number of options that can be selected via the ",(0,s.jsx)(t.code,{children:"data-max-options"})," attribute. It also works for option groups. Customize the message displayed when the limit is reached with ",(0,s.jsx)(t.code,{children:"maxOptionsText"}),"."]}),"\n",(0,s.jsx)(l.A,{html:String.raw` <select class="selectpicker" multiple data-max-options="2">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>`}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-html",children:'<div class="form-floating">\n <select\n id="floating-tags-example"\n class="selectpicker"\n multiple\n data-live-search="true"\n data-show-selected-tags="true"\n data-open-options="true"\n placeholder="Years">\n <option selected>2026</option>\n <option selected>2023</option>\n <option selected>2021</option>\n </select>\n <label for="floating-tags-example">Years</label>\n</div>\n'})}),"\n",(0,s.jsxs)(t.p,{children:["For remote-backed pickers, initialize with JavaScript and provide ",(0,s.jsx)(t.code,{children:"source.create(callback, searchValue)"})," to save the new item before selecting it:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"new Selectpicker('#tag-editor', {\n liveSearch: true,\n showSelectedTags: true,\n openOptions: true,\n source: {\n data: function (callback) {\n callback(existingTags);\n },\n search: function (callback, page, searchValue) {\n callback(filterTags(searchValue));\n },\n create: function (callback, searchValue) {\n saveTag(searchValue).then(function (tag) {\n callback({\n text: tag.displayText,\n value: tag.id\n });\n });\n }\n }\n});\n"})}),"\n",(0,s.jsx)(t.h1,{id:"limit-the-number-of-selections",children:"Limit the number of selections"}),"\n",(0,s.jsxs)(t.p,{children:["Limit the number of options that can be selected via the ",(0,s.jsx)(t.code,{children:"data-max-options"})," attribute. It also works for option groups. Customize the message displayed when the limit is reached with ",(0,s.jsx)(t.code,{children:"maxOptionsText"}),"."]}),"\n",(0,s.jsx)(l.A,{html:String.raw` <div class="row g-3">
<div class="col-md-6">
<label for="max-options-example">Overall limit</label>
<select id="max-options-example" class="selectpicker" multiple data-max-options="2" data-width="100%">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>

<select class="selectpicker" multiple>
<optgroup label="Condiments" data-max-options="2">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</optgroup>
<optgroup label="Breads" data-max-options="2">
<option>Plain</option>
<option>Steamed</option>
<option>Toasted</option>
</optgroup>
</select>`}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-html",children:'<select class="selectpicker" multiple data-max-options="2">\n <option>Mustard</option>\n <option>Ketchup</option>\n <option>Relish</option>\n</select>\n\n<select class="selectpicker" multiple>\n <optgroup label="Condiments" data-max-options="2">\n <option>Mustard</option>\n <option>Ketchup</option>\n <option>Relish</option>\n </optgroup>\n <optgroup label="Breads" data-max-options="2">\n <option>Plain</option>\n <option>Steamed</option>\n <option>Toasted</option>\n </optgroup>\n</select>\n'})}),"\n",(0,s.jsx)(t.h1,{id:"custom-button-text",children:"Custom button text"}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h2,{id:"placeholder",children:"Placeholder"}),"\n",(0,s.jsx)("p",{id:"titleMultiples"}),"\n",(0,s.jsxs)(t.p,{children:["Use the ",(0,s.jsx)(t.code,{children:"placeholder"})," attribute to set the default placeholder text when nothing is selected. This works for both multiple and standard select boxes:"]}),"\n",(0,s.jsx)(l.A,{html:String.raw` <div class="form-group">
<div class="col-md-6">
<label for="max-options-groups-example">Per-group limit</label>
<select id="max-options-groups-example" class="selectpicker" multiple data-width="100%">
<optgroup label="Condiments" data-max-options="2">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</optgroup>
<optgroup label="Breads" data-max-options="2">
<option>Plain</option>
<option>Steamed</option>
<option>Toasted</option>
</optgroup>
</select>
</div>
</div>`}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-html",children:'<div class="row g-3">\n <div class="col-md-6">\n <label for="max-options-example">Overall limit</label>\n <select id="max-options-example" class="selectpicker" multiple data-max-options="2" data-width="100%">\n <option>Mustard</option>\n <option>Ketchup</option>\n <option>Relish</option>\n </select>\n </div>\n\n <div class="col-md-6">\n <label for="max-options-groups-example">Per-group limit</label>\n <select id="max-options-groups-example" class="selectpicker" multiple data-width="100%">\n <optgroup label="Condiments" data-max-options="2">\n <option>Mustard</option>\n <option>Ketchup</option>\n <option>Relish</option>\n </optgroup>\n <optgroup label="Breads" data-max-options="2">\n <option>Plain</option>\n <option>Steamed</option>\n <option>Toasted</option>\n </optgroup>\n </select>\n </div>\n</div>\n'})}),"\n",(0,s.jsx)(t.h1,{id:"custom-button-text",children:"Custom button text"}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h2,{id:"placeholder",children:"Placeholder"}),"\n",(0,s.jsx)("p",{id:"titleMultiples"}),"\n",(0,s.jsxs)(t.p,{children:["Use the ",(0,s.jsx)(t.code,{children:"placeholder"})," attribute to set the default placeholder text when nothing is selected. This works for both multiple and standard select boxes:"]}),"\n",(0,s.jsx)(l.A,{html:String.raw` <div class="form-group">
<label>Multiple</label>
<select class="selectpicker" multiple placeholder="Choose one of the following...">
<option>Mustard</option>
Expand Down
42 changes: 25 additions & 17 deletions docs/assets/js/5c388a65.7413711c.js → docs/assets/js/5c388a65.5b0a1fcb.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,24 +35,32 @@
<option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
<option data-tokens="mustard">Burger, Shake and a Smile</option>
<option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>`}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-html",children:'<select class="selectpicker" data-live-search="true">\n <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>\n <option data-tokens="mustard">Burger, Shake and a Smile</option>\n <option data-tokens="frosting">Sugar, Spice and all things nice</option>\n</select>\n'})}),"\n",(0,i.jsx)(t.h1,{id:"limit-the-number-of-selections",children:"Limit the number of selections"}),"\n",(0,i.jsxs)(t.p,{children:["Limit the number of options that can be selected via the ",(0,i.jsx)(t.code,{children:"data-max-options"})," attribute. It also works for option groups. Customize the message displayed when the limit is reached with ",(0,i.jsx)(t.code,{children:"maxOptionsText"}),"."]}),"\n",(0,i.jsx)(l.A,{html:String.raw` <select class="selectpicker" multiple data-max-options="2">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</select>`}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-html",children:'<select class="selectpicker" data-live-search="true">\n <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>\n <option data-tokens="mustard">Burger, Shake and a Smile</option>\n <option data-tokens="frosting">Sugar, Spice and all things nice</option>\n</select>\n'})}),"\n",(0,i.jsx)(t.h1,{id:"limit-the-number-of-selections",children:"Limit the number of selections"}),"\n",(0,i.jsxs)(t.p,{children:["Limit the number of options that can be selected via the ",(0,i.jsx)(t.code,{children:"data-max-options"})," attribute. It also works for option groups. Customize the message displayed when the limit is reached with ",(0,i.jsx)(t.code,{children:"maxOptionsText"}),"."]}),"\n",(0,i.jsx)(l.A,{html:String.raw` <div class="row g-3">
<div class="col-md-6">
<label for="max-options-example">Overall limit</label>
<select id="max-options-example" class="selectpicker" multiple data-max-options="2" data-width="100%">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>

<select class="selectpicker" multiple>
<optgroup label="Condiments" data-max-options="2">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</optgroup>
<optgroup label="Breads" data-max-options="2">
<option>Plain</option>
<option>Steamed</option>
<option>Toasted</option>
</optgroup>
</select>`}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-html",children:'<select class="selectpicker" multiple data-max-options="2">\n <option>Mustard</option>\n <option>Ketchup</option>\n <option>Relish</option>\n</select>\n\n<select class="selectpicker" multiple>\n <optgroup label="Condiments" data-max-options="2">\n <option>Mustard</option>\n <option>Ketchup</option>\n <option>Relish</option>\n </optgroup>\n <optgroup label="Breads" data-max-options="2">\n <option>Plain</option>\n <option>Steamed</option>\n <option>Toasted</option>\n </optgroup>\n</select>\n'})}),"\n",(0,i.jsx)(t.h1,{id:"custom-button-text",children:"Custom button text"}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.h2,{id:"placeholder",children:"Placeholder"}),"\n",(0,i.jsx)("p",{id:"titleMultiples"}),"\n",(0,i.jsxs)(t.p,{children:["Use the ",(0,i.jsx)(t.code,{children:"placeholder"})," attribute to set the default placeholder text when nothing is selected. This works for both multiple and standard select boxes:"]}),"\n",(0,i.jsx)(l.A,{html:String.raw` <div class="form-group">
<div class="col-md-6">
<label for="max-options-groups-example">Per-group limit</label>
<select id="max-options-groups-example" class="selectpicker" multiple data-width="100%">
<optgroup label="Condiments" data-max-options="2">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</optgroup>
<optgroup label="Breads" data-max-options="2">
<option>Plain</option>
<option>Steamed</option>
<option>Toasted</option>
</optgroup>
</select>
</div>
</div>`}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-html",children:'<div class="row g-3">\n <div class="col-md-6">\n <label for="max-options-example">Overall limit</label>\n <select id="max-options-example" class="selectpicker" multiple data-max-options="2" data-width="100%">\n <option>Mustard</option>\n <option>Ketchup</option>\n <option>Relish</option>\n </select>\n </div>\n\n <div class="col-md-6">\n <label for="max-options-groups-example">Per-group limit</label>\n <select id="max-options-groups-example" class="selectpicker" multiple data-width="100%">\n <optgroup label="Condiments" data-max-options="2">\n <option>Mustard</option>\n <option>Ketchup</option>\n <option>Relish</option>\n </optgroup>\n <optgroup label="Breads" data-max-options="2">\n <option>Plain</option>\n <option>Steamed</option>\n <option>Toasted</option>\n </optgroup>\n </select>\n </div>\n</div>\n'})}),"\n",(0,i.jsx)(t.h1,{id:"custom-button-text",children:"Custom button text"}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.h2,{id:"placeholder",children:"Placeholder"}),"\n",(0,i.jsx)("p",{id:"titleMultiples"}),"\n",(0,i.jsxs)(t.p,{children:["Use the ",(0,i.jsx)(t.code,{children:"placeholder"})," attribute to set the default placeholder text when nothing is selected. This works for both multiple and standard select boxes:"]}),"\n",(0,i.jsx)(l.A,{html:String.raw` <div class="form-group">
<label>Multiple</label>
<select class="selectpicker" multiple placeholder="Choose one of the following..." data-width="fit">
<option>Mustard</option>
Expand Down
Loading