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
Firstly why...
You wouldn't want a button in a button its not going to end well xD
they're
<button></button><button></button> in the example. I think they want the buttons rendered inline🤔
yea the question is unclear
why is the lorem a button ?
I just have more question than answers.
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
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> elementthat is float
so you wouldn't have the text be a button but a p
and float the button inside the p
so you want both that image to be clickable, and the text to be clickable? What happens when you click each one?
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.
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
that feels like a UI nightmare if I'm honest
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
if you must do it like this and don't want a click handler on a p, do something like this in your html:
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)
that is what I wanted to avoid
it is even worse
honestly though, it's a very cursed way of doing things
i would use this, but not sure how to make it work
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?
how would that work on mobile then
my problem is edit pencil takes up a ton of space on small devices
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
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
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
i guess i do <button> <p> <button>
again, not sure how that solves anything, other than if the button is just [edit] or similar
that is what it is
Why not an edit button
Clear ux
Assuming it would be tied to if user is editor, would just hide/show based on that?