I have an accordion menu that was displaying the ::after psuedoelements just fine in firefox until very recently. It still works in chrome. Can't for the life of me figure out why they just disappeared like that in firefox.
The ::after elements displayed just fine a couple of days ago but now all of a sudden they have decided to stop working.
Any assistance that can help would be greatly appreciated.
const accordionItemHeader = document.querySelectorAll(".accordionItemHeader");
accordionItemHeader.forEach(accordionItemHeader => {
accordionItemHeader.addEventListener("click", event => {
accordionItemHeader.classList.toggle("active");
const accordionItemBody = accordionItemHeader.nextElementSibling;
if (accordionItemHeader.classList.contains("active")) {
accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
} else {
accordionItemBody.style.maxHeight = 0;
}
});
});
.accordion {
border-bottom: 2px solid white;
}
.accordionItemHeader {
cursor: pointer;
position: relative;
color: white;
display: flex;
align-items: center;
background-color: black;
font-size: 2rem;
}
.accordionItemHeader::after, .accordionItemHeader.active::after {
font-size: 3.5rem;
position: absolute;
right: 0;
top: 0;
display: flex;
justify-content: flex-end;
align-items: center;
height: 100%;
padding: 0 10px;
}
.accordionItemHeader::after {
content: "\002B" / "expand question";
}
.accordionItemHeader.active::after {
content: "\002D"/ "collapse question";
}
.accordionContent {
padding: 10px;
color: black;
font-size: 2rem;
border: 2px solid black;
}
.accordionItemBody {
max-height: 0;
overflow: hidden;
padding: 0;
transition: max-height 0.5s ease-out;
}
}
<div class="accordion">
<div class="accordionItem">
<div class="accordionItemHeader">
<h4>TEXT</h4>
</div>
<div class="accordionItemBody">
<div class="accordionContent">
<p>dfafaf adfafdafadfadfafafdafaf
</p>
</div><!--accordionContent div end -->
</div> <!--accordionitembody div end-->
</div><!--accordionItem div end-->
</div><!--accordion div end-->
Found the problem. The alt text in the pseudo elements was what was causing the issue for firefox.
Related
Just found out about and tags. Default gives out a very crude style. I had success using the ::marker Pseudo Element to remove the default marker, but don't know how to put it on the right side. Used the ::after Pseudo Element but can't animate it (Rotate 180deg or scale it) when the summary "opens". Is there a proper way to do it? Or did I miss anything with my method? Thanks.
PS: Since I am a newb, I don't know how to get the Google icon font to the codepen. However, you will see what I tried to do with the expand_arrow icon.
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.thing {
background-color: cadetblue;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.new_game {
font-size: 3rem;
}
.what_is_question {
background-color: cornflowerblue;
cursor: pointer;
}
.what_is_question[open] {
background-color: darkmagenta;
}
.what_is_question {
font-size: 5rem;
}
.question_title {
position: relative;
}
.question_title::after {
content: url(./images/expand_more_black_24dp.svg);
}
.what_is_question[open] .question_title::after {
transform: rotate(180deg);
}
.question_title::marker {
content: none;
}
.answer {
background-color: darkkhaki;
font-size: 3rem;
padding-left: 3.5%;
}
<div class="thing">
<h1 class="new_game">QnA</h1>
<details class="what_is_question">
<summary class="question_title">What is the question?</summary>
<p class="answer">The question is the answer.</p>
</details>
</div>
https://codepen.io/consig1iere/pen/bGWXRMW
The problem is that you can't apply transforms to elements with display: inline.
So add display: inline-block; to your .question-title
.what_is_question[open] .question_title::after {
display: inline-block;
transform: rotate(180deg);
}
Hello i'm trying to do like an arrow from a question balloon:
code:
<Styled.MessageWrapper user={message.user}>
<Styled.BotImg src={BotLogo} user={message.user} />
<Styled.ChatMessage user={message.user}>
{message.text}
</Styled.ChatMessage>
</Styled.MessageWrapper>
css:
const MessageWrapper = styled.div`
display: flex;
align-items: center;
justify-content: ${props => (props.user ? 'flex-end' : 'flex-start')};
`;
const BotImg = styled.img`
display: ${props => (props.user ? 'none' : 'block')};
padding-left: 10px;
width: 40px;
`;
const ChatMessage = styled.div`
margin: 1ex;
padding: 1ex;
border-radius: 2px;
${props => (props.user ? messageClient : messageBot)}
`;
now i have this:
i trying make this but not sucess:
Unfortunately, I don't know anything about styled components. However, this solution with just HTML and CSS might help demonstrate how to leverage the technique already recommended by #BugsArePeopleToo.
.messages {
max-width: 400px;
margin: 0 auto;
}
.message {
margin: 0.5em;
}
.message.tx {
text-align: right;
}
.message .bubble {
position: relative;
display: inline-block;
vertical-align: top;
background: #0D47A1;
color: #fff;
padding: 0.5em 1em;
border-radius: 0.5em;
}
.message.rx .bubble {
background: #CFD8DC;
color: #212121;
}
.message .icon {
display: inline-block;
width: 2em;
height: 2em;
margin-right: 0.5em;
border-radius: 1em;
background: #CFD8DC;
}
.bubble.l-caret::before,
.bubble.r-caret::before {
position: absolute;
display: block;
content: '';
top: 0;
width: 0;
height: 0;
border-left: 0.5em solid transparent;
border-right: 0.5em solid transparent;
border-top: 0.5em solid #0D47A1;
}
.message.rx .bubble.l-caret::before,
.message.rx .bubble.r-caret::before {
border-top: 0.5em solid #CFD8DC;
}
.bubble.l-caret::before {
left: -0.5em;
}
.bubble.r-caret::before {
right: -0.5em;
}
<div class="messages">
<div class="message rx">
<span class="icon"> </span>
<span class="bubble l-caret">
test 123 hello world <br>
multiline
</span>
</div>
<div class="message tx">
<span class="bubble r-caret">
ohai
</span>
</div>
</div>
You need a pseudo element on your ChatMessage component.
The syntax for styled components is:
const ChatMessage = styled.div`
position: relative;
&:before {
position: absolute;
/* additional pseudo element styles here */
}
`;
As for the styles of the arrow, you need relative/absolute positioning, and use the transparent border trick to get a triangle. Here is anther question on SO that explains this technique very well, just adjust the positioning, dimensions, color, border, etc to your liking: Speech bubble with arrow
Hi there I am new to css and to stackoverflow and need some help. I am trying to create something like this with css:
image
But I really don't get these results, can someone help me? thanks
I created a snippet which looks like the image you were trying to re-create. Hope it helps.
Useful links -
::after / ::before, flexbox
.hr-sect {
display: flex;
flex-basis: 100%;
align-items: center;
margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
content: "";
flex-grow: 1;
height: 2px;
font-size: 0px;
line-height: 0px;
margin: 0px 20px;
}
.hr-sect,
span {
color: blue;
}
.hr-sect::before,
.hr-sect::after {
background-color: blue;
}
hr {
border: 1px solid blue;
}
.title {
text-align: center;
}
.big {
font-size: 25px;
}
<div class="title">
<div class="hr-sect"><span>HOW TO GET</span></div>
<span class="big">GALAXY SKIN FORTNITE</span>
<hr>
</div>
I need to make dropdown menu with connected area without border between button and dropdown-panel, but the borders at the edges of dropdown panel will be preserved. I use dropdown-pane from Foundation 6.
This is my result:
And this is my target:
Below is my HTML code where dropdown-wrapper is container for dropdown toggler and dropdown-panel. data-v-offset is set -1 to overlap border of item-container. I tried to set up the bottom border of item-container to background color, but dropdown-pane instantly overlap the item-container element.
<ul class="bottom-menu">
<li class="dropdown-wrapper" data-toggle="header-shopping-card" >
<a href="#" class="item-container">
<div class="item-content">
<div class="item-title">
<span>Nákupní košík</span>
<span class="box primary"><span>4</span></span>
</div>
<div class="item-subtitle">12 000 Kč</div>
</div>
</a>
<div
class="dropdown-pane"
id="header-shopping-card"
data-dropdown data-hover="true"
data-hover-pane="false"
data-position="bottom"
data-alignment="right"
data-hover-delay=0
data-v-offset=-1
>
Just some junk that needs to be said. Or not. Your choice.
</div>
</li>
</ul>
And this is my SCSS code:
.bottom-menu {
#include menu-base;
#include flex-align(right, middle);
.dropdown-wrapper {
border: 0;
&:hover {
.item-container {
background-color: $light-gray;
border: 1px solid $dark-gray;
border-bottom: 1px solid transparent;
.item-content {
color: $black;
}
.item-subtitle {
color: $dark-gray;
}
}
}
.dropdown-pane {
background-color: $light-gray;
border: 1px solid $dark-gray;
}
}
.dropdown-pane {
font-size: $global-font-size;
}
.item-container {
transition-delay: 0;
display: flex;
align-items: flex-end;
font-size: $small-font-size;
border: 1px solid transparent;
.item-icon {
width: rem-calc(35px);
height: auto;
color: $accent-secondary;
.item-icon-path {
fill: $accent-secondary;
}
.item-icon-path-circle {
fill: $green;
}
.item-icon-path-check {
fill: $header-primary-color;
}
}
.item-content {
padding-left: 6px;
color: $header-primary-color;
font-size: rem-calc(12px);
.item-title {
margin-bottom: 4px;
}
.item-subtitle {
line-height: 1em;
color: $header-secondary-color;
}
.box {
display: inline-flex;
justify-content: center;
align-items: center;
min-width: rem-calc(21px);
min-height: rem-calc(21px);
color: $white;
font-size: rem-calc(13px);
}
.box.primary {
background-color: $primary-color;
}
}
}
}
}
}
}
I don't know hot to remove border between dropdown-pane and item-container. Can you please help me? I'll be glad for every help.
Thank you,
Michal
.item-container must have position: relative and .dropdown-pane must have position: absolute. After that the z-index is working. Then Bottom border of the .item-container is overlapped by:
.item-container:after {
content: '';
background-color: $light-gray;
position: absolute;
width: 100%;
height: 1px;
left: 0;
bottom: -1px;
}
I am working on WP using a template and I'm trying to get a button to float outside the main container. I went through some already posted questions here, but no luck.
I have tried with padding, margin, overflow, etc. The one thing that seems to work is by setting negative margin, but in that case the div is hidden by the main container.
Here's the HTML:
<div class="purchase_options_meta clearfix">
<div class="purchase_options">
<div id="deal_attributes_wrap" class="section ">
</div>
<div class="buy_button gb_ff font_x_large">
</div>
</div>
</div>
And here's the CSS I'm using:
.container.main {
width: 980px;
padding: 20px;
overflow: visible;
}
.purchase_options {
position: relative;
}
.buy_button {
position: absolute;
background: url(http://topgreekgyms.fitnessforum.gr/wp-content/uploads/2012/12/Button12.png) no-repeat center;
color: white;
height: 100px;
width: 375px;
left: -54px;
top: -16px;
}
.button {
background-color: transparent;
color: #ffffff;
}
.button:hover {
background-color: transparent;
color: #cccccc;
}
.buy_button a {
font-weight: bold;
font-size: 29px;
font-family: arial;
padding: 12px;
display: block;
white-space: nowrap;
position: relative;
margin: 15px 0 0 50px;
}
.buy_button a span {
position: absolute;
right: 33px;
padding: 0 5px;
}
And here's a link to the page. My problem is with the top red button at the left.
I would greatly appreciate any help!
Just in case that helps someone in the future:
I had to add this part of CSS in my code:
#deal_single.clearfix:after {
clear: both !important;
}
Just to be more specific '#deal_single' is the page id.