CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Question3r
Question3r

Reputation: 3802

Make the parent div as big as its child

I got some div in a parent div. The parent div should only be as big as its child divs.

So this is the current view

function record(id, title, description, content, dateOfCreation) { // the object
  this.id = id;
  this.title = title;
  this.description = description;
  this.content = content;
  this.dateOfCreation = dateOfCreation;
  this.lastEdited = dateOfCreation;
}

function init(){
  var elements = []; // all records get stored here

  for (var i = 0; i < 3; i++) { // create some objects
    elements.push(new record(
         i,
         "title " + i,
         "description " + i,
         "content " + i,
         "date " + i));
  }

  $(elements).each(function (index, currentRecord) { // create the div containers
    var recordContainer = $("<div></div>");
    recordContainer.addClass("recordContainer");
    $(document.body).append(recordContainer);

    recordContainer.append($("<div>" + currentRecord.title + "</div>"));

    recordContainer.append($("<div>" + currentRecord.description + "</div>"));

    recordContainer.append($("<div>" + currentRecord.dateOfCreation + "</div>"));

    recordContainer.append($("<div>" + currentRecord.lastEdited + "</div>"));
  });
}

init(); // call the routine
.recordContainer{
    margin: 10px;
    border: solid;		
    border-width: 1px;		
    border-radius: 2px;		
    border-color: #e8e9e9;
    box-shadow:  1px 1px 1px #999999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

So I want recordContainer having a relative size. When looking for some information, I tried out adding display: inline; to "recordContainer". But then doing this, the container gets weird (?). You need to try it out, then you will see what I mean.

How can I achieve my desired div?

Upvotes: 2

Views: 120

Answers (2)

Ricardo Ferreira
Ricardo Ferreira

Reputation: 616

I made some changes to improve semantics and performance as well. The problem is that the element "DIV" is by default a block element and therefore occupy the entire horizontal space.

I hope this solution helps you.

function record(id, title, description, content, dateOfCreation) { // the object
        this.id = id;
        this.title = title;
        this.description = description;
        this.content = content;
        this.dateOfCreation = dateOfCreation;
        this.lastEdited = dateOfCreation;
}

function init(){
var elements = []; // all records get stored here

for (var i = 0; i < 3; i++) { // create some objects
            elements.push(new record(
                 i,
                "title " + i,
                "description " + i,
                "content " + i,
                "date " + i));
}

$(elements).each(function (index, currentRecord) { // create the div containers
            var recordContainer = $("<div class='recordContainer'><div class='container container-" + index + "'></div></div>");
            $(document.body).append(recordContainer);

            $(".container-" + index).append("<div>" +
              "<p>" + currentRecord.title + "</p>" +
              "<p>" + currentRecord.description + "</p>" +
              "<p>" + currentRecord.dateOfCreation + "</p>" +
              "<p>" + currentRecord.lastEdited + "</p></div>");
        });
}

init(); // call the routine
.recordContainer{
  display: inline-block;
  margin: 0;
}

.container{
  margin: 0 .5em;
  padding: .5em;
  
  border: 1px solid #cccccc;
  -webkit-border-radius: 2px;		
  -moz-border-radius: 2px;		
  border-radius: 2px;		

  -webkit-box-shadow:  1px 1px 10px #ccc;
  -moz-box-shadow:  1px 1px 10px #ccc;
  box-shadow:  1px 1px 10px #ccc;
}

.container p {
  text-align: center;
}

.container p:nth-child(odd){
  background: #eee;
  margin: 0;
  padding: .3em .5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Peter B
Peter B

Reputation: 24247

If you need them to be narrow but remain stacked vertically, use display: table, see the snippet below.

If you need them to be narrow and go onto the same line (and possibly wrap if that no longer fits), use display: inline-block.

function record(id, title, description, content, dateOfCreation) {
  this.id = id;
  this.title = title;
  this.description = description;
  this.content = content;
  this.dateOfCreation = dateOfCreation;
  this.lastEdited = dateOfCreation;
}

function init() {
  var elements = []; // all records get stored here

  for (var i = 0; i < 3; i++) { // create some objects
    elements.push(new record(i, "title " + i, "description " + i, "content " + i, "date " + i));
  }

  $(elements).each(function(index, currentRecord) {
    var recordContainer = $("<div></div>");
    recordContainer.addClass("recordContainer");
    $(document.body).append(recordContainer);

    recordContainer.append($("<div>" + currentRecord.title + "</div>"));
    recordContainer.append($("<div>" + currentRecord.description + "</div>"));
    recordContainer.append($("<div>" + currentRecord.dateOfCreation + "</div>"));
    recordContainer.append($("<div>" + currentRecord.lastEdited + "</div>"));
  });
}

init(); // call the routine
.recordContainer {
  margin: 10px;
  border: solid;
  border-width: 1px;
  border-radius: 2px;
  border-color: #e8e9e9;
  box-shadow: 1px 1px 1px #999999;
  display: table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Related Questions