The contents on the table are surpassing the card

Hello, I am encountering an issue with the table contents exceeding in size. You can see a screenshot of the problem https://i.sstatic.net/YDYoP.png

Interestingly, when I un-collapse the sidebar, the view is perfectly fine. Here is a screenshot for reference: https://i.sstatic.net/1Sqmd.png

It seems that some of the page links are displaying correctly while others are not. Below is the code snippet related to the table data (td):

@foreach($mfo as $row)
                <tr style="font-size: 10.5pt;">
                    <td style="overflow-wrap: break-word;">{{$row->form_type}}</td>
                    <td style="overflow-wrap: break-word;">{{$row->dept_name}}</td>
                    <td style="overflow-wrap: break-word;">{{$row->function_name}}</td>
                    <td style="overflow-wrap: break-word;">{{$row->role}}</td>
                    <td style="overflow-wrap: break-word;">{!! $row->mfo_desc !!}</td>
                    <td style="overflow-wrap: break-word;">{!! $row->success_indicator_desc !!}</td>
                    <td>{!! $row->remarks !!}
                    <td>
                            <a href="{{action('MfoController@edit', $row->id)}}" class="btn btn-secondary btn-sm" type="submit">Edit</a>
                            <a href="#" class="btn btn-danger btn-sm"
                               data-mymfoid="{{$row->id}}" data-toggle="modal" data-target="#deletemfo">Delete</a>
                    </td>
                </tr>
            @endforeach

Answer №1

Your table seems to be overflowing with text, which could make it difficult for users to navigate through.

Consider optimizing your table display by increasing the screen width or adjusting the max-width of the table or parent container.

To improve readability, try shortening text in the table headers and reducing font size if necessary.

Answer №2

Here are the steps I took to address the issue, although I acknowledge that it may not be considered best practice:

<table class="table table-striped" style="width: 100%; table-layout: fixed;">
            <thead>
            <tr>
                <th style="width: 7%;">FORM TYPE</th>
                <th style="width: 10%">DEPT NAME</th>
                <th style="width: 13%;">FUNCTION NAME</th>
                <th style="width: 10%;">ROLE NAME</th>
                <th style="width: 20%">ORGANIZATIONAL OUTCOMES/KEY RESULTS AREA</th>
                <th style="width: 20%">QUALITY + OBJECTIVES
                    (TARGETS + MEASURES)</th>
                <th style="width: 20%">REMARKS</th>
                <th style="width: 10%">ACTIONS</th>
            </tr>
            </thead>
            <tbody>
            @foreach($mfo as $row)
                <tr style="font-size: 10.5pt;">
                    <td style="overflow-wrap: break-word;">{{$row->form_type}}</td>
                    <td style="overflow-wrap: break-word;">{{$row->dept_name}}</td>
                    <td style="overflow-wrap: break-word;">{{$row->function_name}}</td>
                    <td style="overflow-wrap: break-word;">{{$row->role}}</td>
                    <td style="overflow-wrap: break-word;">{!! $row->mfo_desc !!}</td>
                    <td style="overflow-wrap: break-word;">{!! $row->success_indicator_desc !!}</td>
                    <td>{!! $row->remarks !!}
                    <td>
                            <a href="{{action('MfoController@edit', $row->id)}}" class="btn btn-secondary btn-sm" type="submit">Edit</a>
                            <a href="#" class="btn btn-danger btn-sm"
                               data-mymfoid="{{$row->id}}" data-toggle="modal" data-target="#deletemfo">Delete</a>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>

Key Observations:

  1. I modified the width attribute in the table class to ensure a width of 100% and used table-layout: fixed;
  2. Each column within the table now has a fixed width totaling 110%

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discover the current style being applied using JavaScript

After taking a look at this particular post on Stack Overflow about How to retrieve the background color of an element using javascript? I discovered that by using div.style.color You can access the color applied to the div element. However, it seems ...

Enhancing your Yii2 application with the latest Bootstrap 4 upgrade

Attempting to update Bootstrap from version 3 to 4 with this official extension has only partially worked for me. I have widgets from 2amigos in my project that seem to rely on Bootstrap 3. Whenever these widgets are used, Bootstrap 3 is always called and ...

Tips for adjusting the size of grid tiles according to the dimensions of the window within a specific range

I am currently exploring how to replicate the effect found on this webpage: When the window size is adjusted, javascript dynamically resizes the grid tiles between 200 and 240px based on the optimal fit for the screen. Is there a ready-made JavaScript/jQ ...

HTML/CSS: There is a sentence that has no spaces that is exiting outside a div

HTML: <div> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </div> CSS: div { width: 150px; border: 1px solid blue } DEMO: http://example.com QUESTION: How can we solve this issue? ...

A step-by-step guide on retrieving information from a span and em element with Beautiful Soup

Currently, I am developing a code that is responsible for extracting data from various web pages. # Here's the content of task.py import requests from bs4 import BeautifulSoup url = ('https://www.naukri.com/job-listings-Python-Developer-Cloud-A ...

Changing innerHTML with HTML generated by a PHP function? (utilizing xajax)

I have managed to successfully update the content inside a DIV using xajax when clicking a link. However, I noticed that it only works when I directly assign HTML within the function itself, not when calling it from another function. Allow me to demonstra ...

Changing up the grid with alternating colors

I am looking to create a two-column grid layout with alternating colors for the grid blocks. However, using just nth-child(odd) or nth-child(even) won't give me the desired outcome. I believe I can achieve this by utilizing some clever nth-child tech ...

Animating Font Awesome content through CSS transitions

I am looking to animate a font awesome pseudo element on my website. Below is the HTML code I am working with: <li class="has-submenu"> <a onclick="$(this).toggleClass('open').closest('.has-submenu').find('.submenu&a ...

Receiving an absence of string or a null value from a text box

My goal is to test the functionality of an <input> element by entering text into a textbox and then displaying that data in the console. However, I am encountering issues with retrieving and printing the content. Additionally, I am interested in test ...

Positioning a box at the bottom rather than at the top

I am on the lookout for a solution to shift/arrange divs to the bottom instead of the top. For example, when attempting to delete some of the divs with the "box" class in this code snippet: Current code: #hol ...

Hiding a parent DIV in JS based on specific content: Here's how

I need help figuring out how to hide multiple parent DIVs based on the content of a specific child DIV. Here's an example: <div class="report-per-day"> <div class="report-day">26 May 2022</div> <div class=" ...

Issue with VueJS: Checkbox unable to retrieve data from specified value attribute upon change event

Currently, I am diving into my initial Vue Js project alongside Laravel 7.x. The task at hand involves creating a search form where users have the option to input keywords and select whether to search as a string or by keyword(s) by ticking a checkbox. &l ...

How can I overlay text on top of an image?

I want to create a design where half of the text overflows and overlays the image on the right side. How can I achieve this using a Grid item? I've tried using "absolute", "relative", and "z-index" positions, but they don't seem to work in the MU ...

Is it possible to target the initial sibling of a parent element using a CSS selector?

Is there a way to target the <p> element using only the id "Standort" as a constant? Any suggestions on how to accomplish this? <section> <header> <h2 class="licht"><span id="Standort" class="-sitemap-select-item-select ...

Editable content area: Maintain and restore cursor position when placed on a blank line

While working with a contenteditable div and constantly updating the HTML as the user types, I am facing the challenge of saving and restoring the caret position. I came across a helpful solution provided by Tim Down on a similar issue, which I found on S ...

What strategies can be implemented to improve the load time for bigvideo.js?

Why are my load times extremely slow for such a small site? I had hoped to display an image before the video loads, but they both seem to load simultaneously, even if the video takes forever to load. This is my HTML: <div id="bigvid"> <div cla ...

Tips for updating the hover background color of a table row with a unique class in bootstrap

Modified: Here is the table along with its corresponding CSS styling: .table-hover tbody tr:hover { background-color: #fff !important; } <html lang="en"> <head> <meta charset="utf-8" /> <meta name="v ...

Tips for changing the CSS pseudo class of an HTML element with JavaScript?

Here's a code snippet I have: const myDiv = document.querySelector("#myDiv"); myDiv.addEventListener("click", fct_Div); function fct_Div(ev) { console.log(ev); if (ev.altKey === true) { myDiv.style["background ...

Creating an image overlay within HTML text in NSAttributedString with CSS: A step-by-step guide

I am currently working on extracting HTML text that includes a YouTube video. In order to showcase this video, I have implemented a preview image. The original text is as follows: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do ei ...

Angular-fontawesome icons are experiencing issues with their background color not scaling properly

Currently utilizing angular-fontawesome, I am seeking to alter the background color of a font-awesome fa-icon <fa-icon class="vue-icon" [icon]="faVue" ></fa-icon> To change the color, I modified the CSS using ...