Creating CSS that will allow a div element to automatically adjust its size to match the dimensions of

I have added a CSS status feature to show whether the user is online or not:
https://i.sstatic.net/dz30e.png
Here is the CSS code:

.status-circle-online {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(255, 60, 0);
  border: 2px solid white;
  bottom: 10px;
  right: 10px;
  position: absolute;
}

And here is the corresponding HTML code:

  <div>
    <img
      src={profileImageSrc}
      className="rounded-circle ml-3"
    />
    <div
      className={`status-circle-${online_or_offline_signal} cursor-pointer`}
    />
  </div>

The issue I'm facing is that when I resize the window, the status indicator does not stay in place as intended:
https://i.sstatic.net/xDOoy.png

https://i.sstatic.net/je4p7.png

Any suggestions on how to make it "stick" to the image?

htmlcssreactjsbootstrap-4sass

Answer №1

It's difficult to provide a precise solution without reviewing more of your code. One potential approach is to include position: relative; in the parent div, and then utilize percentages instead of pixels for the positioning of the red circle using right and bottom.

Answer №2

By setting the parent div to have a position of relative, the absolute positioning of the status indicator will be relative to that container:

.status-photo {
  position: relative;
  width: 100px;
  height: 100px;
}

.status-photo img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  object-fit: cover;
}

.status-photo .status {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(255, 60, 0);
  border: 2px solid white;
  bottom: 0;
  right: 10px;
  position: absolute;
}
<div class="status-photo">
  <img
    src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cGVyc29ufGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
  />
  <div
    class="status"
  />
</div>

Answer №3

I found the solutions mentioned above quite useful, but here's an alternative approach that is more adaptable by using percentages:

.status-photo {
  display: block;
  position: relative;
  width: auto;
  height: auto;
}

.status-photo img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  object-fit: cover;
}

.status-photo .status-online {
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background-color: rgb(255, 60, 0);
  border: 1px solid white;
  bottom: 0%;
  right: 0%;
  position: absolute;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to skip through a video quickly in Selenium with Python?

Up to this point, I have successfully used the code below to play a video. However, I am now looking to scrub the video to the end so that I can finish the current season and proceed to the next page. Is there a way to quickly end the video once it start ...

pythonhtmlseleniumautomationpycharm

Why won't the jQuery function trigger when I click, but only responds when I move the cursor?

I am currently working on a website that includes a basic CSS style switcher. The function responsible for handling the theme button clicks is shown below: <script> $(function() { $(".light").click(function(){ $("link").attr("href", ...

javascriptjqueryhtmlcssfunction

Utilizing jQuery animation, generate a zoomOut effect on a square-shaped image that adjusts to fit the width or height of the window while preserving its

Right off the bat: using scale() is not a viable option. Is there a way to dynamically animate my image, which has been scaled to 700% in width or height, back to its original CSS dimensions of auto width and height? Below are the actual dimensions of my ...

jquerycssjquery-animatezooming

What is the best way to include multiple <p> elements in a row using Bootstrap?

What is the best way to display multiple <p> elements inline using Bootstrap? This is the code I have currently: <div className="container d-inline-flex"> <p className="text-nowrap"> This is sent ...

htmlcssnext.jsbootstrap-5

How can I designate a specific .css file from the assets folder for my app to utilize?

I am currently working on a project to develop a web application dashboard using Dash. As I have multiple versions of the web app with different layouts, my goal is to have each version of the app use a specific .css file from the assets folder. However, ...

pythoncssplotly-dash

Is there a way to extract an email address from a database and have it securely and seamlessly added to the recipient field of an email service provider?

I'm currently working on a program that allows an admin to easily select a group of email addresses from a database. Once the admin clicks on a submit button, Yahoo will automatically open and the email addresses will be inserted into the receiver tex ...

phphtmlemailtextboxproject

Eliminate item from array based on certain criteria

In certain scenarios, I must update the filters. Under specific data conditions, I am required to eliminate 1 item from an array. Here is the code snippet: useEffect(() => { let canceled = false; const filters = [ new C ...

javascriptreactjs

Can JavaScript be used to change the style and make a hidden input field vanish from view?

Currently, I am designing a table containing dates along with numerous hidden fields. print "<td"; { $dm=date('Y-m-d',strtotime("+".$i." days", strtotime($m))); print " class=\"overflow\" id=\"$a::$dm\" onclick=\" ...

javascriptcsshidden-field

Radio button validation issue in Angular not resolving

Issue with radio button validation in Angular form. Even when a radio button is not selected, the form submits without displaying any error messages. HTML Code <form [formGroup]="feedbackFormWithArray" (ngSubmit)="submitData()"> ...

htmlangulartypescriptradio-button

The execution of JQuery/Javascript is restricted to only the initial condition within a Visualforce page utilizing the apex:outputpanel tag

After using only JavaScript for some time, I decided to try out jQuery. However, I'm facing an issue with executing a jQuery function. It seems that only the first condition in my code (the first IF) is being executed, while the second one (the second ...

javascriptjqueryhtmlvisualforce

Is it possible to extract the 'loading' state from useSWR without triggering revalidation during fetches?

Someone posed a question to me about managing the "loading" state in SWR: How can you show a loading state between different URL fetches in SWR? The documentation seems to suggest a simple solution: const { data, error } = useSWR(`/api/user/${id}`, fe ...

reactjsnext.jsswr

Unexpected behavior when using padding on the left side of a vertical position

I can't seem to figure out a strange issue. I have a div containing multiple paragraphs, but when I adjust the padding left within the div to align all paragraphs to the left, they not only shift to the left but also move up as if I'm positioning ...

javascripthtmlcss

What is the best way to incorporate additional properties while utilizing useSession in Next.js with TypeScript?

I've encountered an issue while trying to add new properties using useSession() in a TypeScript environment. Although it works on console.log, there is an error related to the type mismatch. The useSession() function typically returns name, email, an ...

reactjstypescriptnext.jsnext-auth

Leverage autoplay feature in HTML5 audio to start streaming your favorite radio station

I am currently facing an issue with trying to automatically launch a webradio on my HTML file. Despite using autoplay, the radio fails to load data in time causing the autoplay feature to be blocked. To tackle this problem, I implemented a setTimeout funct ...

javascripthtmlhtml5-audiointernet-radio

Is there a way to make sure that the antd datepicker response is sent to the backend only after I click on the submit button?

After receiving a response from the antd datepicker and successfully sending it to the backend, I encountered an issue. The response is automatically sent to the backend as soon as a date is selected. However, I want the request to be sent only after click ...

reactjsantd

Designing a slider to display a collection of images

I am currently working on a slider project using HTML, javascript, and CSS. I'm facing an issue where only the first two images (li) are being displayed and it's not transitioning to the other (li) elements. Below is the HTML code snippet: <se ...

javascriptcsshtml

Return attention to the original content of the page once the success banner at the top has been closed

I am working on a React application with multiple pages that all use a shared banner component. After performing an action on the screen, a success or error message appears at the top in the banner. The issue I'm facing is that when the user dismiss ...

reactjstypescriptcomponentsaccessibility

Increasing the thickness of the border on a HTML table every two rows

I recently set up a table with 12 rows and 2 columns, containing various contents. I am looking to add borders to the table, but with a unique twist - after every set of 4 rows, I want to make the horizontal border thicker than usual. Does anyone know ho ...

htmlcss

Display or conceal a div depending on whether the user is on a mobile or desktop browser

In order to optimize the display on different devices, I organized my content into two divisions. The left division contains quantity, price, and item name, while the right division includes product names. For mobile browsers, I would like to hide the pro ...

jqueryhtmlcssmobile

Is it safe to share my Amplitude API key publicly?

As I integrate my react native app with Amplitude analytics, I have a concern about security. Is it safe to include the raw API Key directly in the code? Could users potentially misuse this key and send inaccurate data to my analytics? I'm wondering i ...

reactjsreact-nativeapiamplitude-analytics