Is there a way to remove the dots in the right bottom corner of a textarea without disabling resizing?
https://i.sstatic.net/N2zfh.jpg
I have seen a solution using the css property resize:none, but I would like to keep the resizing functionality...
Are there any alternatives to achieve this?
Give these two methods a shot:
.remove::-webkit-resizer {
display: none;
}
.photo::-webkit-resizer {
background: url(http://www.example.com//image/selection.gif);
outline: 1px dotted #000;
}<input class="remove"></input>
<input class="photo"></input>Eliminating the resize handle requires the use of the resize:none; property. However, you can position a div over those dotted lines (resize handles). Take a look at the demo below:
textarea {
position: relative;
margin: 20px 0 0 20px;
z-index: 1;
}
.wrap {
position: relative;
display: inline-block;
}
.handle-hide {
height:12px;
width:12px;
position: absolute;background:#fff;
bottom: 2px;
right: 2px;
pointer-events: none;
z-index: 2;
}<div class="wrap">
<div class="handle-hide"></div>
<textarea placeholder="drag the cyan triangle..."></textarea>
</div>It is possible to achieve this with the help of jQuery; a jQuery UI tutorial can be found here.
The provided source code allows for customization of the textarea element.
<!doctype html>
<html lang="en>
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Textarea</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<style>
.ui-resizable-se {
bottom: 17px;
}
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
handles: "se"
});
});
</script>
</head>
<body>
<textarea id="resizable" rows="5" cols="20"></textarea>
</body>
</html>To modify the CSS, you can include the following:
<style>
.ui-icon, .ui-widget-content .ui-icon {
background-image: none;
}
</style>
after:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">Hey there! Check out this link for a live demonstration of my solution:
Just a heads up, this solution relies on CSS3 resize, which may not be fully compatible with all browsers.
HTML
<div class="resize_this">
<textarea class="no_dots"></textarea>
</div>
ENDS HTML
CSS3
.no_dots{
resize: none;
width: 100%;
height: 100%;
border:none;
}
.resize_this{
resize:both;
overflow: hidden;
border:2px solid black;
border-radius: 5px;
/*HERE PLACE DEFAULT SIZE FOR THE TEXTAREA*/
width: 50%;
height: 250px;
}
ENDS CSS3
I hope this information is useful! T04435
Have you thought about trying a masking technique?
Here is a simple demo (tested on Chrome only):
textarea {
border: 1px solid #000;
box-shadow: inset .3em 0 #000,
inset -.3em 0 #000,
inset 0 .3em #000,
inset 0 -.3em #000;
padding: 10px;
}
DEMO: http://jsfiddle.net/onzqnk5v/
UPDATE (taking comments into account):
This response presents a concept to think about. The code example is just for demonstration purposes and not intended as a final solution.
At long last, I managed to achieve it. The trick is to enclose the textarea within a wrapping element (such as span) and so forth. Check out my demonstration. Surprisingly, no javascript or jquery was used in this process. I utilized pointer-events for the challenging part, a feature that is widely supported by most browsers.
Give this a try for a whimsical experience involving dragging and the div element:
HTML Code
<div id="d2" class="ui-widget-content" contenteditable>
I look like textarea :)
</div>
CSS Code
#d2{
-moz-appearance: textfield;
-webkit-appearance: textfield;
background-color: white;
background-color: -moz-field;
border: 1px solid darkgray;
box-shadow: 1px 1px 1px 0 lightgray inset;
font: -moz-field;
font: -webkit-small-control;
margin-top: 5px;
padding: 2px 3px;
width: 300px;
height: 200px;
}
JQuery Code
$(function() {
$( "#d2" ).draggable({revert: function(obj){
if (obj === true) {
// success
return false;
}
else {
// reverting
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$("#d2").css("width", $("#d2").width()+xPos);
$("#d2").css("height", $("#d2").height()+yPos );
return true;
}
}});
});
This code allows you to drag and resize a div element to mimic a textarea, offering a unique approach.
I am in the process of setting up a server that can handle CRUD operations. The Movie model currently only consists of one property, which is the title. Although I can create new movies, delete existing ones, and even search for a ...
I've come across this question many times, but none of the answers seem to solve my issue. My challenge is centered around aligning text on an image with regards to vertical positioning. Below is the code I'm working with: <div class="col-sm- ...
I have developed a directive for displaying SVG icons and now I want to use this icon directive within another directive. Icon directive: <icon p="shopping-add"></icon> What I am aiming for: app.directive("product", function() { return { ...
In my exploration of Three.js, I have been experimenting with particle clouds and their unique properties. Many examples I have come across utilize shape geometries to generate fields of particles or random parameters for their distribution. However, I a ...
Is it possible to convert a JavaScript object to JSON using angular.toJson only once in my code? Here is an example: $scope.task.tags = [{"id":22,"tag":"printer","created_at":"2016-03-15" }]; $scope.create = function(task) { tmp.tags = angular.toJson( ...
Occasionally, the "add a comment" popup (iframe) in Facebook's Like plug-in fails to close and obstructs access to the content underneath. This issue has been noted while using Chrome 21 and Firefox 15. To replicate this problem, you can visit the fo ...
I am struggling with parsing a string variable back to an object. Despite searching through various posts on this issue, I have not found a solution that works for me. if(subMatch.match(/\{.*\}/)){ /// new Object of some sort var o ...
Seeking advice on how to duplicate JSON within the same JSON at various hierarchy levels. Take a look at this example JSON below: Initial code snippet looks like this: { "data": { "moduleName": { "content": { "modul ...
I have developed a piece of code that enables users to click on a div in order to reveal a dropdown menu containing radio buttons. My goal is to make the arrows rotate 180 degrees when the dropdown menus are opened, and then return to their original positi ...
I am currently facing an issue with sending an inline image string to PHP using $.ajax. Despite successfully receiving the server response from PHP, I am unable to retrieve the data sent from JavaScript in PHP using $_POST. Could you please help me ident ...
Currently, I am utilizing bootstrap 3 in my project. Upon discovering that Bootstrap 4 is a significant overhaul of the entire Bootstrap project, I am contemplating whether it is essential to transition from version 3 to 4. Is there a compelling reason t ...
Currently exploring the depths of typescript. Can someone clarify the distinction between these two code snippets: const App: React.FunctionComponent<CustomProps> = (props: CustomProps) => { return <div>Hello World!</div>; }; and: ...
Here is the code snippet I am currently working with. It involves displaying a background-image when clicking on a link with the class 'home-link', and not showing an image if the link does not have this class. The issue at hand: The problem ari ...
This query has been asked repeatedly, and I have exhaustively attempted numerous solutions. Here is my code snippet: <div class="btn-group" id="btn-container" data-toggle="buttons"> <label class="btn classic-design"> <input type ...
I am encountering an issue with a text area containing formatted json. Users are allowed to make changes in the text area, but due to the json pipe, I cannot use [(ngmodel)}. In addition, (change) and (ngModelChange) do not appear to trigger anything. How ...
The issue with Spin360: All scripts are linked in functions.php add_action('wp_footer', 'add_scripts'); function add_scripts() { if(is_admin()) return false; wp_deregister_script('jquery'); wp_enqueue_script ...
I am new to JavaScript and jQuery, and I am looking to create a panel system similar to Spotify's design. Here is a description of what I am trying to achieve: When a user clicks on an artist or song/album on Spotify, a panel slides in from the righ ...
Is there a way to access the animation within a VRML file using three.js? I've had success with collada files, but I'm not seeing an animation field in the event.content object when it comes to VRML. I've come across this example: https://gi ...
I need help with displaying tooltips only when hovering over anchor tags. Initially, I have hidden the visibility and want to show it on hover. However, the tooltips are not appearing when I hover over them and there are no console errors displayed. Can so ...
I am utilizing angular-archwizard to create circular steps for navigation. When I click on different steps, I can see the circle step border change color (in my case, orange) until I click on the last step. Once I click on the last step, all the other step ...