Hidden div CSS sizing issue

I am facing an issue with my grid of thumbnails and corresponding hidden overlay divs.

When I click on "share" for a thumbnail, the hidden overlay should appear, but it ends up taking the full window space instead of just the size of the thumbnail itself.

I want each thumbnail's overlay to have the same size as the grid thumbnail (orange box) and not occupy the entire window.

If you need more context or code examples, you can find them here. Any suggestions or tips would be greatly appreciated!

Thank you!

Answer №1

The issue is likely caused by the '.share_sheet' being set to position:absolute. When an element is positioned absolutely, it is anchored to the nearest relative parent, which in this case is the screen itself.

One possible solution is to change the positioning of '#card' to relative instead. This should resolve the problem.

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 causing elements like divs, paragraphs, or text not to display within an ion-item after an ion-input is added?

I am currently working on validating a simple form and everything seems to be functioning properly. However, I have encountered an issue with displaying text messages within an ionic 3 list item. The ion-item consists of an ion-input element. When I place ...

javascript html angular ionic-framework

Scrolling to the bottom of the page triggers jQuery to load additional content

Is your jQuery script not working properly when attempting to load more content upon reaching the bottom of the page? It seems to be functional on Safari/iPad and Android Mozilla browsers, but encountering issues on default Android and Chrome browsers. ...

javascript android jquery css scroll

Step-by-step guide on how to activate a colorbox using a targeted Id or class

Below is the code I'm currently working with: <div class="hidden"> <div id="deletePopContent" class="c-popup"> <h2 class="c-popup-header">Delete Practice Sheet</h2> <div class="c-content"> <h3 ...

javascript ajax json jquery colorbox

substitute tags

Is there a way to change the tagName of a tag using jQuery? For example, if I have an HTML document and I want to replace all 'fieldset' with 'div'. Any suggestions would be appreciated! ...

jquery html dom tags replace

Incorporating style elements into text box content

I am looking to enhance my form by enabling users to format text, add lists, and more using basic HTML functionality without requiring knowledge of HTML. For example, let's consider the Bold button: <div class="goBold button">B</div> < ...

jquery

Unable to detect HTML special characters in the text

In my current task, I am facing the challenge of matching two URLs. One URL is retrieved from a MySQL database, while the other one is sourced from an HTML page. When comparing both URLs as strings using Regex, the result shows match.Success = false. Despi ...

c#html mysql regex encode

Developing an isometric dot pattern using CSS

End Goal: My goal is to design a background pattern using isometric dots. I have attempted to mix linear gradients without success. I prefer not to use an image because it restricts me from changing the foreground and background colors dynamically. ...

html css background

Changing ch to Px in CSS

Important Notes: I have exhaustively explored all the questions and answers related to this particular topic. The question I have is very straightforward: How many pixels are equivalent to 1 character? Here's a sample of my code - code Related Sear ...

javascript html css

Tips for successfully passing array index as an image source in Vuejs with v-img?

Hi there! I'm currently attempting to cycle through an array of URLs and insert them into the src attribute. I'm struggling with the correct syntax to accomplish this task. Would you be able to lend a hand? I have an array named DataArray that co ...

javascript html vue.js vuejs2 vuetify.js

Unlocking new perspectives with a click

Currently exploring Angular development, I have encountered a question here but couldn't find the solution I was looking for. I am seeking suggestions and ideas on how to approach this issue. Essentially, my HTML includes buttons like the ones shown ...

html css angular typescript

If the span id includes PHP data that contains a certain phrase

Hey there, it's my first time posting and I'm in a bit of a bind with this script... Let me give you some background information first I am trying to create a click function for a register button that will check the span id (e.g. $("#username_r ...

javascript php jquery html

A chain of events unfolding asynchronously, with each subsequent event relying on the completion of

Currently, I am working on implementing functionality within a .on() jQuery handler like this: $('#idhere').on('click', function(){ //create a couple of divs with a class }); In addition to this, I'm trying to attach an event ...

jquery ajax events asynchronous event-handling

What is the proper way to connect an external Javascript file to an html document within a Play Framework project?

Below is the content of my scala.html file: @() <!DOCTYPE html> <html> <head> <title> Spin To Win </title> <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/styles.css")" ...

javascript html scala playframework

Use jQuery to assign a fresh class to the navigation panel

I'm currently making changes to a WordPress site locally. I'm utilizing jquery.dropotron from ajlkn for the menu, which is working well. However, I'm facing an issue when trying to assign a new class to the 7th child of the navPanel. Somethi ...

jquery css

Exploring the Dynamic Content Security Policy for connect-src in Angular

In my Angular project, I specified the Content Security Policy (CSP) in the meta tags of the index.html file. <meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src 'self' https://baseur ...

html angular meta-tags meta content-security-policy

How can JavaScript be used to rearrange the placement of DOM elements?

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="boxes"> <div class="red" style="width: 300px; height: 300px; color: red"></div> <div class="blue ...

javascript html css

Can a single value be stored in a table using a radio button?

I have created an HTML table that is dynamically generated from a database. I am using a for loop to populate the table. However, I am facing an issue where each radio button in the table holds only one value. What I actually want is for each row to have ...

javascript html

Stop Bootstrap IE menu from closing when scrollbar is clicked

When using IE, the dropdown menu closes when clicking on the scrollbar. However, it functions properly when scrolling with the mouse wheel. To see the issue in action and potentially offer a solution, you can visit this Codeply link: I'm seeking sug ...

javascript css internet-explorer cross-browser bootstrap-4

Display the div without using javascript/jquery if the radio button is chosen

Could someone help me find a solution similar to the one mentioned here: If Radio Button is Selected Show Div I am specifically looking for a way to achieve this using only HTML and CSS, without involving JavaScript or jQuery. Any suggestions would be gre ...

html css

What is the best way to find the specified HTML element using Selenium WebDriver?

Even after attempting to utilize the class Name, it appears that my method is not effective. Is there a way to choose update by employing a span tag? <span class="ui-button-text">Update</span> ...

java html selenium-webdriver

CSSer Q&A