CODEWITHSUNDEEP
htmltwitter-bootstrapangularjsresponsive-design
astronautaid
astronautaid

Reputation: 23

What is the correct way to make an angular app responsive inside a <div> using Bootstrap?

I built a standalone app using angular, and it was responsive (I didn't do any work, just used row-fluid, etc). However, now I'm preparing to install this standalone app into an existing site built in a different language. I bootstrapped a div with angular, and applied Twitter Bootstrap css only to that div.

Then, I used JQuery UI and some angular wrapper directives to make the div where the app lives draggable, droppable, and resizable. I ran into a problem when I started resizing the div, though. The built in responsive design responds to the size of the overall window, not the size of the div.

Sorry about the bad CSS inline styling; I'm still just hacking around to make it work. Here's my code right now -- would love it if anyone had some input.

The partials just have some forms in row-fluid tags, and some tables.

The whole point is that it's a tool that sits in the corner that is pretty small but can be expanded to show a fuller view. Everything needs to fit when it is small, though. 

<div draggable droppable resizable class="bootstrapped" ng-app="myApp" id="ambatool">

 <div id="handle" style="background-color: gray; height: 50px; cursor: move"></div>
        <div style="padding:20px" class="container" id="maintool">
            <div ng-view>
            </div>

         <ul class="nav nav-tabs">
                <li><a href="#/detail" data-toggle="tab" id="detailtab">Detail</a></li>
                <li><a href="#/queue" data-toggle="tab" id="queuetab">Queue</a></li>
            </ul>
</div>
<div id="dock"></div>

Upvotes: 2

Views: 10386

Answers (1)

justinavery
justinavery

Reputation: 2596

What you're looking to achieve is the next step in responsive design and doesn't exist "out of the box". Rather than viewport media queries you need element media queries, where the contents of a div react to the size of it's container within the viewport, rather than the viewport itself.

The filament group has written an article about how to implement some workarounds... in the future.

Smashing Magazine recently wrote Media Queries Are Not The Answer: Element Query Polyfill which show you how you can use the Element Query polyfill to do just what you are after.

Upvotes: 6

Related Questions