I have a dropdown with span elements on desktop. I use CSS Flexbox to re-arrange order of the elements:
.parent {
display: flex;
flex-direction: column;
}
.child {
order: 0;
}
.child.disabled {
order: 1;
}
This works well - but on iOS the re-arrange doesnt work. Is it possible to target this as well, or does it needs to be done server-side?
Related
When using the <details> tag, I want to display the flippy triangle to the right of the <summary> element.
So, instead of the default:
▶ My Cool List (left-aligned)
I want to do this:
My Cool list ▶ (right-aligned)
And here it is working in Chrome:
This question helped me write the CSS, which works on Chrome and Firefox:
// Right-align all summaries.
details > summary {
list-style: none; // Remove the default arrow.
display: flex;
align-items: center; // Vertically center the arrow.
}
details > summary::-webkit-details-marker {
display: none;
}
details > summary::after {
content: '▶';
}
details[open] > summary::after {
content: "▼";
}
However, on Safari (tested Mojave on desktop + iOS14 + iOS12), the flippy triangle is pushed to a new line:
My Cool List
▶
In Safari:
So, how do I get Safari to show the flippy triangle on the same line like Firefox + Chrome? It seems this problem is caused by the combination of the use of display: flex with the ::after pseudoelement, but I don't know much about frontend development so I'm at a loss to solve this.
It turns out that Safari doesn't handle <p> tags in the <summary>; when I removed those tags, I didn't even need to use flex to right-align the pseudoelement.
You can add browser-specific CSS to overcome the display: flex; for <summary> issue.
For CSS
#media not all and (min-resolution:.001dpcm) { #media {
details > summary {
display: block;
}
}}
For SCSS
#media not all and (min-resolution:.001dpcm)
{ #supports (-webkit-appearance:none) {
details > summary {
display: block;
}
}}
Is there a short hand method in CSS to combine
display:flex;
flex-direction: row / column?
into one line instead of two?
I know flex-flow, does flex-direction and flex wrap.
I don't know if you are versed in Sass, however if you are, this is a quick way on how to make your idea work, you could also polish this further whith #if statements and #error directives, but here's the quick and easy way:
Here's a Codepen to demonstrate.
The mixin:
#mixin fd($flex, $direction) {
display: $flex;
flex-direction: $direction;
}
This is how you include it:
#include fd([display], [direction]);
.flex-1 {
#include fd(flex, row);
// whatever goes next
}
.flex-2 {
#include fd(inline-flex, column);
// whatever goes next
}
This is what it compiles to:
.flex-1 {
display: flex;
flex-direction: row;
}
.flex-2 {
display: inline-flex;
flex-direction: column;
}
Right-align from overflow text instead of its parent.
Here's my sample code:
https://stackblitz.com/edit/react-jjno6n
Further analysis, your CSS has an issue,
Change your CSS like the below
.CheckoutSteps {
/* display: inline-flex; */
/* align-items: center; */
align-items: flex-start;
display: flex;
justify-content: center;
}
Output
I would strongly recommend you to read this article
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
I've created a hack for now LOL!
componentDidMount() {
this.checkMargin();
}
checkMargin() {
setTimeout(() => {
const paddingRight =
(document.querySelector(
".CheckoutSteps .Step:last-child .StepLabel span"
).clientWidth - 40) / 2;
document.querySelector(
".CheckoutSteps"
).style.paddingRight = `${paddingRight}px`;
}, 200);
}
Is this what you want to achieve my friend? The problem is that the container has a fixed size, I don't know if that is a requirement or just making the circle "circle".
https://stackblitz.com/edit/react-le2wxp
I have some elements inside a DIV which get reordered depending on the size of the screen. I want to style each of these elements differently depending on their flex-box order. Because the media queries are inside a framework, I'd rather not write my own media queries to do this, because I don't want to have to remember to change my media queries if the framework changes the break points for their media queries. I tried using the + sibling selector, but apparently this only applies to the order of elements in the original markup, not the flex box rendering order. Is there any way to style an element based on the order in which it appears in the rendered DOM?
As mention in the comments, you wont be able to use nth-child, as the styles will apply to the order of the actual DOM, not the rendered DOM.
You will have to add extra classes to the markup in order to do this.
So rather than re-order using nth-child, re-order using the extra classes.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.flexGrid {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.flexGrid__item {
border: 1px solid pink;
width: 50%;
height: 100px;
}
.flexGrid__item--alpha {
background: pink;
order: 1;
}
.flexGrid__item--bravo {
order: 2;
}
.flexGrid__item--charlie {
order: 3;
}
.flexGrid__item--delta {
order: 4;
}
#media screen and (min-width: 500px) {
.flexGrid__item {
width: 25%;
}
.flexGrid__item--alpha {
order: 5;
}
}
<div class="flexGrid">
<div class="flexGrid__item flexGrid__item--alpha"></div>
<div class="flexGrid__item flexGrid__item--bravo"></div>
<div class="flexGrid__item flexGrid__item--charlie"></div>
<div class="flexGrid__item flexGrid__item--delta"></div>
</div>
More detail in this fiddle:
https://jsfiddle.net/pua5u8a4/1/
Anyway, I'm trying to create a toggle link, which is basically two buttons on top of each other. One of them would become display:none when it is clicked, and vice-versa.
Currently, my CSS is like this
#main-nav:target + .page-wrap {
position:absolute;
left:-80px;
#open-menu {
display: none;
}
#close-menu {
display: block;
}
}
...but the #open-menu and #close-menu display options don't seem to be showing. Any help?
EDIT:
Alright so I need a preprocessor okay ._.
EDIT AGAIN:
Got it working, thanks guys! Just wondering, is there a way for my entire page div (excluding the menu) to slide out of the page? Or is it some simple overflow-x:hidden?
If you're not using a preprocessor and you don't want to, I suspect you can rewrite your CSS like this, assuming your HTML structure actually corresponds to the selectors:
#main-nav:target + .page-wrap {
position: absolute;
left: -80px;
}
#main-nav:target + .page-wrap #open-menu {
display: none;
}
#main-nav:target + .page-wrap #close-menu {
display: block;
}
Of course, if #open-menu and #close-menu aren't descendants of .page-wrap, then this won't work at all, even if you do use a preprocessor to support writing nested style rules (as a preprocessor can't do something if it cannot already be done with plain CSS).
As mentioned, if these elements aren't related in a way that can be expressed with descendant and sibling combinators, you'll have to make use of JavaScript to achieve what you're trying to do.
As a demonstration, I tried the following:
<div class="page-wrap">
<a id="close-menu" href="#open-menu">Close</a>
<a id="open-menu" href="#close-menu">Open</a>
</div>
with the following CSS:
.page-wrap #open-menu {
display: block;
}
.page-wrap #close-menu {
display: none;
}
.page-wrap #open-menu:target {
display: block;
}
.page-wrap #open-menu:target + #close-menu {
display: none;
}
.page-wrap #close-menu:target {
display: block;
}
.page-wrap #close-menu:target + #open-menu {
display: none;
}
Fiddle Reference: http://jsfiddle.net/audetwebdesign/5aSdW/
Demo Link: http://jsfiddle.net/audetwebdesign/5aSdW/show
Every time you click the Open or Close link, the alternate link is displayed.
I am not sure if this is overly useful, but it can be done.