Q - How to avoid horizontal scrolling and how to fix in the screen in Joomla 5 custom component with CSS ?

Raja Pdl · 14/11/2024 3:57 pm

In a Joomla 5 custom component, on the template view page, I want to prevent the table from scrolling horizontally. Currently, when there is long data, the screen scrolls horizontally. How can I fix this so it does not scroll and instead fits within the screen?

โค้ด: เลือกทั้งหมด

<?php
defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Layout\LayoutHelper;
use Joomla\CMS\Router\Route;
use Joomla\CMS\Uri\Uri;
?>


<form action="..." method="post" name="adminForm" id="adminForm">

    

    <div class="row">
        <div class="col-md-12">
            <div id="j-main-container" class="j-main-container">
                <?php if (empty($this->items)) : ?>
                    <div class="alert alert-info">
                        <span class="icon-info-circle" aria-hidden="true"></span><span class="visually-hidden"><?php echo Text::_('INFO'); ?></span>
                        <?php echo Text::_('JGLOBAL_NO_MATCHING_RESULTS'); ?>
                    </div>
                <?php else : ?>
                    <table class="table" id="eventListTable">
                        <thead>
                            <tr>
                                -----
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($this->items as $i => $item) : ?>
                                <tr>
                                    -----
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                    
                    <?php echo $this->pagination->getListFooter(); ?>

                <?php endif ?>
             </div>
        </div>
    </div>

    <input type="hidden" name="task" value="" />
    <input type="hidden" name="boxchecked" value="0" />
    <?php echo HTMLHelper::_('form.token'); ?>
</form>

MindPHP Assistant · 14/11/2024 3:57 pm

To prevent the table from scrolling horizontally and instead ensure it fits within the screen, you can use CSS to control the behavior of the table and its cells. A common approach is to use the CSS property `word-wrap: break-word;` and `white-space: normal;` to make sure long text wraps within the cell instead of extending the width of the table. Additionally, you can set maximum widths for table columns if needed.

Here's a sample CSS snippet you can add to your template to achieve this:

โค้ด: เลือกทั้งหมด

html
<style>
    #eventListTable {
        table-layout: fixed;
        width: 100%;
        /* Ensure the table takes the full width of its container */
    }

    #eventListTable th, #eventListTable td {
        word-wrap: break-word;
        white-space: normal;
        /* Allow text to wrap within the cell */
    }

    /* Optional: Set maximum width for specific columns if needed */
    /* Note: Adjust the nth-child selector according to your column index */
    /*
    #eventListTable th:nth-child(1),
    #eventListTable td:nth-child(1) {
        max-width: 150px; 
    }
    */
</style>

Place this `<style>` block inside the `<head>` section of your template, or include it in your site's CSS file. This will help ensure that long content within the table cells wraps appropriately and prevents horizontal scrolling. Adjust the `max-width` values as needed to suit the layout of your specific table.

Additionally, if your table contains columns that can be very wide due to content (like URLs or long text), you might want to consider using CSS properties like `overflow-wrap: break-word;` or `hyphens: auto;` for better text breaking and hyphenation.

Raja Pdl · 14/11/2024 4:11 pm

It works with this

โค้ด: เลือกทั้งหมด

#eventListTable {
        table-layout: fixed;
        width: 100%;
    }

    #eventListTable th, #eventListTable td {
        word-wrap: break-word;
        white-space: normal;
    }

เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

Q - How to avoid horizontal scrolling and how to fix in the screen in Joomla 5 custom component with CSS ?

Q - How to avoid horizontal scrolling and how to fix in the screen in Joomla 5 custom component with CSS ?

Re: Q - How to avoid horizontal scrolling and how to fix in the screen in custom component of Joomla 5 ?

Re: Q - How to avoid horizontal scrolling and how to fix in the screen in custom component of Joomla 5 ?

ผู้ใช้งานขณะนี้