I am working on an Angular app for a client and need to implement a clickable button at the bottom right of a contenteditable element, similar to the image shown below :
https://i.sstatic.net/J6XdW.png
The challenge is that the content needs to be scrollable while keeping the button fixed in place without overlapping with the text. Adding margins or padding is not an option as it would create blank spaces around the editable area.
I am open to using any JavaScript/CSS techniques or libraries to achieve this functionality.
EDIT #1 : To provide more context, here is a snippet of the code:
<p id="editfield" contenteditable="true"></p>
http://jsfiddle.net/4yr7jsz1/24/
The aim is to have a "contenteditable" element where users can type text, but the text should remain above the round button and still be scrollable.
EDIT #2 : I have made progress with positioning the button using a ":before" element, but I'm facing difficulty in changing its parameters dynamically via JavaScript. Here is the HTML structure:
<body ng-app="MyApp">
<div id="editable-content" ng-controller="SimpleController">
<span id="clickable-zone"></span>
<p id="editfield" contenteditable="true"></p>
</div>
</body>
The #clickable-zone represents the button that needs to be positioned correctly inside the contenteditable element.
To manipulate the button's position, I use JavaScript to insert an empty element within the contenteditable container.
app.directive("contenteditable", function() {
return {
restrict: "A",
link: function(scope, element, attrs) {
// Code block
}
};
});
Additionally, CSS rules are applied to style the different elements and establish the desired layout inside the contenteditable element.
[contenteditable] {
/* CSS styles */
}
.inside_element {
/* CSS styles */
}
.myimage:before {
/* CSS styles */
}
#clickable-zone {
/* Button styles */
}
#editable-content {
/* Container styles */
}
If anyone has suggestions or solutions on how to achieve this layout, your help would be greatly appreciated :)
Thank you in advance!