team-alpha/railsgoat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Further improve dropdown selection display with enhanced CSS and debugging

Browse Source 
Added enhanced CSS with !important rules and explicit appearance properties
to ensure the dropdown properly displays the selected recipient name.

Changes:
- Added explicit appearance properties for proper browser rendering
- Added !important to color and background-color rules
- Added styling for option:checked state
- Enhanced JavaScript debugging with value and color logging
- Added hide/show to force visual re-render

The console logs now show:
- Selected recipient name
- Selected value
- Current color CSS property

This should help diagnose and fix the visual display issue.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ken Johnson
2025-12-09 15:04:36 +00:00
parent 65e42ceee3
commit ffac25bae3
1 changed files with 22 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/views/messages/index.html.erb
+22 -7
View File
@@ -158,12 +158,18 @@ $(document).on('turbolinks:load', function() {
makeActive(); makeActive();
}); });
// Explicitly handle dropdown selection to ensure display updates // Debug and force dropdown to display selected value
$('#message_receiver_id').on('change', function() { $('#message_receiver_id').on('change', function() {
var selectedText = $(this).find('option:selected').text(); var $select = $(this);
var selectedText = $select.find('option:selected').text();
var selectedValue = $select.val();
console.log('Selected recipient:', selectedText); console.log('Selected recipient:', selectedText);
// Force a visual update console.log('Selected value:', selectedValue);
$(this).blur().focus(); console.log('Current display:', $select.css('color'));
// Force re-render by temporarily hiding and showing
$select.hide().show(0);
}); });
// Form submission with AJAX // Form submission with AJAX
@@ -317,12 +323,21 @@ $("#submit_button").click(function(event) {
/* Ensure dropdown displays selected value properly */ /* Ensure dropdown displays selected value properly */
#message_receiver_id { #message_receiver_id {
color: #212529; color: #212529 !important;
background-color: #fff; background-color: #fff !important;
-webkit-appearance: menulist !important;
-moz-appearance: menulist !important;
appearance: menulist !important;
} }
#message_receiver_id option { #message_receiver_id option {
color: #212529; color: #212529 !important;
background-color: #fff !important;
}
#message_receiver_id option:checked {
color: #fff !important;
background-color: var(--rg-success) !important;
} }
#message_receiver_id:focus { #message_receiver_id:focus {