Issue with stretched links in Bootstrap 5 specifically affecting certain recurring elements on mobile devices

I am facing an issue with a table that has a few hundred rows generated by a recurring PHP script. Utilizing Bootstrap 5, I am using a stretched link to enable the entire row of the table to be clickable. The functionality works perfectly on desktop and even when using Chrome's dev tools to simulate a mobile device. However, when accessing the table from an actual mobile phone (tested on two devices), the first 9 rows do not have the correct link associated with them; instead, the link is associated with the last row in the table. All other rows in the table behave as expected. How can I go about troubleshooting this issue, especially since it does not appear when using dev tools on a web browser? For your reference, the recurring code snippet is provided below. The content consists of plain text with no special characters.

Edit: Upon further investigation, I have discovered that the issue only occurs for elements that are visible at the time of the page load. Anything "below the fold" behaves as expected. It seems that the positioning inconsistencies are a known bug in Bootstrap.

<tr class="position-relative">
    <td class="position-static">
        <div class="container d-flex align-items-center">
            <div class="expansion-icon d-inline-block me-1">
                <img class="img-fluid" src="img-source">
            </div>
            <div class="expansion-link d-inline-block">
                <a href="link" class="stretched-link text-reset text-decoration-none">Content</a>
            </div>
        </div>
    </td>
    <td>Content</td>
    <td>Content</td>
</tr>

htmlcssbootstrap-5mobile-browser

Answer №1

After encountering a similar issue in the past, I found a solution.

By moving the <a> tag to the row above the columns and using stretched-link to make the row clickable, I was able to resolve the problem.

You can include two links in this setup.

One link can be placed after the row (within the container <div> tag following the <td> in your code), and another link can be placed where you originally had it without using stretched-link.

This approach has worked for me before. Check out the code snippet below:

<tr class="position-relative">
    <td class="position-static">
        <div class="container d-flex align-items-center">
        <a href="link" class="stretched-link text-reset text-decoration-none"></a><!-- New link without text -->
            <div class="expansion-icon d-inline-block me-1">
                <img class="img-fluid" src="img-source">
            </div>
            <div class="expansion-link d-inline-block">
                <a href="link" class="text-reset text-decoration-none">Content</a><!-- Remove stretched-link here -->
            </div>
        </div>
    </td>
    <td>Content</td>
    <td>Content</td>
</tr>

Answer №2

It appears that there is a recurring issue with Bootstrap that has been identified. While an open issue was recorded at one point (https://github.com/twbs/bootstrap/issues/28608), it has since been marked as resolved, although the problem persists.

Based on my own observations, I have found that links that are stretched within do not function properly for elements within the viewport when accessed on mobile browsers such as Safari and Chrome for iOS. However, items located outside the viewport behave as expected.

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

Issue with thymeleaf causing malfunction in top-bar navigation on foundation framework

Looking for advice on creating a navigable menu using Foundation's "top-bar" component in an HTML template file with Spring MVC + thymeleaf. The menu bar appears but the sub-menus are not displaying when hovering over them. Sub-menus related to main ...

javascriptjqueryhtmlzurb-foundation

Toggle class on element based on presence of class on another element

If I have 4 boxes and the user is required to choose one. I aim to assign an active class to the box that the user clicks on. However, if the user selects another box, I want to remove the class from the first clicked box and apply it to the newly clicked ...

javascripthtmlcss

Centering an item within a dropdown navigation bar

Hey there, I'm currently facing a challenge with centering an image within my dropdown bar. My goal is to have it float to the right and be centered, but it's not cooperating. Here's the code snippet I'm working with: <!DOCTYPE htm ...

htmlcss

Is it possible to modify a scss style in Prestashop?

I have encountered an issue while using a default theme in Prestashop 1.6 that I need assistance with. My goal is to move the navbar up by 25px. I understand that I should make changes to #block_top_menu { padding-top: 25px; } in blocktopmenu.scss, which ...

csssassprestashop

Using PHP's include/require method with a dynamic path

Looking for assistance with my issue! Ajax is returning the correct information and displaying it in an 'alert(html)' on 'success'. The PHP code echoes $idName and $path correctly on the carrier page where the code resides. There are no ...

javascriptphphtml

Troubleshooting Angular 2 ng-if issues

Is there a way to dynamically apply CSS styles to an element that has an ng-if condition, even if the condition fails? It currently works fine when the condition is true, but I'm looking for a solution that allows me to modify the element regardless o ...

javascripthtmlcssangularjs

Iterate through and conduct conditional verification

In my project using AngularJS and HTML, I have created a table to display records. I am looking for a way to iterate through the column values and strike through any value in the column that meets a certain condition. For example, in the demo provided her ...

javascripthtmlangularjs

Space empty on the right side of a card within a container - Bootstrap 4

I've been working on creating a responsive card for different screen sizes, but I've encountered a problem. On mobile screens, there seems to be some unwanted blank space on the right side of the card. Is there a way to center this card on smalle ...

htmlcssbootstrap-4

Pure CSS tab system that prevents label propagation using anchors

I am in the process of creating a tab system using only CSS with the help of the :target and :checked pseudo classes. However, I have encountered an issue where an anchor inside the label is not triggering the :checked. When clicking on the anchor, the :c ...

htmlcsscss-selectors

Uncovering the jsPlumb link between a pair of identifiers

Could someone help me understand how to disconnect two HTML elements that are connected? I have the IDs of both elements, but I'm not sure how to locate their connection in the jsPlumb instance. Any tips on finding the connection between two IDs? ...

javascriptjqueryhtmljsplumb

Load a distinct JSP file from the sidebar in JSP

I have an index.jsp file containing a sidebar: <div id="sidebar"> <li ><a href="create">Create</a></li> <li ><a href="view">View</a></li> <li ><a href="Delete">Delete</a></li> & ...

jqueryhtmljsp

Set the position of a div element to be fixed

I am currently working on a straightforward application that requires implementing a parallax effect. Here are the methods I have experimented with so far: - Inserting an image within a div with the class parallax. - Subsequently, adding an overlay div ...

javascripthtmlcsssassparallax

Adjust the background color of the header as you scroll

Seeking assistance in adjusting the background color of my header upon scrolling. This is my current implementation: header.component.ts export class HeaderComponent { ngOnInit(): void { const header = document.querySelector('.header'); ...

cssangulartypescript

Trouble accessing data with AJAX

I am trying to retrieve content from a web page and display it on my own webpage using AJAX. However, I keep encountering an "Access denied" error before the specified page is fetched. It's important to note that the target page does not require any l ...

javascripthtmlajax

generate a customized synopsis for users without storing any data in the database

In order to provide a summary of the user's choices without saving them to the database, I want to display it in a modal that has already been created. Despite finding some sources online, none of them have worked for me so far. Below is my HTML: &l ...

javascriptjqueryhtmlcss

Insert a new row with a designated row class

I have a table with 2 columns and an "add row" button. However, I want to add a new row between the rows with the classes "title" and "ongkir". Currently, the new row is being added after the "ongkir" row. Can someone please assist me in achieving this? B ...

javascriptjqueryhtml

What is the reason behind the Placeholder not functioning in IE8?

Whenever I trigger the onblur event on an input of type "password", it will hide both the placeholder text and the input itself. Check out the GitHub link for this plugin ...

javascriptjqueryhtmljquery-plugins

Step-by-step guide on aligning a div of unknown height in the center of a div with a set

Struggling to center product images vertically within a fixed height box? Here's the code I've been working with: <div class="main-pic"> <ul> <li><img src="images/extra/laptop.jpg"></li> <li><img ...

htmlcss

Struggling to locate desired href links using BeautifulSoup

I'm currently working on compiling a list of hrefs from the Netflix job portal: . Each job posting on this platform comes with an anchor and a specific class: <a class=css-2y5mtm essqqm81>. To ensure accuracy, here is the complete anchor: <a ...

pythonhtmlbeautifulsoupurllib

What are the steps to add SVG effects to an image or div element?

Embarking on my first venture into using SVG graphics has left me feeling a bit bewildered. Despite extensive research, I have yet to stumble upon the answer to my current quandary. The objective at hand is to transform an image, assuming that the source ...

htmlcsssvgsvg-filters