CODEWITHSUNDEEP
javascripthtmlcss
Jaitnium
Jaitnium

Reputation: 650

Behavior change when declaring style in-line vs class

I'm simply trying to display a grid of boxes with each box having information about a dog breed. My problem is this: There appears to be a difference in behavior when I declare a style in-line vs the same style in a class. I'm confused why there is a difference, when there shouldn't be any as far as I know.

Here is the code behaving properly: https://i.sstatic.net/VIK6l.jpg This occurs with the code below. The code to note are the dogDisplay class declared in style, and the div of class dogDisplay in the body. The div has an in-line style="position:absolute".

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

   <link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style>
    .dogDisplay {
        display: inline-block;
        width: 300px;
        height: 300px;
        margin: 10px;
        background-color: grey;
    }

    .dogName {
        font-size: 20px;
        text-align: center;
    }

    .img {
        width: 200px;
        height: 200px;
        display: block;
        margin-left: auto;
        margin-right: auto; 
    }

    .content {
        background-color: red;
    }

</style>

</head>

<script>
    //This just loads the dog information from a JSON file
    var dogInfo = [];

    function displayInfo(dogBreeds) {
        $("#container").append("<div class='dogDisplay'></div>");
    }

    window.onload = function() {

        $.getJSON("breeds.json", function(json) {
            var i;
            console.log(typeof(json.dogBreeds));
            dogInfo = json.dogBreeds;
            displayInfo(json.dogBreeds);
        })
    }

</script>

<body>

    <div class="well" style="height:300px"></div>

    <div id="container" class="container" style="width:100%;background-color:lightblue;border:black 2px solid;">
        <div class="dogDisplay" style="position:absolute">
            <div class="content">
                <p class="dogName">Dog Name</p>
                <img class="img" src="images/place-holder.jpg" alt="Place-holder">
            </div>
        </div>
    </div>
</body>

HOWEVER. When moving style="position:absolute" into the dogDisplay class, this is the new behavior: https://i.sstatic.net/iuOVM.jpg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style>
    .dogDisplay {
        display: inline-block;
        width: 300px;
        height: 300px;
        margin: 10px;
        background-color: grey;
        position: absolute;
    }

    .dogName {
        font-size: 20px;
        text-align: center;
    }

    .img {
        width: 200px;
        height: 200px;
        display: block;
        margin-left: auto;
        margin-right: auto; 
    }

    .content {
        background-color: red;
    }

</style>

</head>

<script>
    var dogInfo = [];

    function displayInfo(dogBreeds) {
        $("#container").append("<div class='dogDisplay'></div>");
    }

    window.onload = function() {

        $.getJSON("breeds.json", function(json) {
            var i;
            console.log(typeof(json.dogBreeds));
            dogInfo = json.dogBreeds;

            displayInfo(json.dogBreeds);
        })

    }

</script>

<body>
    <div class="well" style="height:300px"></div>
    <div id="container" class="container" style="width:100%;background-color:lightblue;border:black 2px solid;">
        <div class="dogDisplay">
            <div class="content">
                <p class="dogName">Dog Name</p>
                <img class="img" src="images/place-holder.jpg" alt="Place-holder">
            </div>
        </div>
    </div>
</body>

Why is there a difference? Thank you!

Upvotes: 0

Views: 43

Answers (1)

Malk
Malk

Reputation: 11983

In your first example, this line: $("#container").append("<div class='dogDisplay'></div>"); Conflicts with the starting layout: <div class="dogDisplay" style="position:absolute">

Meaning only the initial .dogDisplay will have the absolute positioning. In the second example, all of them will have the absolute positioning.

Upvotes: 1

Related Questions