CODEWITHSUNDEEP
htmlcssgoogle-chromegoogle-chrome-extensionpopup
Today_or_not_Today
Today_or_not_Today

Reputation: 3

Popup in my chrome extension is tiny and does not show data

I'm coding a Chrome extension that would show a popup, but I cannot manage to control the size of content and only one tiny pixel shows.

Here is a screenshot, for reference:

screenshot

As you can see the two gradient pixels are scroll bars and the one black pixel is the information.

Edit: Would it work instead with fixed or relative positioning?

    <!DOCTYPE html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style type="text/css"> 
body {
  background-color: #ffffff;
  background-image: url(images/background.jpg);
  background-repeat: no-repeat;
  font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', 
Helvetica, Arial, sans-serif;
}

.profile_tab {
  position: absolute;
  top: 30px;
  left: 12px;
}

.settings_tab {
  position: absolute;
  top: 124px;
  left: 12px;
}

.news_tab {
  position: absolute;
  top: 218px;
  left: 12px;
}

    </style>
    <script></script>
  </head>
  <body>
<div 
  class="profile_tab"> <img src="images/Profile_Tab.png"> 
</div>
<div 
  class="settings_tab"> <img src="images/Settings_Tab.gif"> 
</div>
<div 
  class="news_tab"> <img src="images/News_Tab.gif">
</div>


  </body>
</html>

Upvotes: 0

Views: 1482

Answers (3)

oliver
oliver

Reputation: 1

include the body thing in container. Set height and width to container. 

//Css code
#container{
width:250px;
height:300px;
background-color:FFFFFF;
border-width:1px;
margin:0px;
padding:0px;
}

//html code
<!DOCTYPE html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
</head>
<div id="container">
<body>
...
</body>
<div>
</html>

Upvotes: 0

Today_or_not_Today
Today_or_not_Today

Reputation: 3

I was able to create an empty div that I gave a height and a width too in CSS. You can see what I did here:

CSS:

.content {
  width: 470px;
  height: 330px;
}

HTML:

<div class="content">  </div>

Upvotes: 0

Rob W
Rob W

Reputation: 349132

The size of the popup is determined from the width/height of the root element, <html>, also known as document.documentElement.

When an element is absolutely positioned, it's removed from the document's flow. Consequently, the width/height of the element does not contribute to the width/height of the parent elements.

To solve the issue, you can do one or all of the following:

  • Do not use position:absolute.

  • Assign a fixed width/height to the root element (through CSS).

  • Use JavaScript to calculate the width/height of the greatest element, and assign the result to document.documentElement.style.width and .height. The most generic method (=looping through all elements and calculating their bottom/right offset using getBoundingClientRect()) is quite expensive. Because you probably know in advance how your page looks like, you will be able to create a more effective method. For example: select the biggest element and read its .scrollHeight or .offsetHeight properties.

Upvotes: 2

Related Questions