Wrap button around another button

In my code, how can I cause the text of the second button to wrap around the first one? With flex they are always next to each other, but I want it to just wrap around as you see it with images and text in newspaper for example. Here the playground: https://jsfiddle.net/jytb2n61/18/
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
24 Replies
b1mind
b1mind•11mo ago
Firstly why... You wouldn't want a button in a button its not going to end well xD
Jochem
Jochem•11mo ago
they're <button></button><button></button> in the example. I think they want the buttons rendered inline
b1mind
b1mind•11mo ago
🤔 yea the question is unclear why is the lorem a button ? I just have more question than answers.
Jochem
Jochem•11mo ago
This is very correct btw, it's not even allowed. You can't have interactive elements inside a button element. Sometimes it works, but it's unpredictable and against spec
PostgreSQL
PostgreSQL•11mo ago
I do not want a button inside of a button, just two buttons next to each other, and the right one wrap around the left one, as shown in this image with different elements. I need the text to be a button element because it is clickable, and expands a sidebar. It is against the spec to attach an on click listener to a <p> element
b1mind
b1mind•11mo ago
that is float so you wouldn't have the text be a button but a p and float the button inside the p
Jochem
Jochem•11mo ago
so you want both that image to be clickable, and the text to be clickable? What happens when you click each one?
b1mind
b1mind•11mo ago
https://codepen.io/b1mind/pen/abEWBmy for the float and hold on I have a nice trick for cards right that was going to be my question. actually. do they both need to have different actions or directions? again just why xD mm I can't find teh card method I'm thinking of, but I'll post it if I do.
PostgreSQL
PostgreSQL•11mo ago
yes, both need to be clickable. The text clickable is to edit the item (item title), and I could make a button on the right with some pen for example to edit, but it takes up to much space for me
Jochem
Jochem•11mo ago
that feels like a UI nightmare if I'm honest
PostgreSQL
PostgreSQL•11mo ago
it is not, just great feels the most intuitive anyways, seems like this is impossible @Jochem if i had <button /><p /><button />, could I make that float somehow like shown in the image
Jochem
Jochem•11mo ago
if you must do it like this and don't want a click handler on a p, do something like this in your html:
<button>
<img />
<p>...</p>
</button>
<button>
<img />
<p>...</p>
</button>
then stick the click handler on the button and determine which element was clicked. Keep in mind that you're not allowed to have interactible elements inside a button though, so that includes turning contentEditable on for the p (or the original button idea)
PostgreSQL
PostgreSQL•11mo ago
that is what I wanted to avoid it is even worse
Jochem
Jochem•11mo ago
honestly though, it's a very cursed way of doing things
PostgreSQL
PostgreSQL•11mo ago
i would use this, but not sure how to make it work
Jochem
Jochem•11mo ago
I don't see how that would solve anything if I'm honest have the edit pencil appear on hover so it doesn't take up space maybe?
PostgreSQL
PostgreSQL•11mo ago
how would that work on mobile then my problem is edit pencil takes up a ton of space on small devices
Jochem
Jochem•11mo ago
part of the problem you're running into, is that the "no click handlers on a P" is because P's don't look like clickable elements. You're trying to coerce a button into a p, just so that you can tell yourself that you're following spec, but it's still trying to get a P (that just so happens to be a button instead) to be a clickable element
PostgreSQL
PostgreSQL•11mo ago
maybe i should use p and attach onclick but there has to be some better solution your hover idea is good but on mobile it sucks
Jochem
Jochem•11mo ago
the better solution is redesigning the UX so it doesn't rely on people clicking random text I'd never think of clicking random text to edit it, that's not how the web works. On top of that, I click and highlight text if I'm reading it, so that handler would drive me up the wall. And on mobile, accidental taps are a thing when you try to scroll, so that's honestly even worse
PostgreSQL
PostgreSQL•11mo ago
i guess i do <button> <p> <button>
Jochem
Jochem•11mo ago
again, not sure how that solves anything, other than if the button is just [edit] or similar
PostgreSQL
PostgreSQL•11mo ago
that is what it is
b1mind
b1mind•11mo ago
Why not an edit button Clear ux Assuming it would be tied to if user is editor, would just hide/show based on that?
Want results from more Discord servers?
Add your server