CODEWITHSUNDEEP
htmlcsscss-grid
Jon S
Jon S

Reputation: 23

Appending Text to Div Extends Div Beyond Initial CSS Grid

I've created a basic CSS Grid and had everything positioned where I wanted it. When I run my JS (appends info from an API call to a div), the div's dimension push beyond the borders of the viewport. Is there a way to prevent the overall body element from changing and just have the div dynamically increase height?

pics: https://i.sstatic.net/bZPch.jpg

I've tried so many different things and can't seem to figure this out. My fallback will be to just overwrite the div rather than append to it. Code is below.

//Set initial latitute and longitude variables, to be used later
var lat = 0;
var long = 0;

//Google Geocode API to find the latitude and longitude of the txtAddress
$("#submit").on("click", function() {
  var userInput = $("#txtAddress").val();
  //trim the user input to the form needed for the api
  var userSearchTerm = userInput.split(' ').join('+');

  //call the google geocode api
  var queryURLGeocode = "https://maps.googleapis.com/maps/api/geocode/json?address=" + userSearchTerm + "&key=AIzaSyCSAYHZn9fz13c3bsl_RcS13HJu8wDJXCU"
  $.ajax({
      url: queryURLGeocode,
      method: "GET"
    })
    .done(function(response) {
      //Set latitude and longitude from the returned object
      lat = response.results[0].geometry.location.lat;
      //limit decimal points to 4 (xx.xxxx) - form needed for hiking api
      lat = lat.toFixed(4);

      long = response.results[0].geometry.location.lng;
      long = long.toFixed(4);

      //Call the hiking project api
      var queryURL = "https://www.hikingproject.com/data/get-trails?lat=" + lat + "&lon=" + long + "&maxDistance=10&key=200206461-4fa8ac1aa85295888ce833cca1b5929f"

      $.ajax({
          url: queryURL,
          method: "GET"
        })
        .done(function(response) {
          // loop through the response trails and add info to the site
          for (i = 0; i < response.trails.length; i++) {
            var contentDivTitle = $("<div> class='newTrailTitle'");
            var contentDivMain = $("<div> class='newTrailDescription'");
            contentDivTitle.text("Name: " + response.trails[i].name + "     Location: " + response.trails[i].location);
            contentDivMain.text("Summary: " + response.trails[i].summary);
            $("#search-results").append(contentDivTitle);
            $("#search-results").append(contentDivMain);
          }
        });
    });
});
html,
body {
  background-color: black;
  margin: 10px;
}

h1,
h3 {
  color: white;
  text-align: center;
  padding: 5px;
  line-height: 1px;
}

h1 {
  /* automatically changes lowercase to uppercase text; */
  text-transform: uppercase;
}

sub {
  color: white;
  text-align: center;
  line-height: 1px;
  font-size: 15px;
  font-weight: lighter;
}

.container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 800px 500px 200px 50px 100px;
  grid-gap: 3px;
}

.container>div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
}

.container>div:nth-child(1n) {
  background-color: black;
}

.container>div:nth-child(2n) {
  background-color: blue;
}

.container>div:nth-child(3n) {
  background-color: red;
}

.container>div:nth-child(4n) {
  background-color: yellow;
}

.container>div:nth-child(5n) {
  background-color: green;
}

label {
  color: white;
}

#main {
  background-image: url("assets/images/etienne-bosiger-367964.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

#au,
#cr {
  display: block;
  margin: auto;
}

#groupPic {
  padding: 10px;
}
<html>

<head>
  <link rel="stylesheet" href="test.css">

</head>

<body>
  <div class="container">
    <div id="main">
      <div id="title">

        <h1>kairns<sub>&reg;</sub></h1>
        <h3>"find your trail"</h3>
        <div class="search-div">
          <label for="txtAddress">Enter Address: </label>
          <input type="text" name="txtAddress" id="txtAddress">
          <button type="button" id="submit">Search</button>
        </div>
      </div>

    </div>



    <div class="search-results" id="search-results">2</div>

    <div>
      <p id="au">About Us</p>
      <img id="groupPic" src="http://via.placeholder.com/150x150" alt="placeholder image">
      <p id="cr">Copyright 2018.</p>
    </div>
    <div>4</div>
    <div>
      <p>Powered by
        <a href="https://developers.google.com/maps/">Google Maps</a>,
        <a href="https://openweathermap.org/api">Open Weather Map</a>, and <a href="https://www.hikingproject.com/data">Hiking Project</a>
      </p>
    </div>
  </div>

  <!-- JAVASCRIPT -->
  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- custom javaScript -->
  <script type='text/javascript' src='assets/javascript/logic.js'></script>

</body>

</html>

Upvotes: 1

Views: 203

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371689

All in-flow children of the #search-results element will align vertically if you apply: 

#search-results {
     display: flex;
     flex-direction: column;
}

Upvotes: 1

Related Questions