CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
Radu
Radu

Reputation: 1066

Angular JS ui-grid on Bootstrap modal

I have a modal and in that modal I want to add a ui-grid. The problem is that I don't want tot set fixed size. It seems that the class "ui-grid-pinned-container-" is not calculated as we expect.

I know that something similar has been fixed on https://github.com/angular-ui/ng-grid/issues/1296. But it seems to not work.

I'm using C# with angular JS and the modal is a patial view that look like this:

<script type="text/ng-template" id="company">
<div class="modal-header">
    <h3 ng-bind="title"></h3>
</div>

<form class="form-horizontal" role="form" name="formName" novalidate>
    <div class="modal-body">
        <!--the following styles only works inline - do not remove-->
        <div ui-grid-selection ui-grid="gridOptions" class="grid-class"></div>
    </div>
</form>
<div class="modal-footer">
    <button ng-click="cancel()">Close</button>
    <button ng-click="select()">Select</button>
</div>

Do you got any thoughts how this can be solved?

Upvotes: 4

Views: 3166

Answers (2)

Radu
Radu

Reputation: 1066

After some investigation I found an attribute that can be added to the grid and this is 

ui-grid-auto-resize

Using this will re-size the grid accordingly.

Upvotes: 1

frajk
frajk

Reputation: 863

This link looks like it may help - http://ui-grid.info/docs/#/tutorial/213_auto_resizing

Include ui.grid.autoResize as an app dependency, and add it as a directive to your grid element, the same as you're doing with ui-grid-selection.

Upvotes: 1

Related Questions