I'm new to masonry with angular. i have tried to get masonry working with angular up to a certain extend and im facing few issues with it right now. Below given link is what i have done so far and the following are the two issues facing:
<div ng-controller="MainCtrl">
<div class="grid" masonry="true" column-width="460">
<div ng-repeat="item in items" class="item {{item.class}}">
<div><h1>{{item.name}}</h1></div>
<br /> <span>Age: {{item.age}}</span>
<br /> <span>Company: {{item.company}}</span>
</div>
</div>
</div>
Link to jsfiddle for my solution
instance 1
When there is enough space the smaller brick does not get adjusted. E.g. After "Collin Alston" i need to have "Jasmine Rollins" and likewise. How would i accomadate this change? (see for image below as well)
instance 2
Why is it that "style" attribute gets applied to child elements? i need the style to be applied to "item w1 masonry-brick" and not child div's.
I had in instance 1 and changed it to for instance 2 to show the two problems im facing. Hope to get some answers to work my way out. Thank you in advance.
Update 1:
I managed to get masonry working with angular to this extend. Check this out http://jsfiddle.net/h5jfd1wm/38/
But still there are some empty spaces when i resize the window. It's like some bricks from the bottom can fill up those empty spaces. If you can help me out here.
Related
I am creating a dashboard application in Angular JS, which will have different tiles. Each tile has its own specific data & HTML.
Thought of approaching the problem with
<div ng-repeat="tile in tiles">
<dashboard-tile/>
</div>
where is a directive. But i have following doubts-
1. Since each tile will have different HTML(content), how can i repeat it through a single directive template.
2. If i want to inherit from a base tile and add own properties (model+content) to the tile, how can i then repeat the tile in HTML.
Not sure how to proceed or design the solution.
Any help is appreciated.
Thanks & Regards,
Sonny
Based on what you're looking for, I'd say you'd want to ng-repeat with a ng-switch, and then list out the possible widgets with ng-switch-when.
<div class="widget" ng-repeat="item in items" ng-switch="item.type">
<widget-activity-feed ng-switch-when="activity" >
</widget-activity-feed>
<widget-monthly-income ng-switch-when="income">
</widget-monthly-income>
</div>
Let's say I have a typical bootstrap layout with row's and col-lg-x's
<div class="content container">
<div class="row">
<div class="col-lg-5">
</div>
<div class="col-lg-7">
</div>
</div>
</div>
Are there any plugins (perferably angular but others too) to make a draggable divider between 2 columns to allows the user to adjust the width?
Like in this example (Tab #2) except it should "snap" to bootstrap's possible col-lg-xx combinations like col-6/col-6, col-5/col-7, col-4/col-8.
The following does not address your question directly, in that it does not follow bootstrap's columns/rows. But it might give you a good starting point and others might find it useful:
bg-splitter https://github.com/blackgate/bg-splitter
ui-layout https://github.com/angular-ui/ui-layout
There are good Angular solutions in this answer:
Angular.js using bootstrap and dynamically creating rows
As well as this answer:
how to split the ng-repeat data with three columns using bootstrap
So i have an array of slide image urls which i'm looping through here called slides.
<div class="presentForm" id="presentForm{{$index}}" ng:repeat="slide in slides" style="display: none;">
<img id ="presentationSlide" ng-src='{{slide}}' style="height: 300px" width="600px">
<label id="scriptLabel{{$index}}" for="slideScript{{$index}}" style="left:130px;">
Slide {{$index + 1}} Script
</label>
<textarea class="scriptText" name="Text" id="slideScript{{$index}}" ng-model="scripts{{index}}">
</textarea>
</div>
My problem arrises from the fact that I want to display a seconday array within this ng-repeat called scripts. The problem arises from the fact that scripts length might not match slides length (every slide might not have a script). So how could I display scripts[0] within the <textarea></textarea> but if scripts[3] doesn't exist display a blank text area?
This isn't a very thorough answer, but nested ng-repeat's should solve your problem. Let me know if I'm missing something.
EDIT: After re-reading your code. I think you might also need to rethink your data structure. scripts should be inside the slide object.
e.g.
slide = {name: 'slide1', scripts: ['script1', 'script2']}
Would like to know the best way to preserve state between tabs. I use bootstrap tabs and angular ui-router. I've a google map in one of the tabs and don't want to reload the map when user selects that tab. Please advise.
Thanks
I think what you are looking for is discussed in this issue: https://github.com/angular-ui/ui-router/issues/63
They are mostly discussing iframes but I believe the same should hold for Google Maps. Unfortunately in the thread they decided that this isn't something that should be implemented in the core release. I haven't tried out the directive they provide (if I get a chance I'll let you know how it goes) but you may be able to get something working with that.
I have actually come across the exact problem you had. My solution was to use styled buttons as my tabs and ng-show for the map tab:
<div id="info-btns">
<button class="btn" ng-model="view" btn-radio="'info'">
Info
</button>
<button class="btn" ng-model="view" btn-radio="'map'" ng-click="loadMap()">
Map
</button>
</div>
<div class="content" ng-show="view != map">
<div ui-view="info"></div>
</div>
<div id="map-container" ng-show="view == 'map'">
<div id="map" class="content" sitemap>
</div>
</div>
ng-show simply uses display:none to hide the map and hence doesn't cause a refresh. You will need to trigger the map to load the first time it is not hidden otherwise it will render incorrectly, hence loadMap()
If I get a chance I'll set up a jsfiddle of this in practice.
I have a Drupal 7 site using ckeditor 4.2. I've created a basic page node and put a span inside an h2 heading in the body. I hard coded it in the html view. It looks fine but if I go back to edit the page, my has gotten stipped out of the html and also any style="" I've put into the html also. I've looked at the ckeditor config and text-formats. I've set the only formats allowed to be text and full html so I'm not using filtered at all. What gives? I've used the editor many times before but probably not this version.
If you are using the CKeditor module then there is an option in Advanced Options that is also mentioned in the module homepage where you should set:
config.allowedContent = true;
None of the above solutions worked for me. What I found was that CKEditor was removing empty <span> tags from the HTML. For example:
<div class="section-heading">
<span class="sep-holder-l"><span class="sep-line"></span></span>
<h4>Section Header</h4>
<span class="sep-holder-r"><span class="sep-line"></span></span>
</div>
Would yield:
<div class="section-heading">
<h4>Section Header</h4>
</div>
However, if I added a non-breaking space in the innermost <span>, CKEditor didn't edit the HTML:
<div class="section-heading">
<span class="sep-holder-l"><span class="sep-line"> </span></span>
<h4>Section Header</h4>
<span class="sep-holder-r"><span class="sep-line"> </span></span>
</div>
Hopefully that helps someone out there!
In Drupal 7 there's no automatic synchronization between CKEditor's filter (called the Advanced Content Filter) and Drupal's filter. As I understand you configured latter one, but not the first one. See config.extraAllowedContent.
CKEditor 4.+ will remove any empty tags it finds which are in CKEDITOR.dtd.$removeEmpty as part of the HTML parsing process.
See this answer for a hack to avoid it.