How to make div expand only from bottom down


Tags: javascript,html,css,css3,css-float

Problem :

I have a div in a modal below. The problem I'm having is when I click on Add Row, this creates another div with a row and expands both top and bottom. The div then goes off the screen after a couple of rows added. Please see screenshots. Note: the query-row element is an angular directive, so that's why you don't see the template for that (which includes the actual fields and add row button). But that's irrelevant in this case.

HTML

<div class="ng-modal ng-cloak" ng-show="true">
    <div class="ng-modal-overlay">
        <div class="ng-modal-close">
            <div class="ng-modal-close-x">CLOSE</div>
        </div>
        <div class="ng-modal-dialog">
            <div class="ng-modal-dialog-content">
                <div class="document-content-wrapper">
                    <div class="document-content">
                        <div ng-repeat="row in rows">
                            <query-row rows="rows" remove-row="removeRow(row)" add-row="addRow()"></query-row>
                        </div>
                        <div class="row">
                            <button ng-click="submit()" class="btn btn-primary">Submit</button>
                            <button ng-click="cancel()" class="btn btn-info">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.ng-modal {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ng-modal-overlay {
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #282828;
    opacity: 0.9;
}
.ng-modal-dialog {
    z-index: 10000;
    position: absolute;
    top: 164px;
    left: 53%;
    width: 800px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    padding: 10px;
    background-color:#FFF;

}
.ng-modal-dialog-content {
    overflow: hidden;
    height: 100%;
}

.ng-modal-dialog-input {
    margin: 0px;
    padding: 5px;
    font-size: 36px;
    width: 100%;
    border: none;
    background-color: #fff;
    outline: 0;
    color: #000;
    font-weight:700;

}

.ng-modal-close {
    position: absolute;
    top: 15px;
    right: 28px;

}
.ng-modal-close-x {
    font-family: Arial, sans-serif;
    display: inline-block;
    cursor: pointer;
    float: right;
    font-size: 18px;
    color: #fff;
}
.ng-modal-title {
    font-weight: bold;
    font-size: 200%;
    display: block;
    margin-bottom: 10px;
    padding-bottom: 7px;
    border-bottom: solid 1px #999;
}

Plunker Example: http://plnkr.co/edit/RFNsrC

First screenshot is just with one row. Screenshot 1 The second screenshot is 3 rows added, and you can see how the modal goes off the screen on the top. I want it to remain fixed on top and grow only towards to the bottom Screenshot 2



Solution :

Here is a codepen, The problem is where you are trying create the new row, it's above not below, try putting in a table. http://codepen.io/calendee/pen/buCHf

  <a href="#" class="button" ng-click="addRow()">Add Row {{counter}}</a>

<table>
  <thead>
    <tr>
  <th width="200">Some Header</th>
</tr>
 </thead>
  <tbody>
   <tr ng-repeat="rowContent in rows">
      <td>{{rowContent}}</td>
     </tr>
    </tbody>
    </table>    

And to set the css of the .ng-modal-dialog as follows:

height:900px;
overflow-x: auto;

Let me know if that works :)


    CSS Howto..

    how to “replace” css Properties with jQuery

    when click on button then show message

    Ionic: how to use cssClass in $ionicPopup?

    How to test .css file for syntax errors?

    How to make a blur effect over a shape in CSS?

    How to resize a canvas without anti-aliasing?

    How do I make hidden description text push the content upwards when it shows

    CSS How to create a container with non-linear borders

    How to make text vertical in a jQuery UI Layout toggler?

    How to hold three different text alignments in one CSS Box?

    how to vertical align a table inside a div

    How can I change a table's column widths?

    How to use HTML/CSS to show images and titles inline?

    CSS transition: how to produce this effect (linking transitions)

    How to make an empty div or container glow with pure CSS?

    How do you make a div display two inline items that stretch the width?

    How to scale canvas and keep its position on screen?

    How to deal with different stylesheets (WYSIWYG Editor and Webpage one) in the same page?

    how to Resize Quick TIme Player to the size of an HTML/CSS DIV

    How to make a CSS mega menu be on the full width of the page? (998px, but in the middle?)

    How to force floating blocks staying in the same row in css?

    How to style this triangle on a circular image?

    How to disable correctly CSS3 transition property when needed

    How to create pentagon shape for avatar image?

    How can I display 2 big buttons next to each other html & css

    How to stop text from overlapping CSS?

    How to change font size of the first option tag in a dropdown menu (select)?

    CSS: Changing div's property on another div's a:hover. Possible ? How?

    How can I use ellipses in a fluid width table without making each column the same size?

    How to select text under multiple “div-li-a href” using css in selenium web driver