So i am playing with the angular Bootstrap directives and am trying to implement the accordion control, with some info showing at the right part of each header.
<accordion-heading>
some text here, on the left side of the header.
<div class="pull-right">
<span>1st info</span>
<span>2nd info</span>
<span>maybe 3rd?</span>
</div>
</accordion-heading>
here's the simplified plunkr: http://plnkr.co/edit/3y0Rq1?p=preview
this shows well on medium to large screens but on smaller ones, the infos go under the header's line, and in some cases, scramble with the left text.
I'm sure there is a css trick to make this scenerio look right, by expanding the borders of the header in smaller screens, but cannot figure it out.
Help, please?
You can do it this way, add a table with two columns in the head. First column has the data = "some text here, on the left side of the header." and the second column has the data = "1st info 2nd info maybe 3rd?"
<table>
<tr>
<td>
some text here, on the left side of the header.
</td>
<td>
<div>
<span>1st info</span>
<span>2nd info</span>
<span>maybe 3rd?</span>
</div>
</td>
</tr>
</table>
I have made changes in the plunker. Now when you make the window size small, the accordion header size increase accordingly. use float: left/right or pull-left/right to make further changes.
Hope it helps
Related
I would like to do different button when there is null(no image) in the database. But, it shows two buttons instead of one button only. Can you guys help me? I tried at the frontend only. If there are solutions to do at the backend, please share some codes.
This is the codes that I've tried at the frontend.
<a href="#" id="ImageButton2" class="btn btn-success" visible='<%# If(IsDBNull(Eval("ImagePic")), True, False)%>'>No Image</a>
Actual Image </td>
The html anchor tag doesn't have an attribute visible. You either meant to use a server side control like asp:HyperLink which does have a Visible property an will render the appropriate html, or you need to set the visibility by CSS style on your client side html, for example by controlling the display property:
<a ... style='display: <%# If(IsDBNull(Eval("ImagePic")), "inline", "none")%>'>No Image</a>
I am using Angular Material, which makes use of Flexboxes.
I would like to wrap boxes so that they spread across several rows. I am actually successfully doing this with the following code :
<div layout="row" layout-align="start start" layout-wrap layout-margin>
<md-card ng-repeat="SOME ITERATION" flex>
SOME CONTENT
</md-card>
</div>
However rows are not filled completely. The <md-cards> don't strech until filling the whole space available in one row.
Here is a visual representation of what I would like to do :
<md-cards> would be the orange boxes, and they would fill the whole space on each available row.
Any suggestion about how to implement this with Flexboxes (if possible) is most welcome !
Hi I have a ribbon with some div's in a row within. If it overlaps and you can not see everything, I show an arrow left from the ribbon and an arrow right of the ribbon. With this arrows I can scroll throught the ribbon infinite in the circle (direction left or right).
My codes lookes like this:
<div class="arrow" ng-click="list.push(list.shift())>←</div>
<div class="ribbon">
<div class="ribbonItem" ng-repeat="item in list">
{{ item.Name }}
</div>
</div>
<div class="arrow" ng-click="list.unshift(list.pop())>→</div>
This works, but it's without an animation and increased. It also needs much clicks to scroll throught. How can I implement an animation without using jquery or js and just do it with this ng-click. I tried it with a transition on the css-classes ng-enter/ng-leave of my ng-repeat, but it does'nt work: https://docs.angularjs.org/api/ng/directive/ngRepeat (look at "Animations").
Has someone an idea?
Thanks.
Similar question : how to use animation with ng-repeat in angularjs
Go through this link it might help you:
http://www.nganimate.org/angularjs/ng-repeat/move
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 have the following
<div id="border" style="width:100%; border:8px solid #FFF">
<div id="menu" style="width:250px; float:left;" >
Some menu
</div>
<div id="content" style="padding-left:270px; width:520px;" >
Main page content
</div>
</div>
This gives me a left aligned menu and the content to the right of it, all surrounded by a border.
On all browsers including IE8 it displays correctly.
But on IE7 the content only starts below the menu, and leaves a big open space to the right of the menu.
I have searched all kind of solutions and tried all kinds of combinations of right, left, none for float. clearing left right both. It always displays different on the browsers.
Any help is appreciated.
Michael
Remove the padding on your content div and set it to float left.
You might have to put <div style="clear: left"></div> after it