Is there any way to style the resize button?

Asked

Viewed 59 times

3

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 150px;
            border: 1px solid #000000;
            resize: both;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

In the above example you can resize the div up and down or sideways, my question is whether this button is used to resize the div has to be stylized.

html css
  • 4

    This may help: https://stackoverflow.com/questions/18580795/possible-to-style-the-css3-resize-function

  • 1

    @Marceloboni, thanks! Helped a lot.

1 answer

0


You can use the jQuery UI Draggable for this. Instead of using the property resize: both;, you place a stylized element as you like in the lower right corner of the div by applying the draggable to it. As you move the element with the mouse, the div where it is is resized.

In the example below I put a span red square simulating the div resizing area:

$(function(){
   $("#draggable").draggable({
      drag: function(event, ui){
         
         var el = $(event.target);
         var el_width = el.width();
         var el_height = el.height();
         var div = el.parent();
         var div_width = div.width();
         var div_height = div.height();
         var div_padd_top = parseInt(div.css("padding-top"));
         var div_padd_right = parseInt(div.css("padding-right"));
         var div_padd_bottom = parseInt(div.css("padding-bottom"));
         var div_padd_left = parseInt(div.css("padding-left"));
         var hor = el_width - (div_width - ui.position.left + div_padd_left + div_padd_right);
         var ver = el_height - (div_height - ui.position.top + div_padd_top + div_padd_bottom);
   
         // evita redimensionamento se a div for menor que o span
         if(ui.position.left < el_width || ui.position.top < el_height){
            return false;
         }

         div.css({
            width  : div_width+hor+"px",
            height : div_height+ver+"px"
         });
         
      }
   });
});
div{
   width: 300px;
   height: 150px;
   border: 1px solid #000000;
   /* resize: both; REMOVIDO */
   overflow: hidden;
   position: relative;
   padding: 20px;
}

#draggable{
   width: 20px;
   height: 20px;
   bottom: 0;
   right: 0;
   background: red;
   display: inline-block;
   position: absolute;
   cursor: all-scroll;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   <span id="draggable"></span>
</div>

  • 1

    Perfect! thank you very much.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.