Join devRant
Do all the things like
++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatar
Sign Up
Pipeless API
From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple API
Learn More
-
Pretty sure you're going to have to use JS to modify the CSS and inject the correct order based on the data attribute, css is good but it ain't that good - until someone proves me wrong.
example with some pseudo js đ
#untested
this.box.style.order = this.box.attribute("data-sm-order")
edit: I skrewed around with this and couldn't get it to work with css alone.
Good luck. -
If you can predefined in css the order with
:root{
--small-order-1: 1;
--small-order-2:2;
}
And then add
order: var(--small-order-1) //change as required
You can control it that way.
gist of my screw around.
https://gist.github.com/C0D4-101/... -
@theabbie it can, just not to the extent I think @TeachMeCode is trying to achieve âšī¸
-
@C0D4 If we are giving attributes with correct order, it's not sorting actually, atleast not differently on small screen.
-
@theabbie attributes I forgot to remove, I'm working đ
If you modify the :root values you can control the order.
You could control those in JS with the the attribute tags though, not much of a stretch from there.
So if you had
--small-1
--medium-1
--large-1
And use @media to control when they are used, and JS to determine the values based on attribute tags you could pull it all together đ -
@TeachMeCode no I don't do CSS ..... Just curious.
-
@theAbbie, @TeachMeCode
Ok, since I hate you guys now, I went and made it work.
If you shrink screen to 600px the order will change based on the attribute tags.
Don't judge my shitty code, I've just slapped it together for argument sake.
https://gist.github.com/C0D4-101/... -
@C0D4 Now explain why can't we just sort it using JS if we have to use it anyways?
-
@theabbie well... đ¤ˇâī¸
Some people hate writing js to do most of the work css can do anyway.
In this case, css can get us there , but needs a nudge in the right direction so we can handle the customisable sorting based on the elements them selves. -
Looks like attr() is still only supported on content css property - https://caniuse.com/css3-attr
So you will need to use JS for this unfortunately. -
@TeachMeCode FYI, the bot is @highlight
@theabbie You'll be surprised at what CSS3 can do that most people would use JS for (I'm not one of those CSS wizards but have been following a few who are insane).
@arekxv Yeah, especially with 0% support as of now. -
@TeachMeCode You could also try using SCSS; it should certainly help in not doing it manually.
-
@TeachMeCode No problem đ.
-
@Berkmann18 Wait is there an API fro creating Devrant bot?
-
@johnmelodyme Yeah, I don't know much about it tho as I never developed a devRant bot.
-
@C0D4 thanks ...
ANYONE WHO ANSWERS IS A HERO! Im having a CSS issue and yes I’m a CSS noob! I have a flex box with two columns of data and I want the divs to stack when the screen gets narrow enough. The issue is that I want them to stack ordered by a data attribute. I wrote a media query like this
@media (max-width: 767 px) {
.row { flex-direction: column};
.row div { order: attr(data-ordinal) };
}
I want each of the divs to be ordered by the data-ordinal attribute (a number) when the screen gets at most 767 pixels or on a mobile device. I was banging my head for a while on this assshole. Can anyone find the issue here? I may have left out a few details but does this CSS at least LOOK ok? I’m new to media queries. PS sorry, whats the bot that does the highlighting? I forgot it, but luckily this is simple enough to read
question