CSS - Achieving full width on hover even when the element has a specified width setting

I am encountering an issue with my CSS. Although I have successfully centered everything, I am facing a problem with the hover effect in CSS. Whenever I apply the active class or hover over an li element, the background color expands to 100%. Additionally, the paragraph does not align exactly beneath the element but starts from the left side instead. Despite inspecting the code, I cannot seem to identify the root cause of this issue.

What could be causing this behavior and how can I prevent similar issues in the future?

https://i.sstatic.net/pL3ry.png

I aspire to achieve a layout similar to this: https://i.sstatic.net/MFCK1.png

In my attempt to troubleshoot, I have previewed the code and made adjustments to widths and other classes.

// JavaScript function for search filtering and accordion functionality
:root {
  --main-color: #009add;
}

* {
  box-sizing: border-box;
  font-family: 'Century Gothic';
}

/* Various styles for different elements */

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <h2>Frequently Asked Questions:</h2>

  <div class="container">
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search.." title="Search">
  </div>
  <ul id="myUL">
    <li class="accordion"><a href="#">TITLE</a></li>
    </id>
    <div class="panel">
      <p>Solution</p>
    </div>
    <li class="accordion"><a href="#">TITLE2</a></li>
    <div class="panel">
      <p>Solution</p>
    </div>
  </ul>
  </div>
</body>

</html>

Answer №1

Your code has been successfully improved! The main issue was the active hue being applied to the background instead of the border, a common practice in CSS.

While there is room for further simplification, I believe you will appreciate the changes made!

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        :root {
            --main-color: #009add;
        }

        * {
            box-sizing: border-box;
            font-family: 'Century Gothic';

        }

        h2 {
            text-align: center;
            text-transform: uppercase;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #myInput {
            background-image: url('https://cdn.iconscout.com/icon/free/png-512/free-search-1779499-1513194.png');
            background-size: contain;
            background-position: 0;
            background-repeat: no-repeat;
            width: 50%;
            font-size: 16px;
            padding: 12px 20px 12px 40px;
            border: 1px solid #ddd;
            outline: none;
            border-style: none;
            margin-bottom: 12px;
            border-radius: 20px;
            box-shadow: 0 0 5px var(--main-color);
        }

        #myUL {
            list-style-type: none;
            padding: 0;
            margin: 0;
            border-radius: 20px;
        }

        #myUL li {
            border: 1px solid #ddd;
            margin-top: -1px;
            background-color: #f6f6f6;
            padding: 12px;
            text-decoration: none;
            font-size: 18px;
            color: black;
            border-radius: 20px;
            display: block;
        }
        
        #myUL li:hover {
            border: 1px solid var(--main-color);
        }

        .accordion {
            /* background-color: #eee; */
            color: #444;
            cursor: pointer;
            padding: 5px;
            margin: 5px;
            /* width: 100%; */
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #myUL .active {
            border: 1px solid var(--main-color);
        }

        .panel {
            padding: 0 18px;
            display: none;
            background-color: white;
            color: var(--main-color);
            overflow: hidden;
        }
    </style>
</head>

<body>

    <h2>Frequently Asked Questions:</h2>

    <div class="container">
        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search.." title="Search">
    </div>
    <ul id="myUL">
        <li class="accordion"><a href="#">TITLE</a></li>
        </id>
        <div class="panel">
            <p>Solution</p>
        </div>
        <li class="accordion"><a href="#">TITLE2</a></li>
        <div class="panel">
            <p>Solution</p>
        </div>
    </ul>
    </div>
    <script>
        function myFunction() {
            var input, filter, ul, li, a, i, txtValue;
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            ul = document.getElementById("myUL");
            li = ul.getElementsByTagName("li");
            for (i = 0; i < li.length; i++) {
                a = li[i].getElementsByTagName("a")[0];
                txtValue = a.textContent || a.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    li[i].style.display = "";
                } else {
                    li[i].style.display = "none";
                }
            }
        }

        var acc = document.getElementsByClassName("accordion");
        var i;

        for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function () {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.display === "block") {
                    panel.style.display = "none";
                } else {
                    panel.style.display = "block";
                }
            });
        }
    </script>

</body>

</html>

Answer №2

You have the ability to modify your .panel class in the following way:

.panel {
   padding: 0 18px;
   margin: 0 auto;
   width: 90%;
   display: none;
   background-color: white;
   color: var(--main-color);
   overflow: hidden;
}

function customizePanel() {
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

var acc = document.getElementsByClassName("accordion");
var index;

for (index = 0; index < acc.length; index++) {
  acc[index].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
:root {
  --main-color: #009add;
}

* {
  box-sizing: border-box;
  font-family: 'Century Gothic';
}

h2 {
  text-align: center;
  text-transform: uppercase;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#myInput {
  background-image: url('https://cdn.iconscout.com/icon/free/png-512/free-search-1779499-1513194.png');
  background-size: contain;
  background-position: 0;
  background-repeat: no-repeat;
  width: 50%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  outline: none;
  border-style: none;
  margin-bottom: 12px;
  border-radius: 20px;
  box-shadow: 0 0 5px var(--main-color);
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
  border-radius: 20px;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  border-radius: 20px;
  display: block;
  width: 90%;
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

.accordion {
  /* background-color: #eee; */
  color: #444;
  cursor: pointer;
  padding: 5px;
  margin: 5px;
  /* width: 100%; */
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.active,
.accordion:hover {
  background-color: var(--main-color);
}

.panel {
  padding: 0 18px;
  margin: 0 auto;
  width: 90%;
  display: none;
  background-color: white;
  color: var(--main-color);
  overflow: hidden;
}
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <h2>Frequently Asked Questions:</h2>

  <div class="container">
    <input type="text" id="myInput" onkeyup="customizePanel()" placeholder="Search.." title="Search">
  </div>
  <ul id="myUL">
    <li class="accordion"><a href="#">Title</a></li>
    <div class="panel">
      <p>Solution</p>
    </div>
    <li class="accordion"><a href="#">Title2</a></li>
    <div class="panel">
      <p>Solution</p>
    </div>
  </ul>
</body>

</html>

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 it possible to determine the search query if the search term appears within the website URL?

I'm trying to figure out which action url and name term to use when the search term is located in the middle of the URL. For instance, the HTML code below enables me to type text and upon pressing enter or the button, it redirects me to the website w ...

"Dealing with an unspecified number of fields in an ExtJS data model

I have a data model that is designed to accommodate various incoming data by keeping it generic and allowing for the addition of multiple meta data tags to my project. How can I effectively map these data fields to the Model or access them in the array w ...

How can I correct the code that is running both the if and else statements simultaneously?

In the code snippet below, a comparison is made between a username and password. If both are correct, the user is redirected to another page. However, there seems to be an issue where both the if and else statements are executing. Code: if (isset($_POST[ ...

Having trouble connecting DB and D3 using PHP. Struggling to follow D3noob's tutorial to completion

First and foremost, I want to express my gratitude to the amazing community here for all that I have learned. However, I'm currently facing some difficulties in finding the solution I need. I've encountered issues while trying to follow the inst ...

Tips for utilizing a variable selector with jQuery's .attr() method

In a jQuery DataTable, there is a scenario where some values can be modified by clicking an edit button. When clicked, a modal popup appears with a form to enter new values for notes and status: ... "columnDefs": [ { ...

Tips for displaying subtotal in a Vue application using Firebase Realtime Database

I am currently troubleshooting a method in my Vue app that is designed to calculate the total value of all items sold. Despite seeing the correct values in both the database and console log, the calculation seems to be incorrect. Could there be an issue wi ...

What is the accurate way to determine the total number of minutes elapsed from a specific point in time?

String representation of the process start date: '2020-03-02 06:49:05' Process completion date: '2020-03-02 07:05:02' Question: What is the optimal method for calculating the time difference (in minutes) between the start and end ...

The concept of functions in JavaScript: fact or fiction?

Is there a way to show the message "Yes" or "No" based on the return value of a function without directly using the words true and false, and without utilizing alert? Any suggestions would be greatly appreciated. Thank you. function myFunction { if (Ma ...

What steps can I take to address the problem of my undefined .length value?

I encountered a length error while executing line 2 in this code snippet. index.js:10 Uncaught TypeError: Cannot read property 'length' of undefined" Sample Code: <div class="formCustomerName"> <label>Name:</label> ...

Issue with window resize directive not functioning as expected

I have recently crafted a personalized directive in AngularJS. Here's the code snippet: var esscom = angular.module('esscom',['ngMaterial' ,'ngMessages','ui.bootstrap','ui.router']); esscom.directiv ...

Is there a RxJS equivalent of tap that disregards notification type?

Typically, a tap pipe is used for side effects like logging. In this scenario, the goal is simply to set the isLoading property to false. However, it's important that this action occurs regardless of whether the notification type is next or error. Thi ...

Tips for updating WordPress without changes appearing live right away

I want to quickly and easily make CSS changes to a WordPress website without doing it live. Is there a way to make these changes locally and then upload them? What is your recommendation? Some people have mentioned that making changes locally can be diffi ...

Tips for creating an endless loop within a nested v-for in Vue?

Here is my attempt at solving the problem: HTML <ul class="tree"> <li> <span>First Node</span> <ul> <li v-for="(tree, i) in trees" :key="i"> <span v-text="tree. ...

How can I incorporate a second main app.js file in Node.js to improve the organization and cleanliness of my codebase?

Hello, I am currently using Node.js and the Express framework for my project. All of my server-side code is contained within my app.js file, which has become quite complex with almost 250 lines of code. Now, I need to add authentication functionality to my ...

In order to manage this file type properly, you might require a suitable loader, such as an arrow function within a React

Currently, I am in the process of creating an npm package and have encountered a difficulty with the following code: You may need an appropriate loader to handle this file type. | } | | holenNummerInSchnur = Schnur => { | if (this.beurte ...

Insert a numerical value into a list to make a series of numbers whole

I currently have an array of objects that looks like this: var arr = [ { "code": "10", }, { "code": "14", } ] My goal is to expand this array to contain 5 elements. The numbers should ran ...

Fetching content and an image simultaneously via AJAX

My website features a photo gallery that I created using the code below: /*Begin Photo Gallery Code*/ var images = ['g1.jpg', 'g2.jpg', 'g3.jpg', 'g4.jpg']; function loadImage(src) { ...

What is the best way to display values from a Localstorage array in a tabular format using a looping structure

I have set up a local storage key 'fsubs' to store form submissions as an array. Here is how I am doing it: var fsubs = JSON.parse(localStorage.getItem('fsubs') || "[]"); var fcodes = {"barcodeno" : this.form.value.barcode, "reelno" : ...

Rails 5 not allow user submission of bootstrap modal form

I am facing an issue with a form inside a modal in my Rails application. When I click on the submit button, nothing happens. How can I use Ajax to submit the modal form and save its content on another page? <button type="button" class="btn btn-primary ...

Scroll bar for multiple selection select tag without using div element (not supported in firefox)

.selector select[multiple="multiple"] { border-radius: 0; height: 200px; margin: 0 0 0 -1px; max-width: 368px !important; padding-left: 3px; width: 368px !important; } <select id="id_included_packages_from" class="filtered" multiple="multipl ...