From a9335952a57915e14a7d7cb81e9bdcbe881cd416 Mon Sep 17 00:00:00 2001 From: Ken Johnson Date: Tue, 9 Dec 2025 15:33:25 +0000 Subject: [PATCH] Change dropdown from form-select to form-control class MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bootstrap 5's form-select class may have rendering issues. Switched to form-control which has simpler styling and should display the selected text properly. Also explicitly added ID attribute to ensure JavaScript targets the correct element. Added additional debugging for: - Font family - Transform - Position - Z-index - Padding - Inner text/HTML of selected option 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/views/messages/index.html.erb | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/app/views/messages/index.html.erb b/app/views/messages/index.html.erb index a287fc6..8a81339 100644 --- a/app/views/messages/index.html.erb +++ b/app/views/messages/index.html.erb @@ -109,7 +109,7 @@ <%= f.select(:receiver_id, options_from_collection_for_select(User.all, :id, :full_name), { prompt: "Select a recipient..." }, - { class: "form-select form-select-lg" }) %> + { class: "form-control form-control-lg", id: "message_receiver_id" }) %> Select message recipient @@ -174,6 +174,7 @@ $('#message_receiver_id').on('change', function() { // Check computed styles that might hide text var computedStyle = window.getComputedStyle(this); console.log('Font size:', computedStyle.fontSize); + console.log('Font family:', computedStyle.fontFamily); console.log('Color:', computedStyle.color); console.log('Background:', computedStyle.backgroundColor); console.log('Text indent:', computedStyle.textIndent); @@ -183,6 +184,15 @@ $('#message_receiver_id').on('change', function() { console.log('Opacity:', computedStyle.opacity); console.log('Width:', computedStyle.width); console.log('Height:', computedStyle.height); + console.log('Transform:', computedStyle.transform); + console.log('Position:', computedStyle.position); + console.log('Z-index:', computedStyle.zIndex); + console.log('Padding:', computedStyle.padding); + + // Check if there's actually content + console.log('Inner text:', this.options[this.selectedIndex].text); + console.log('Inner HTML:', this.options[this.selectedIndex].innerHTML); + console.log('Display value property:', this.value); // Try forcing the selected attribute $select.find('option').removeAttr('selected');