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.
Related
I have an Angular page with a grid-like view. Inside each row is an input element:
<div class="grid">
<div class="group" ng-repeat="(key, value) in groups | groupBy: groupingFunction>
<div class="row" ng-repeat="row in value">
<input type="text" ng-model="row.name">
</div>
</div>
</div>
I want to tab through all the input elements in order. This more or less works, except that Angular will redraw the elements when I tab out of the first input element, resetting the focus to somewhere outside the grid. When I quickly press tab several times, I can usually reach the 5th or so element before that happens, so the tab order itself is working. My question is, how do I prevent Angular from (seemingly unnecessarily) redrawing part of my grid?
I tried delaying the view updates for the input, as suggested in this question, but the redraws still happen. So, it looks like something else is causing them. Any suggestions on how to find out what, would be appreciated.
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 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.
In my Angular project, I have a recursive template that creates a series of "blocks" (each consisting of an encompassing div with other elements inside it) nested a few levels deep - similar to this one:
<script type="text/ng-template" id="myTemplate.html">
<div drop-target='true' class="overall">
<h2> {{obj.title}} </h2>
<div> {{obj.content}} </div>
<div ng-include="'myTemplate.html'" onload="obj=someObject.innerObjects"></div>
</div>
</script>
Each of these overall divs has a directive that lets it accept items that are dragged into it (standard drag and drop).
The problem is, that the dropping is also being allowed to happen onto the <h2> element and the content div. This is not what I want. I want the dropping to only be over the overall div.
Any ideas on how to do that?
I have a list of horizontal divs that I cannot make them act as I want them to.
What I want to achieve is have
for md, lg, sm - a list a rectangular divs that contain a small "thumbnail" class image of any sized image and continue with the user's name horizontaly - as can be seen in the example in md view.
for xs I want to have each entry below the other, name below the image - which should be screen size.
I could not exemplify with the image as I already used too much inline css.
http://www.bootply.com/T0AAHhHU0h
Unless I misunderstood your question, it looks like you're pretty close to what you're looking for... just change your col-md-3 to col-sm-3 and the switch to vertical layout will happen at xs breakpoint instead of sm breakpoint, as here: http://www.bootply.com/Ba1aGC1Lds.
<div class="col-sm-3" style="margin-bottom:20px">
<div class="col-md-12" style="border:1px solid #C0C0C0;background-color:white">
<div class="col-md-4" style="background-color:black;height:60px">
</div>
<div class="col-md-8">
<strong>John Smith</strong>
</div>
</div>