EN
CSS - create resizable element
0 points
In this article, we would like to show you how to create resizable elements using CSS.
Quick solution:
xxxxxxxxxx1
.element {2
resize: both;3
overflow: auto;4
}or:
xxxxxxxxxx1
.element {2
resize: horizontal;3
overflow: auto;4
}or:
xxxxxxxxxx1
.element {2
resize: vertical;3
overflow: auto;4
}Warning: This solution was introduced to Microsoft Edge around 2020.
In this example, we set resize property value to both, so we can resize the element both vertically and horizontally.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
body {7
height: 150px;8
}9
10
.resizable {11
height: 100px;12
width: 100px;13
border: 2px solid;14
resize: both; /* <----- required */15
overflow: auto; /* <----- required */16
}17
18
</style>19
</head>20
<body>21
<div class="resizable"></div>22
</body>23
</html>In this example, we set resize property value to horizontal, so we can resize the element horizontally.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.resizable {7
height: 100px;8
width: 100px;9
border: 2px solid;10
resize: horizontal; /* <----- required */11
overflow: auto; /* <----- required */12
}13
14
</style>15
</head>16
<body>17
<div class="resizable"></div>18
</body>19
</html>In this example, we set resize property value to vertical, so we can resize the element vertically.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
body {7
height: 200px;8
}9
10
.resizable {11
height: 100px;12
width: 100px;13
border: 2px solid;14
resize: vertical; /* <----- required */15
overflow: auto; /* <----- required */16
}17
18
</style>19
</head>20
<body>21
<div class="resizable"></div>22
</body>23
</html>