I have a CSS rule that displays a line within a div only when the div is active. The specific SCSS class I am using is:
.active-tab:after {
content: '';
display: inline-block;
height: 4px;
width: 100px;
right: -7px;
background-color: $primary;
}
The visual outcome looks like this:
https://i.sstatic.net/Xc3FI.png
My desired effect is for the line to always stick to the bottom, regardless of the text size.
Despite not including "JS" to attach classes, everything else should function correctly.
.active-tab:after {
content: '';
display: inline-block;
height: 4px;
width: 100px;
right: -7px;
background-color: red;
position:absolute;
bottom: 0px;
left: 0px;
}
div {
height: 100px;
width: 100px;
background: blue;
display: inline-block;
margin: 10px;
position: relative;
text-align: center;
padding-top:30px;
box-sizing: border-box;
}
section {
display: flex;
}
span {
}<section>
<div class="vehicleInfo active-tab"> <span>Vehicle Info</span> </div>
<div class="trafficViolation active-tab"> <span>Traffic Violation</span> </div>
</section>As a newbie in HTML and CSS, I attempted to design a form with various fields. While the fields work perfectly on larger screens, they do not allow input on smaller screens (mobile devices). I used the Firefox inspect tool to troubleshoot the issue, but c ...
Having trouble figuring out where to place my public files. I attempted the solution mentioned in this thread on Stack Overflow but it didn't work for me. I've tried putting my public folder in various locations within the WEB-INF directory, but ...
Having some challenges with CSS selectors, I'm hoping to find some assistance here. Presented with HTML code that resembles the following: <table class=myTable> <tr> <td>this is the td of interest</td> </tr> ...
Introduction( kind of :) ) Starting with the process of generating 5 coffee beans for each cup of coffee. The coffee class includes a strength attribute, and my goal is to visually distinguish the coffee beans which have a strength greater than the select ...
Hi there! :) I'm encountering an issue with my code. I am trying to create a dropdown filter using ajax, php, and json. The first dropdown menu (for selecting the build year of a car) is populated through php. The second dropdown menu allows users to ...
I am attempting to display the content of a URL page (such as ) within a <div> using JQuery, but so far I have been unsuccessful. Here is an example of what I am trying to achieve: <div id="contUrl"> .. content of google.fr page </div> ...
Just a heads up: Some users may have trouble reading code comments. For the record, this is not related to any homework assignment. I'm attempting to combine HTML and a hashmap for the first time. Despite searching for explanations online, nothing see ...
I recently integrated a slider from into my website, following the installation instructions. However, I seem to be facing some conflicts with another script that controls animated div movements on the same page. Upon loading the page, all elements of th ...
I'm currently able to store all generic text data in an array, but I'm facing difficulties with the select boxes inside table cells. In my jQuery script, I have the following: $('.image-button').click(function(){ var myTableArr ...
There is a hidden element that should be displayed upon an action trigger. Sample code: <a href="#Comment" class="btn btn-control" id="Commentbtn"> <svg class="olymp-comments-post-icon"><use xlink:hr ...
I'm encountering an issue with displaying a div after clicking on a link. Upon clicking one of the links within the initial div, a new div is supposed to appear below it. All tests conducted in jsfiddle have shown successful results, but upon transf ...
Is there a way to create a diagonal line that fills in and fits perfectly into a box using just CSS, without the need for any background images? div.diagonal-container { border: 1px solid #000; width:400px; height:400px; margin: 0 auto; ...
I'm looking to implement pagination once the displayed data exceeds a certain limit. Currently, I have set it up so that only 6 items are shown at a time. What I want is to add pagination below the table to display the remaining data. How can I achiev ...
I am facing an issue with my certificate template. It contains dynamic content in the header, body, and footer sections. When printing a single page, everything looks fine. However, when printing multiple pages, the footer does not display at the bottom of ...
Could you please explain the contrast between div#name and #name? Is there a significant difference when using class or id to position an element? Thank you for your help. ...
Looking for some assistance with this issue. The solution I found doesn't seem to be working properly in IE 8. In short, when you add a background image to a table row, the background is showing up in all the inner cells as well. ...
I am having an issue with this particular code block. It seems to be unable to insert the meta tag into the head section. Any suggestions on how to resolve this problem? <html> <head> <title>hello world</title> </head> < ...
I have been utilizing the MUI-Collapse component to display collapsible content within a list. I am looking to add vertical spacing between the Collapse components in the list, but I do not want the spacing to remain when the Collapse is collapsed. I am ha ...
I've been struggling with aligning my cards side by side. They are a series of divs nested in lists under a <ul> Changing the positioning is not resolving the issue, and I'm hesitant to alter the display as it's crucial for responsive ...
When incorporating a React component into my HTML, I follow this pattern: <html> <body> <div id=app>${appHtml}</div> <script src="/bundle.js"></script> </body> </html> Within my application, th ...