agdar/RTL_PROGRESS_BAR_FIX.md

RTL Progress Bar Fix Documentation

Problem

When switching the application language to Arabic (RTL mode), all progress bars were disappearing from the interface.

Root Cause

The issue was caused by the RTL CSS file (app-rtl.min.css) which applies right-to-left layout transformations. Progress bars in Bootstrap are designed to fill from left to right, and the RTL transformations were causing them to become invisible or not render properly.

Solution

Created a custom CSS override file (static/css/rtl-fixes.css) that is loaded specifically when Arabic language is selected. This file contains targeted fixes for progress bars in RTL mode.

Implementation Details

Files Modified/Created:

1. static/css/rtl-fixes.css (NEW)

   • Contains CSS rules to fix progress bar rendering in RTL mode
   • Forces progress bars to maintain LTR direction
   • Ensures visibility and proper styling

2. templates/base.html (MODIFIED)

   • Added conditional loading of rtl-fixes.css when LANGUAGE_CODE == 'ar'
   • The fix file is loaded after app-rtl.min.css to override problematic styles

Key CSS Fixes Applied:

/* Force progress container to use LTR direction */
.progress {
    direction: ltr !important;
}

/* Ensure progress bar fills from left to right */
.progress-bar {
    transform-origin: left center !important;
}

/* Ensure all progress bar color variants are visible */
.progress-bar.bg-success,
.progress-bar.bg-info,
.progress-bar.bg-warning,
.progress-bar.bg-danger,
.progress-bar.bg-primary,
.progress-bar.bg-secondary {
    opacity: 1 !important;
    visibility: visible !important;
}

How It Works

1. When a user selects Arabic language, the base.html template detects LANGUAGE_CODE == 'ar'
2. The template loads:
   • app-rtl.min.css (main RTL styles)
   • rtl-fixes.css (progress bar fixes) ← NEW
3. The rtl-fixes.css overrides specific RTL styles that were breaking progress bars
4. Progress bars now render correctly while the rest of the page remains in RTL layout

Testing

To test the fix:

1. Switch language to Arabic in the application
2. Navigate to any page with progress bars (e.g., Leave Requests page)
3. Verify that:
   • Progress bars are visible
   • Progress bars show the correct percentage
   • Color coding (success/warning/danger) works correctly
   • Animations work smoothly

Affected Pages

This fix applies globally to all pages that use Bootstrap progress bars, including:

• Employee Leave Requests
• HR Dashboard
• Any custom pages with progress indicators

Maintenance Notes

• The rtl-fixes.css file should be kept in sync if the main CSS framework is updated
• If new progress bar issues appear in RTL mode, add additional rules to rtl-fixes.css
• The file is intentionally kept separate from app-rtl.min.css for easier maintenance

Alternative Approaches Considered

1. Modifying app-rtl.min.css directly: Not feasible due to file being minified and very large
2. JavaScript-based fix: Would add unnecessary complexity and performance overhead
3. Individual template fixes: Would require changes to multiple files and be harder to maintain

The chosen CSS override approach is the cleanest and most maintainable solution.