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 develop Desktop Apps using HTML/CSS/JavaScript? [closed]

    How to create a table using multiple span in one div using CSS

    How to incorporate specific CSS files for Responsive Design for Desktop and Mobile Browsers

    How to change CSS to the same class but another input name

    How to disable css Animation keyframes in opera?

    How can I use a CSS transform to vertically-center two overlapping elements?

    Maintain border-spacing when using show() on a display:table element hidden with display:none

    How to add far-future expires headers to minified cssfiles/scripts?

    How to remove unused CSS but keep comments?

    How to Properly Add CSS in a MailMessage

    How to set transition from JavaScript while still inheriting style from CSS [closed]

    How to get a zoomed out background image?

    How to build those rectangular with picture and text css bootsrap? [closed]

    How do you overlay two divs and make them the same height?

    PHP - How to change the class of a link

    how to animate a css grandient change with jquery

    How to make SVG clip-path work correctly in Google Chrome?

    How to get :before selector behind its box?

    How to center verticaly n inline containers with different font-size?

    How to wrap a DIV around a DIV with CSS

    How to change the display property in a css class using js when user clicks a button

    How do I investigate a “style sheet could not be loaded” message in Firefox?

    Show div on button click with multiple divs

    How to create a form that flys out onto the screen using javascript/css

    how can i add style with CSS to