I am attempting to create a price list with a dotted underline between the price and product that adjusts dynamically in width. Here is my code snippet:
https://jsfiddle.net/romariokbn/2gm27rv6/
<ul class="how-can-i-do">
<li>
<span>Price</span>
<span>15 000 Р</span>
</li>
<li>
<span>Big text price</span>
<span> 3000 Р</span>
</li>
</ul>
However, I am encountering an issue when there are spaces in the text on the right side of the prices.
Utilized the white-space: nowrap; property for styling
ul.how-can-i-do-that-bitch li span + spanul.how-can-i-do-that-bitch {
padding: 0;
width: 293px;
margin: 0 auto;
margin-top: 20px;
line-height: 30px;
}
ul.how-can-i-do-that-bitch li {
display: table;
}
ul.how-can-i-do-that-bitch li span {
display: table-cell;
color: #1e1e1e;
}
ul.how-can-i-do-that-bitch li span:first-child {
position: relative;
font-size: 15px;
color: #949494;
overflow: hidden ;
}
ul.how-can-i-do-that-bitch li span:first-child:after{
content: "";
position: absolute;
bottom: 0.5em;
margin-left: 0.5em ;
width: 100%;
border-bottom: 1px dashed red ;
}
ul.how-can-i-do-that-bitch li span + span {
text-align: right;
width: 1% ; /* Trick it */
vertical-align: bottom ; /* Keep Price text bottom-aligned */
padding-left: 0.5em ;
white-space: nowrap;
}<ul class="how-can-i-do-that-bitch">
<li>
<span>Price</span>
<span>15000Р</span>
</li>
<li>
<span>Big text price</span>
<span> 3000Р</span>
</li>
</ul>
<ul class="how-can-i-do-that-bitch">
<li>
<span>Price</span>
<span>15 000 Р</span>
</li>
<li>
<span>Big text price</span>
<span> 3000 Р</span>
</li>
</ul>Utilizing jQuery UI dynamic tabs in my application requires updating the URL hash value when a user clicks on a tab. After researching solutions on SO, like link1 and link2, I attempted the following approach: Javascript: $( "#tabs" ).tabs({ select ...
I am trying to create a vertical line that remains in the center of a div container regardless of the screen size. I want this line to be 1px thick. However, when I use transform: translate(-50%, -50%);, the border seems to become thicker than expected. Be ...
I have attempted various methods to achieve the desired functionality of having the accordion content close and open accordingly when checking a radio button, while also having the button visually appear as 'checked'. For a more in-depth example, ...
When attempting to display a single line of code within a code block, the layout appears too close to the line numbers (this issue only occurs in Firefox): The HTML code responsible for this display is automatically generated by Hugo and appears as follow ...
I recently implemented a method that calls an AJAX request to my API and the response that it returns is being assigned to an array. In the template section, I am using the v-for directive to display the data. Surprisingly, it only renders once after I mak ...
Why does the following code work in FireFox 23.0.1 and Chrome 29, but not in IE 10? <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> function loadFile1(){ a ...
Looking for a way to apply multiple classNames in Next.js, especially when dealing with variable classnames? I'm following the component level CSS approach. Take a look at my code and what I aim to achieve: import styles from "./ColorGroup.mod ...
Recently, I've been working on a small algorithm that adds a special class to an element when the mouse reaches the halfway point or beyond on the X-axis of the browser. I also have a screenshot that demonstrates where this application will be utiliz ...
My React application is having trouble loading global CSS styles. While local components are able to access their own styled-components, the global CSS styles are not being applied across all components. I have tried various import paths and different file ...
I came across a fascinating website that has a unique scrolling effect. As you scroll down the page, only the elements and images move while the page itself remains static, creating an interesting visual effect. I tried to replicate this on my own websit ...
I'm currently designing an HTML email signature for Outlook, but I'm having trouble with formatting and ensuring it looks consistent across different devices. When I preview the HTML in my browser, it appears exactly as I intended. However, I am ...
Attempting to implement twitter bootstrap for a top navigation bar on my master page. http://jsfiddle.net/ZqCah/1/ Encountering some issues and seeking assistance: 1- Desiring to switch the direction of all content to right-to-left (rtl). This would me ...
Recently, I've been trying to create an accordion list and stumbled upon some code (HTML, CSS, and JS) on www.w3schools.com. When I have the code all in one document and run it as a single .html file, everything works perfectly. However, when I split ...
I have taken on the task of educating my younger sister about programming, and we collaborated on creating this project together. Nicki Minaj Website However, we encountered an issue where the background image does not fully cover the screen when using b ...
I am currently validating a textarea using the NicEdit plugin. var getContent = nicEditors.findEditor("SubSliderDescription").getContent(); bValid = bValid && checkBlankTextArea(getContent, "SubSliderDescription") function checkBlankTextArea(o, ...
Currently, I am facing an issue with adding Google authentication to my website as the redirect function is not working properly. As a solution, I plan to implement manual redirection using JavaScript in case the value of the span element is <span id= ...
http://jsfiddle.net/7RDBk/1/ At the moment, I am using slideUp and slideDown functions to hide and display a div. My goal is to have 25px of the div showing initially before expanding and going back to 25px when clicked. It seems like a simple task, but I ...
I am having trouble with a dropdown menu in my code. Even though I used the code from the official Bootstrap website, the items are not appearing in the dropdown list. <nav class="navbar navbar-expand-lg navbar-dark bg-primary "> ...
I have a codeigniter view that I want to load into a div as an iframe using the following code: <script type='text/javascript'> $(document).ready(function (){ $('#divId').load('http://www.domain.oo/page.php?test=1); }); ...
When working with multiple forms in a PHP file that are called using the 'include' command, I encountered an issue where placing the include command before the forms on the HTML page made it work. However, I needed to call the include command bel ...