Menu
I need a text area field with an embedded button, like on this image:
__________________________________
|Lorep ipsum lorep ipsum lorep ipsu|
|m lorep ipsum lorep ipsum lorep ip|
|sum lorep ipsum lorep ip _________|
|sum lorep ipsum lorep ip| OK |
|________________________|_________|
The text should flow around the button, without being hidden under it.
The only option I could imagine is custom SVG component with text and user action handlers, but that seems to be a bit overkill.
Any suggestion on simple (may be not perfect) approach for this task?
442
I totally suck at this client-side stuff, but it seems to be possible with contenteditable.
.input {
width: 300px;
}
.submit {
border: 1px solid black;
float: right;
text-align: center;
padding: 10px;
cursor: pointer;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class='input' contenteditable=true>
<div type='button' class='submit' contenteditable=false>Save</div>
The text should flow around the button, without being hidden under it.
The only option I could imagine is custom SVG component with text and user action handlers, but that seems to be a bit overkill.
Any suggestion on simple (may be not perfect) approach for this task?
</div>
</body>
</html>It's not quite what you asked for, but maybe a different approach to take. I'm positioning the button at the bottom of a contenteditable div and only showing you it when you hover the lover section.
As i said, it's not a 'solution', more of a different approach of an issue.
.wrap {
position: relative;
}
.text {
height: 200px;
width: 400px;
background: rgba(0, 0, 0, 0.4);
overflow:auto;
}
.bot {
position: absolute;
bottom: 0;
height: 20px;
width: 400px;
padding-bottom: 5%;
}
button {
position: absolute;
height: 100%;
width: 100px;
right: 0;
transition: all 0.8s;
opacity: 0;
}
.bot:hover button {
opacity: 1;
}<div class="wrap">
<div class="text" contenteditable="true">
You can type in me! hover my lower section and you'll see the button!
</div>
<div class="bot">
<button>OK</button>
</div>
</div>Note
This 'solution' could be tidied up, as most css styling is for 'extra bits', like overflow and transitions.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
