I am new to AngularJS. Right now I have a reusable carousel widget that I modified to display 2 slides in one frame (I make my carousel as a directive so I can use it anywhere). I am using carousel component from angular-ui-bootstrap, and I modified it according to the way explained in this post.
However, I am planning to modify my current carousel widget to accept a number that will determine how many slides will be displayed in 1 frame, and dynamically changes its display.
For example, if 3 is passed, then 3 slides will be displayed in 1 frame.
The way I have my 2-slides-in-1-frame carousel widget is pretty static (the number of slides shown in 1 frame is already defined in its HTML). Is it possible to do this? Any help is really appreciated! Thanks.
There is no need to modify the angular-ui-bootstrap carousel, just display a row with two or three columns inside the carousel.
This is a my fork of the original angular-ui-bootstrap carousel plunkr:
http://plnkr.co/edit/F2h3gIQKzpkjymZDgrK6
The short version is:
<slide ng-repeat="slide in slides" active="slide.active">
<div class="row">
<div class="col-xs-6">
... first cell
</div>
</div>
<div class="row">
<div class="col-xs-6">
... second cell
</div>
</div>
</slide>
Then what you can do is create your own templating directive that does the math on how many columns to display (2 = col-xs-6, 3 = col-xs-4, ... ) and renders the above partial with the appropriate column classes.
Related
I have a repeater that creates 3 directives. Each directive has its own carousel type of functionality and each has its own collection. When the carousel of the first directive changes, I want to trigger a change in the second carousel by giving the second carousel a new collection to work with.
How do I go about finding the second mission-descendant-directive's that gets created?
<div ng-repeat="mission in carouselMissions track by mission.missionDefinitionId">
<div class="row">
<mission-descendant-directive header="header" data-id="mission.missionDefinitionId" data-level="1" subChild="subChild.id"></mission-descendant-directive>
</div>
</div>
This is my code
<div ng-repeat="obj in descArray | filter : searchTxt">
<div class="col-md-6">{{obj.description}}</div>
</div>
I wanted it to be either 3 column layout (col-md-4) or two column layout (col-md-6) based on page design. The problem here is that I wanted my rows to be of equal height with a border for each div.
I cannot fix the height of the div as it may be dynamic hence I want divs in a single row to be aligned properly with equal height in a single row.
I tried various ways such as clearfix method in this case each div is aligned within its row but my div's borders are not of same height.
<div ng-repeat-start="obj in descArray | filter : searchTxt">
<div class="col-md-6">{{obj.description}}</div>
<div class="clearfix " ng-if="$index%2===1"></div>
<div ng-repeat-end=""></div>
Also wanted to support ng-repeat filter.
I am including a template inside a modal which is being used elsewhere as well ::
<div id="addressModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div ng-include="'templates/add-address.html'"></div>
</div>
</div>
</div>
i dont want to modify the grid system inside this template only for this modal window , as it is being used in other places as well . So my question is that there are coloumns in this template with :
<div class="col-md-4 col-sm-6>'my content'</div>
since my modal window is small, u can consider it in 'sm' range, but nevertheless it positions its layout according to 'md' only . Is there any tweak to have the modals accept grid sizes according to the modal window size ?
Here is not about how small is your modal window, but about screen width.
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
You can see in the bottom of this page the width in pixels for each .col class.
So, you must think it as screen resolution, when you use the .col classes to be activated. This, or you can create your own classes with width estimated in % and use media to proper display them.
I'm trying to build a side Control Panel for Dashboard something similar to http://demo.neontheme.com/dashboard/highlights/
Can anyone give me some pointers for some examples where I can start building it ?
Thanks
Take a look at Bootstrap's vast range of Components (if you haven't already), and break down the functionality according to what you wish to accomplish.
For example, at a glance:
I can see that the page is fluid, and the left-hand navigation takes up roughly 2/12 (by default, Bootstrap utilises a 12-column grid system).
<div class="container-fluid">
<div class="row">
<div class="row">
<div class="col-md-2">
<!-- Menu -->
</div>
<div class="col-md-10">
<!-- Content -->
</div>
</div>
</div>
</div>
Accordions are in use to collapse/expand menu items, so you can harness Bootstrap's collapse.js to achieve this.
Also, some menu items have Labels and/or Badges attached to them, which Bootstrap also caters for.
Resources:
http://www.getbootstrap.com/css/#grid-example-fluid
http://www.getbootstrap.com/javascript/#collapse
http://www.getbootstrap.com/components/#labels
http://www.getbootstrap.com/components/#badges
The question https://stackoverflow.com/questions/17375324/twitter-bootstrap-navbar-left-button-center-text-right-button by #twilight-pony-inc has been closed.
I think the question should be: Can i build a mobile app with Twitter's Bootstrap which looks like a native app. Or more specific how to build a navbar with a tittle and buttons on the right and left.
Example:
The blue header (navbar) with title "Temp" and buttons "back" and "home" should be build with Twitter's Bootstrap.
Interesting question. What #twilight-pony-inc is asking seems trivial but is not. Twitter's Bootstrap is build with a 'responsive' mind. The layout build with TB will adopt to the device which shows it. The example you give seems to build with a mobile frame work like jQuery Mobile. Mobile frameworks can be use to build mobile apps (only).
Nowadays mobile frameworks become more responisve and the coming version of Twitter's Bootstrap uses a mobile first approach. Twitter's Bootstrap 3 will have a mobile grid also. (see also http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/grids/rwd-basics.html and http://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpoints-and-grid/)
Consider if you need a mobile framework in stead of Twitter's Bootstrap first. Second consider to use Twitter's Bootstrap 3 cause it will make your mobile development easier.
Offcourse you can build such a layout with twitter boostrap too. Read about the grid first: http://twitter.github.io/bootstrap/scaffolding.html#gridSystem. Start with row for your navbar and split it in columns:
<div class="container navbar">
<div class="row">
<div class="span3 text-left"><button class="btn">back</button></div>
<div class="span6 text-center"><h3>Title (centered)</h3></div>
<div class="span3 text-right"><button class="btn">Home</button></div>
</div>
</div>
Also consider the fluid grid here: http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem
This will give you a navbar with two button. But on a small / mobile screen (below 768 px) your layout breaks. Below 768 px yor columns (divs with class spanX) will stack (and get a 100% width). You can use media queries to fix this:
#media (max-width:767px)
{
.navbar div[class*="span"] { float: left;} /* float left */
.navbar div.span3 { width:25%; }
.navbar div.span6 { width:50%; }
body {padding:0;}
}
This will create a row with three columns on small screens too. See: http://www.bootply.com/66054 or the image below:
The CSS make the mobile layout fluid cause the colums width is set by percentage (100% in a row).
Twitter's Bootstrap 3
TB3 has a fluid layout by default. TB3 has two grid the big grid for 768+ pixels width screens and a small mobile grid. Cause you can use the mobile grid, you don't need media queries to get a layout as above with TB3. In TB3 the width of columns is set by the col-span-{X} classes. Likewise for the small grid col-small-span-{X} are used to set the width.
So with Twitter's Bootstrap 3 you can build your navbar with:
<div class="container navbar">
<div class="row">
<div class="col-span-3 col-small-span-3 text-left"><button class="btn">back</button></div>
<div class="col-span-6 col-small-span-6 text-center"><h3>Title (centered)</h3></div>
<div class="col-span-3 col-small-span-3 text-right"><button class="btn">Home</button></div>
</div>
</div>
Twitter’s Bootstrap 3 defines three grids: Tiny grid for Phones (<768px), Small grid for Tablets (>768px) and the Medium-Large grid for Destkops (>992px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 992 pixels screen width. So does the Small grid below 768 pixels and the tiny grid never stacks. Except for old phones which always will stack the elements (mobile first design).
For this reason you should use the “.col-” prefixes for your mobile app:
<div class="container navbar">
<div class="row">
<div class="col-3 text-left"><button class="btn btn-default">back</button></div>
<div class="col-6 text-center"><h3>Title (centered)</h3></div>
<div class="col-3 text-right"><button class="btn btn-default">Home</button></div>
</div>
</div>
See: http://bootply.com/73382