Tag: css

Stretch button height to fill parent td, even when text wrap occurs in tr, increasing td height

Advertisements Take a look at the codepin: https://codepen.io/josh5555s/pen/zYJyWbR The issue looks like this: I want the buttons to be 100% of td height even if the text wrap has increased the td height, as seen in the first row of the above example. I have looked through many Stack Overflow posts on similar topics, but… Read More Stretch button height to fill parent td, even when text wrap occurs in tr, increasing td height

MRLeave a comment

How do I fix a spinning wheel's selections stacking one on top of the other in css?

Advertisements I’ve been trying to get this spinning wheel to work for a few days now, and I’m still having trouble! The CSS code is causing issues, the wheel should display eight equally spaced shapes, and have text on each shape. It does not. Three of the possible outcomes or selections are in the proper… Read More How do I fix a spinning wheel's selections stacking one on top of the other in css?

MRLeave a comment

CSS div transparent background with shadow

Advertisements I have this simple code, it makes the div to be transparent <!DOCTYPE html> <html> <body style=”background-color: aqua”> <div style=”background-color: rgb(255,255,255,0); border: solid 3px #000; width: 50px; height: 50px; box-shadow: 5px 5px 0 rgb(0, 0, 255);”> <div style=”color: #fff; text-align: center; margin-top: 15px;”> Hello </div> </div> </body> </html> but what I need to achieve… Read More CSS div transparent background with shadow

MRLeave a comment

Show placeholder text with a p tag with CSS only, when it's empty or there is a br tag inside

Advertisements I’m trying to show a placeholder text to a p tag. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test</title> <style> p:empty:not(:focus):before, p br:only-child:not(:focus):before { content: attr(data-text); } </style> </head> <body> <p data-text="placeholder text…"></p> </body> </html> The above code works. But when I tried to add a br tag inside the p tag like <p… Read More Show placeholder text with a p tag with CSS only, when it's empty or there is a br tag inside

MRLeave a comment

Apply css to all elements except first one with same class name

Advertisements I have below html structure, I want to apply border css to all elements with class name flw__subform-instance except first one: <div class="flw__subform__content-wrapper"> <div class="flw__subform__header"></div> <div class="flw__subform-instance">1</div> <!–exclude this bc 1st element –> <div class="flw__subform-instance">2</div> <div class="flw__subform-instance">3</div> </div> I have tried below code but its not working: .flw__subform-instance{ padding: 20px; border-top: 1em solid #ddd;… Read More Apply css to all elements except first one with same class name

MRLeave a comment

How to keep a flexbox from expanding horizontally

Advertisements I have been all over the net, tried many solutions, none of which work. I have a container that will house several rows (like a data grid). The row is defined in the following manner: .container{ width: 500px; height: 300px; border: 2px solid } .row{ width: 100%; height: 48px; background-color: dodgerblue; display: flex; align-items:center;… Read More How to keep a flexbox from expanding horizontally

MRLeave a comment

is there a way to inherit css generic code

Advertisements body { background-color:#DFE1E1; font-family:sans-serif; margin-left:30%; } /*1st */ h1:nth-child(1) { color: red; border:5px solid rebeccapurple; overflow:hidden; animation: animate 5s ease-in 1 forwards; } /*2nd */ h1:nth-child(2) { color: red; border:5px solid blue; overflow:hidden; animation: animate 5s ease-in 1 forwards; } /*3rd */ h1:nth-child(3) { color: red; border:5px solid green; overflow:hidden; animation: animate 5s ease-in… Read More is there a way to inherit css generic code

MRLeave a comment

How to remove padding from html element when pasted in js

Advertisements there is a problem with inserting html into js , when inserting indents are added and I don’t understand why. Building a simple calculator for (var i = 0; i < num.length; i++) { num[i].addEventListener("click", function () { if (!operator) { console.log(this) num1 += this.textContent ny.push(num1) console.log(ny) result.innerHTML = num1; } else if (operator.length… Read More How to remove padding from html element when pasted in js

MRLeave a comment