adminBSB模板select组件加data-live-search后Windows下样式异常求助

Hey there, let's work through this select box styling problem you're facing—only happening on Windows, works fine on Linux, and traced back to the data-live-search="true" attribute. This is almost certainly a compatibility hiccup between the bootstrap-select plugin that adminBSB relies on for live search and Windows browser rendering (especially older IE/Edge instances or forced compatibility modes). Here are several actionable solutions to resolve it:

1. Force Standard Browser Rendering Mode #

Windows browsers sometimes fall into compatibility mode which breaks modern CSS/JS used by bootstrap-select. Add this meta tag to your HTML <head> to enforce the latest rendering engine:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

2. Verify or Update Bootstrap-Select Dependencies #

AdminBSB might ship with an older version of bootstrap-select that has Windows-specific bugs. Double-check that:

• jQuery is loaded before bootstrap-select JS
• Bootstrap CSS/JS versions match what bootstrap-select expects
  If needed, replace the existing bootstrap-select files with a newer, stable version (v1.13.18 is a solid choice for broad compatibility).

3. Override Problematic Styles with Custom CSS #

If the issue is visual misalignment (like a truncated search box or mispositioned dropdown), add these CSS rules to your stylesheet to fix common Windows-specific glitches:

/* Fix bootstrap-select search box width and overflow on Windows */
.bootstrap-select .dropdown-toggle .filter-option {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ensure search input fills its container */
.bootstrap-select .dropdown-menu .bs-searchbox input {
    width: 100% !important;
    box-sizing: border-box;
    padding: 6px 12px;
}

/* Fix dropdown menu positioning */
.bootstrap-select .dropdown-menu {
    min-width: 100%;
}

4. Replace Built-in Live Search with a Custom Implementation #

If the bootstrap-select live search is just too buggy on Windows, you can build a simple custom search feature using jQuery. Remove the data-live-search="true" attribute from your select, then add this code:

Modified Select HTML: #

<select class="form-control show-tick" onchange="showQuantityPerUnit(); typeForward(this.value);" name="type" id="type" required>
    <option value="">SELECT TYPE</option>
    <?php $MedicineType = $DataControl -> Read("type", ""); foreach ($MedicineType as $TypeKey) { ?>
    <option value="<?php echo $TypeKey['type']; ?>"><?php echo $TypeKey['type']; ?></option>
    <? } ?>
</select>
<!-- Add custom search input -->
<input type="text" id="type-search" class="form-control mt-2" placeholder="Search for a type...">

jQuery Code (place before closing </body>): #

$(document).ready(function() {
    // Filter select options based on search input
    $('#type-search').on('keyup', function() {
        const searchTerm = $(this).val().toLowerCase();
        $('#type option').each(function() {
            const optionText = $(this).text().toLowerCase();
            // Show/hide options based on match
            $(this).toggle(optionText.includes(searchTerm));
        });
    });

    // Reset options when search is cleared
    $('#type-search').on('blur', function() {
        if ($(this).val() === '') {
            $('#type option').show();
        }
    });
});

5. Clear Browser Cache #

Windows browsers tend to hold onto cached CSS/JS files longer. Press Ctrl + F5 to force a hard refresh, or clear your browser's cache entirely to ensure you're loading the latest assets.

Start with the meta tag and cache clear first—those are quick wins! Any of these steps should resolve the styling issue you're seeing on Windows.

内容的提问来源于stack exchange，提问作者Rohit Sahu