Review form layout not displaying properly

Ah, your theme is using the BoldGrid Theme Framework which uses my float-labels.js library.

float-labels.js provides an exclude option which is meant to be used to prevent this kind of problem. The default exclude class is .no-label, but I can see that the BoldGrid Theme Framework overwrites that parameter with .comment-form-rating #rating, .widget_categories .postform, .quantity .qty, so unfortunately it’s not as simple as using a Site Reviews hook to add the .no-label class to the hidden rating dropdown.

You have a three options:

1. Use some custom CSS to hide the SELECT element
2. Use some custom javascript to undo the Float Labels on the rating dropdown:

document.addEventListener('DOMContentLoaded', function () {
    var floatlabels = document.querySelectorAll('.glsr-form .bgtfw-wrap-select');
    floatlabels.forEach(function (floatlabel) {
        if (floatlabel.querySelector('.glsr-star-rating')) {
            var fragment = document.createDocumentFragment();
            while (floatlabel.firstElementChild) {
                var el = floatlabel.firstElementChild;
                var classes = el.className.split(' ').filter(function (val) {
                    return 0 !== val.lastIndexOf('bgtfw-', 0);
                });
                el.className = classes.join(' ').trim();
                fragment.appendChild(el);
            }
            floatlabel.parentElement.replaceChild(fragment, floatlabel);
        }
    });
});

3. If you built the theme yourself, you can edit the front-end.js file and add the .glsr-star-rating class to the selectors variable which will exclude it from the float-labels.js script.

And if you want to fix the positioning and font-size of the rating and toggle labels, use this CSS:

.gl-star-rating {
    flex-wrap: wrap;
}
.gl-star-rating label {
    font-size: 1.6rem !important;
    width: 100%;
}
.glsr-toggle {
    font-size: 1.6rem;
}
.glsr-toggle label {
    font-size: 1.6rem !important;
    padding: 0;
}

• This reply was modified 4 years, 5 months ago by Gemini Labs.

No, you don’t add it to the float-labels script.

If you are opting for solution #2, then add the Javascript snippet to either your theme’s javascript file, or use a plugin such as Custom CSS and JavaScript.

If you are opting for solution #3 (recommended if you have built your theme), then ignore #2 and follow the directions in #3.