Utilizing Bootstrap 4: The Use of an anchor tag in a button element

I am facing a situation where I have an icon represented by the HTML code <a>, which acts as a link redirecting to a different page. This <a> is nested inside a collapsible button, meaning that clicking on the icon expands the menu before actually executing the link redirection.

My query revolves around the possibility of controlling the stacking order (z-index) of the <a> element in a way that would prevent the menu from expanding when the icon is clicked, while still keeping it housed within the <button>. If this isn't achievable, what alternative approach would you recommend?

Feel free to review the code snippet at: https://codepen.io/anon/pen/GaygNQ

htmlcssbootstrap-4

Answer №1

The W3C states that the <button> element should only include phrasing content, not interactive content. My recommendation is to place your <a> outside of the <button> element and utilize flex layout for better structure.

Answer №2

For the solution, please refer to this link. It is important that a is in its own element for proper structure correction. I have made some adjustments to your code:

<div class="card-header" id="headingOne">
      <button class="btn btn-link text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Collapsible Group Item #1
          <a class="modificationUtilisateur" href="https://www.google.fr/" id="">
            <i class="fas fa-pen fa-pen-indicateur" title="Modifier"></i>
          </a>
        </button>
      </h2>
    </div>

This has been changed to:

<div class="card-header" id="headingOne">
        <button class="btn btn-link text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
        <button class="btn btn-link text-right" >
          <a class="modificationUtilisateur" href="https://www.google.com/" id=""target="_blank">
            <i class="fas fa-pen fa-pen-indicateur" title="Modifier"></i>
          </a>
        </button>
    </div>

Additionally, I have removed the following from your CSS:

.fa-pen {
  float: right;
  z-index: 100000;
}

And replaced it with:

#headingOne{
  display:flex;
}

I hope this update meets your requirements.

Answer №3

If you're working with bootstrap, consider utilizing the row class to ensure that the <a> is not nested within the <button>

   <div class="row">
      <div class="col-md-9">
         <button class="btn btn-link text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
             Collapsible Group Item #1
         </button>
      </div>
      <div class="col-md-3">
        <a class="modificationUtilisateur" href="https://www.google.fr/" id="">
            <i class="fas fa-pen fa-pen-indicateur" title="Modifier"></i>
        </a>
      </div>
  </div>

Consider implementing something along these lines for improved structure. Hope this suggestion proves useful.

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

Is there a bug in IE9 with CSS precedence?

Two CSS rules are in place: .avo-lime-table th, .avo-lime-table td { background-color: grey; } Next rule: .avo-lime { background-color: green; } All is functioning correctly in FireFox, Chrome, Opera and Safari. However, as usual, Microsoft&apos ...

cssinternet-explorerfirefoxoperator-precedence

Perfect CSS Menu Hover Effect

I created my own navigation menu, and I'm struggling with one thing... How do I change the A tag color to white when hovering over the ul id "navitemul"? I've tried #lovedating#navitemul:hover #lovedating a {color:white} and other methods, but no ...

csscolorshover

Difficulty in updating Vue variable value following a request

Hello everyone, I am facing an issue regarding a variable value. Within the request, I am comparing each array value to see if there is a match and then updating the match variable to true if a match is found. However, the problem arises when the updated ...

javascripthtmlvue.jsvuejs2frontend

Combining the background images of two separate <div> elements results in a deeper shadow effect than when they are individually displayed

Encountering an issue with overlapping background images that results in a darker shadow where they intersect, causing an uneven appearance. The problem arises with a flexible height box containing semi-transparent background images designed to create att ...

htmlcssbackground-image

Tips on toggling between slides with Bootstrap Carousel

I am in the process of designing a portfolio website and have encountered a challenge. I want to divide it into two sections - a brief introduction and a carousel for showcasing projects. While I have managed to set up both sections, I'm facing an iss ...

javascriptcssbootstrap-4carousel

What is the best way to connect my 'Projects' folder to app.js within a React application?

import "bootstrap/dist/css/bootstrap.min.css"; import Navbar from './components/Navbar'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Home from './components/Home'; import Project ...

javascriptcssreactjs

Adjust the width of an element as its content dynamically shifts

I have a container that contains 6 input fields. Two of them are initially hidden (display: none), but when I click on a checkbox, these two inputs become visible (display: inline). I need the width of the container to adjust and increase when the other tw ...

htmlcss

Using Two JavaScript Functions with Identical Names in One HTML File

I am currently facing an issue with a function where the data is retrieved from the getValue() function. The following code snippet is a fragment. grid.js function gridLoadComplete(){ var data = getValue(); } Take into account the following H ...

javascriptjqueryhtml

How can Play framework be used to display static HTML pages with static JavaScript and CSS files?

I'm currently exploring options for rendering or routing to static web apps stored in the Play's public folder. Here is my project structure: myapp + app + conf + modules + public | + webapp1 | + css | + ...

htmlcssplayframework

Using Javascript to display or conceal a specific child element within a loop, based on which parent element has been clicked

I need assistance with creating a grid of projects where clicking on a specific 'project' in the loop will display the corresponding 'project_expanded' div, while hiding all other 'project_expanded' divs. My initial plan was ...

javascriptphpjqueryhtmlwordpress

Achieve a vertical fill effect within a parent container using CSS to occupy the remaining space

I have set my sights on a specific goal. https://i.sstatic.net/BqqTX.jpg This represents my current progress in achieving that goal. https://i.sstatic.net/unQY9.jpg On the left side, I have an image with a fixed height. The aqua color fills the left s ...

htmlcssbootstrap-5

Scrape data from websites where the main URL remains constant but the information in the table varies

If you take a look at this link, you'll notice that when the next page is selected, the table on the website gets reloaded with new content without any change in the URL. Even after inspecting the developer tools > Network > XHR, it's diffi ...

javascriptpythoncssajaxparsing

I'm having trouble getting CSS to apply to my HTML file. Any idea why?

I conducted tests in both Chrome and Firefox, ruling out any browser-related issues. My CSS has been validated and is error-free. However, when I validate my HTML code, an error message pops up stating "Bad value “stylesheet” for attribute rel on eleme ...

htmlcss

Using regular expressions in PHP to identify HTML elements containing '<p>' that appear after the initial '<H1>' tag

Can you provide guidance on creating a Regular Expression in PHP to identify HTML <p> elements that come after the initial <H1> tag? Here's an example that checks for inequality with the expression: if(!preg_match_all('#<p(.*?)&l ...

phphtmlregex

Leverage the power of Angular by configuring a custom webpack setup to

Implementing the CSS modules concept in my Angular app has been a challenge due to conflicts with existing frontend CSS. My project utilizes SCSS, and I am looking for a way for webpack to modularize the CSS generated from SCSS during the final build step. ...

cssangularwebpackwebpack-style-loadercss-loader

Concealing the pagination buttons for next and previous in Material-UI TablePagination

Is there a way to remove the next and prev buttons in the TablePagination component without affecting the position of the "Showing ..." text? Should I handle this through CSS styling or by configuring the component settings? ...

cssreactjsmaterial-ui

JavaScript: Remove just the specific user input without affecting the rest of the HTML block

I'm facing a dilemma with deleting a specific user input without removing the entire HTML block. I know that the delete button triggers on the HTML ID 'noteDelete', which is the parent of each user input. However, I'm unsure about how t ...

javascripthtml

Position the image in the center of the div both horizontally and vertically

At the moment, I have a header division with two sub-divisions called header-top and header-bottom. I am attempting to position my logo in the top-header section and align it both vertically and horizontally. The logo is aligning correctly horizontally, bu ...

htmlimagecss

Ways to enclose this text with a white border and apply a box-shadow

How can I modify text similar to this image and what is the process involved? ...

htmlcss

What is the best way to transfer information from JavaScript to a JSON database using the fetch API?

Within the userDB.json file, it appears as follows; [{ "username": "john", "xp": 5 }, { "username": "jane", "xp": 0 } ] Inside the app.js file ; async function getUsers() { le ...

javascripthtml