CODEWITHSUNDEEP
javascriptandroidhtmlioscss
Pochi
Pochi

Reputation: 13459

How to resize a Java Script element to fit its container window

I am facing an issue i really can't understand.

I have a webview (on android and iOS) which can have one of 3 possible sizes depending on where i am showing it. (for example 600 x 50 or 500 x 45)

Using CSS i have managed to make an image always appear to fill 100% of the webview. However there is another element that i have to make it also fill 100% of this container. This element is loaded with the following code:

<div class='amoad_native' data-sid='123456789'></div>          

<script src='http://j.amoad.com/js/n.js' type='text/javascript' charset='utf-8'></script>

And i also apply the following CSS to it:

position: absolute;
z-index: 2;
left: 0;
top: 0;

But even if i add the width:100% and height:100% it seems completely unaffected by it. The only thing that seems to change its "size" is the viewport:

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

But this seems to render differently depending on the device im using.

This is how it looks like on iPhone 5:

enter image description here

And this is how it looks like on iPhone 6s Plus

enter image description here

Both are set using a viewport scale of 0.9. But my goal really is for the PR Box to fully fill its container. (You can see the same image behind because thats just a normal image that i show in case the PR Box couldn't be loaded due to no internet connection or something.

Upvotes: 12

Views: 4283

Answers (9)

Kieran
Kieran

Reputation: 25

I had the same problem with googles trend embed javascript, the script height was not showing the full data I fixed the problem by targeting a div style and all elements inside the div.

I did notice that using the * in CSS does work but the CON of using it alone is if you have a large site with a lot of data it will resize all your elements, not what most people want.

But you can still use the * by targeting a div and anything inside eg. your script tags, this will only resize your script tag and keep the style of your page intact without problems.

HTML Document Head

href="style.css"
I am not sure if it matters much but I used an external style sheet for the resizing of the elements, this may play a crucial part into this working not sure.

<link rel="stylesheet" type="text/css" href="style.css">

HTML Document Body

DIV
The div helps us style the script tag.

id="target"
We will be using this as our target ID for resizing.

src="script.js"
We will be using an external document, this may or may not matter but I used an external .js file I was having problems with the height and it works fine this way.

<div id="target">
    <script type="text/javascript" src="script.js"></script>
</div>

CSS Document

#target
Targets the id of the div tag.

>
Sellect elements inside the div tag.

*
Applys style to all elements.

#target > * {
    width: 100%;
    height: 500px;
}

Upvotes: 0

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

It seems that you are facing issues with the pixel ratio.

In iPhone 5 the pixel ratio is 2, but in iPhone 6 Plus the pixel ratio is 3. So if the images isn't ready to retina displays you'll obtain a little image in devices with high pixel ratio.

You can use background-size. However, the solutions you'll obtain here will be pure speculation, since you don't share with us the rendered HTML we are unable to help you better.

My suggestion: add this to the box (if the image is a background):

background-size: cover;
width: 100%;

If the image is a <img> tag:

width: 100%;
height: auto;

Upvotes: 1

Jeff Diederiks
Jeff Diederiks

Reputation: 1380

I was not able to load the resource with that script tag. Here is a banner that always takes up 100% width. My meta tag is slightly different from yours. Maybe that was the issue.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            html, body {
                height: 100%;
                padding: 0px;
            }
            #banner {
                position: absolute;
                z-index: 2;
                left: 0;
                top: 0;
            }
        </style>
    </head>
    <body>
        <div>
            <img id="banner" src="https://upload.wikimedia.org/wikipedia/commons/6/67/Ha_Long_bay_%28Vietnam%29_banner_Islands_in_the_bay.png" />
        </div>
        <script>
            var banner = document.getElementById("banner");
            banner.style.width = '100%';
        </script>
    </body>
</html>

Upvotes: 0

Doomer
Doomer

Reputation: 75

I think you can fix this by applying an old school reset to some targeted css. You probably get some default padding or margin applied by different browsers. Try to apply this:

*{
padding: 0 0 0 0;
margin: 0 0 0 0;
border-collapse: collapse;
border-spacing: 0;
border: 0 0 0 0;
}
#My_Image{  
             -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
             box-sizing: border-box;
             height:100%;
             width:100%;
}

There, this should work even if you can't override default padding/margin because the box-sizing property count those as part of height/width.

Upvotes: 1

Randy Stiven Valent&#237;n
Randy Stiven Valent&#237;n

Reputation: 493

The parent is relative?

<div class="parent">
  <img src="http://static.tumblr.com/a4deb37c05fa96b6128b0e097d45c745/oud8baz/mKQmt73js/tumblr_static_sky_banner.jpg" class="theimage">
  <div>
    
    <style>
    html,body{
    width:100%;
    margin:0 auto;
       }
    .parent{
float:left;
position:relative;
float:left;
width:100%;
height:200px;
}

.theimage{
position: absolute;
width:100%;
height:100%;
z-index: 2;
top: 0;
left: 0;
margin:0;
padding:0;
}
      
      
    </style>

Upvotes: 1

Vytas Bradunas
Vytas Bradunas

Reputation: 676

1) Make sure the webview is actually the size you want it to be. Could be that the content is fine but the webview isn't sized/positioned correctly.

2) Ensure that the parent element to amoad_native in the html doc fills the webview area. Set the height and width of this guy.

If you have two child elements and you want them both to fill the parent you should have structure like this:

HTML

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

.parent {
  height: 100%;
  width: 100%;
}

.child {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%
}

Upvotes: 1

Tarun Dugar
Tarun Dugar

Reputation: 8971

Use vh and vw:

min-width: 100vw;
min-height: 100vh;

Upvotes: 1

Akshay
Akshay

Reputation: 1354

You can try a jquery solution, I am not quite sure what u r trying to achieve but hope this helps.

Demo: https://jsfiddle.net/po6vdyo9/

  $(document).ready(function() {

$(window).resize(function() {

  // Height will be calculated acording to window height can be changed to whaterver element u require
  var docHeight = $(window).outerHeight();

  function resizebanner() {
    $('#banner').height(docHeight);
  }

  resizebanner();

})
$(window).trigger('resize');});

Upvotes: 2

seahorsepip
seahorsepip

Reputation: 4819

Try this:

position: absolute;
z-index: 2;
top: 0;
left: 0;
bottom: 0;
right: 0;

Upvotes: 1

Related Questions