1

i'm using angular-gridster for designing dynamic user dashboard. how can we make gridster widget data content responsive while resizing widget callback, can any one suggest me how to make it responsive.

 <div id="gridster" >
                <div gridster="gridsterOpts">
                    <ul>
                        <li gridster-item="widget" ng-repeat="widget in DashboardControls">
                            <div class="box">
                                <div class="box-header">
                                    <h3 style="width: 100%;word-break: break-all; table-layout: fixed;">{{widget.ControlobjectName}}</h3>
                                    <div class="box-header-btns pull-right">
                                        <a title="settings" data-toggle="modal" data-target="#widgetSettingModal" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
                                        <a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a>
                                    </div>
                                </div>
                                <div class="box-content">
                                    <div>                                       
                                         <img class="img-responsive"  ng-src="{{widget.ThumbnailPath}}" />
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
Brahmaiah P
  • 41
  • 4

1 Answers1

0

You'll have to create a custom directive that is embedded into the widgets (or multiple custom directives). This custom directive can contain logic that responds to the data and changes the content of the widgets.

dmunk
  • 31
  • 3