Once I have successfully created a resizable div (using resize:both in CSS), I am able to adjust its size by clicking on the bottom-right corner of the div. When viewed in Firefox, it appears like this:
However, I would like to add my own custom image in that corner. Can anyone advise me on how to achieve this?
#resizeablediv {
width:200px;
height:200px;
resize:both;
background-color:black;
overflow:auto;
}
If you want to add a custom button or image to the bottom right corner of a div, follow these steps:
.parent {
border: none;
cursor: pointer;
display: inline-block;
padding: 0;
position: relative;
}
.parent:after {
border: 3px solid cyan;
border-radius: 50%;
bottom: 0;
box-shadow: inset 0 0 0 1px rgba(14, 19, 24, .15);
box-sizing: border-box;
content: " ";
cursor: pointer;
display: block;
pointer-events: none;
position: absolute;
right: 0;
height: 20px;
width: 20px;
animation: blink 2s infinite;
}
@keyframes blink {
from,
to {
background: rgba(0, 255, 255, 0.5)
}
50% {
background: transparent
}
}
.child {
background: salmon;
cursor: pointer;
height: 150px;
width: 345px;
min-width: 300px;
min-height: 150px;
max-height: 100vh;
max-width: 100vw;
opacity: 0;
overflow: auto;
pointer-events: none;
resize: both;
background: #444;
}
.content {
padding: 20px;
position: absolute;
left: -7px;
right: -7px;
top: -7px;
bottom: -7px;
color: cyan;
font-family: Arial;
background: #444;
letter-spacing: 2px;
border-radius: 15px;
}<div class='parent'>
<div class="content">
r e s i z e a b l e r e s i z e a b l e r e s i z e a b l e r e s i z e a b l e r e s i z e a b l e r e s i z e a b l e r e s i z e a b l e r e s i z e a b l e r e s i z e a b l e r e s i z e a b l e r e s i z e a b l e r e s i z e a b l e
</div>
<div class="child"></div>
</div>After conducting some research on the resize feature, it appears that it is still relatively new and not widely supported by all major browsers. Based on my findings, there currently isn't an established method for customizing this element.
If you're interested in learning more about the resize specification, you can visit the following page:
https://developer.mozilla.org/en-US/docs/Web/CSS/resize
Given the limitations, there are two potential options available, although neither is without drawbacks:
1) Consider using a background image. While this won't completely hide the resize icon, it will help to obscure it.
2) Another alternative is overlaying a div to contain your desired image with "pointer-events: none;" applied. This approach allows the resize icon to remain visible but can be concealed beneath an absolutely positioned div containing your image.
.custom-image{
background:pink; //you could set this background to your custom image.
height:7px;
width:7px;
position:absolute;
bottom:0px;
right:0px;
pointer-events: none;
}
I have made updates to your fiddle to provide a demonstration. DEMO
background style: grey image-url(https://i.sstatic.net/Ckblr.png) no-repeat positioned at the bottom right;
The browser renders this content and its styles are unchangeable using CSS. For a custom image, try positioning it in the bottom-right corner.
An issue I am facing is with a DIV element that needs to always be positioned in the upper right corner of another DIV. Initially, using absolute positioning seems like the solution, but when the parent DIV has a scroll function, the first DIV disappears f ...
To better understand my issue, I created a StackBlitz demo: https://stackblitz.com/edit/angular-aqmahw?file=src/app/tiles-example.css Screenshot My tiles can have four different widths (25%, 50%, 75%, 100%). The tiles must fit on only two lines, so if a ...
Whenever a link in an iframe is clicked, I need to close the iframe and div elements. I have seen websites that are able to achieve this functionality, but I can't remember the specific URLs. A while ago, I copied this code from a website to detect ...
Don't worry, I have already searched many places and tried to watch other forums and videos. I'm not looking for an easy solution. When I submit a form on my page it redirects to www.mypag.com/contact.php. I'm trying to use AJAX so that the ...
Hello, I am currently facing an issue with my PHP code. I am unable to resolve the error that is shown in the images below. I would like to make .$row[title] clickable, so that it can open a new PHP page. On this new page, I plan to add some descriptions ...
I'm currently working with Zend Framework 2 and I have a question regarding accessing data defined in HTML within my JavaScript code. Here is the HTML snippet: <tr class="MyClass" data-MyData="<?php echo json_encode($array);?>"> And her ...
I'm currently experiencing a challenge with adjusting the text on two specific pages. On one side, there is a box with text, while on the other are two MDL cards displaying dialogues. The trouble arises when I try to set a fixed position for the text ...
I am struggling to figure out how to hide the overflow text that is spilling out of the div. I attempted using overflow: hidden;, but unfortunately, it didn't work as expected. Additionally, I would like the text to loop back to the beginning once it ...
I'm currently developing a program to retrieve and display data from the OpenSky-network API. The API returns an array of airplane information arrays, and I am looking for a way to present this information in an HTML table. Specifically, I want to ext ...
I am attempting to add text and a nested div at the end of a list-group in order to achieve HTML output like this: <div class="list-group-item"> <div class="small> Username <div class="pull-right"> <a class="btn btn-li ...
I've set my vertical navigation to be 10% width and my content to be 90%, but for some reason, I can't get them to align properly next to each other. I've experimented with float: left and display: inline-block, but so far nothing has worked ...
I am looking to utilize aria-expanded="true" in order to modify a css property such as an active class : <li class="active"> <a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true"> <span class="networ ...
Whenever a user clicks on a button, I want to add more content to the page. The new content will be visually clear, but how can I ensure that screen readers can easily access it? I've come across two best practices that suggest additional steps may b ...
I've encountered a unique issue on my website where a user's selection from one list should update the values in another list: <form id="form1"> <div> <select id="workField"> <option value ...
When dealing with HTML code in Python, special characters need to be replaced using the following lines of code: line = string.replace(line, """, "\"") line = string.replace(line, "'", "'") line = string.replace(line, "& ...
Update: To see a demonstration, visit: http://plnkr.co/edit/i6ngfaMgSE0XGZq3VuBW?p=preview. Please ensure the "preview" window is wide enough to avoid responsive layout issues. I am currently working with Twitter Bootstrap's thumbnails and thumbnail ...
During the hours of 11:30 to 16:00, I tuned in to a video on frontend development. This period of time led me to explore different design elements and coding techniques. <div class="title-wrapper"> <h2 class="title title ...
<head> No content available at the moment. <!-- Here is my code --> <h1>Reserve Your Hall Form</h1> <form class="form-horizontal"> <table class="form-group table table-bordered table-hover"> ...
When I selected the Id Province, I couldn't select the Id City. How can I fix this issue? Controller code snippet to address this: View code snippet for the same: ...
Apologies for the confusion, I realize my question may not have been clear enough. Some of the g elements within the div actually consist of groups of svg elements. You can take a look at an example in this JSFiddle link. These groupings allow for incorpor ...