I'm trying to animate the height shrinking and growing based on content inside of the element using ng-if. The issue here is with nganimate I can't get the animation to work at all. It's a simple example.
<div>
<div ng-if="this">
Small text
</div>
<div ng-if="that">
<p>Reall long text that can</p>
<p>be several lines long</p>
</div>
</div>
You can use ng-class to do that
<div>
<div ng-class="{small: if-Your-condition-True}">
Small text
</div>
<div ng-class="{big: if-Your-condition-True}">
<p>Reall long text that can</p>
<p>be several lines long</p>
</div>
</div>
in this method, you can create an animation
Related
I am building a lightning web component that uses a combobox. It seems to be having its dropdown portion cut short by the bounds of its container.
I've tried adding height, z-index, overflow, and margin modifiers to the style sheet for the input element and its container, and the only thing that's had a visible effect is adding margin to the combobox's container, which just makes more space for the dropdown to show its contents but doesn't solve the problem.
Here is an excerpt of the html file:
<div class="slds-col slds-grid">
<!-- Complete Task -->
<div class="slds-grid slds-col slds-size_2-of-4 slds-p-right_small slds-truncate">
<div class="slds-col">
<div class="slds-border_bottom" style="background-color: #ecd4b566">Log a Call</div>
<div class="slds-grid_vertical slds-p-top_small">
<div class="slds-col">
<lightning-combobox
class="spencer_combobox"
variant="label-hidden"
placeholder="-- Call Result --"
options={callResults}
value={selectedResult}
required
onchange={handleResultSelection}>
</lightning-combobox>
</div>
<div class="slds-col">
<lightning-textarea maxlength=255 placeholder="Write comments here" onchange={handleComment} value={commentValue}></lightning-textarea>
</div>
<div class="slds-col">
<lightning-button class="slds-col" variant="Brand" label="Complete Task" onclick={handleCompleteTaskClick} disabled={buttonDisabled}></lightning-button>
</div>
</div>
</div>
</div>
I expected the dropdown to be visible on top of the other elements, but it ends up hidden or cut off.
Here is a screenshot; the dropdown menu isn't being cut off by the next element below it, it's actually getting cut off by its own bounds.
Figured it out.
I put slds-truncate in the class of the container, and that comes with overflow:hidden, so I was able to just remove the truncate or edit the style sheet to fix the problem.
I'm switching the visibility of 2 elements when clicking them. A very simple use case:
<div ng-hide="filtersOpened"
ng-click="filtersOpened=true">
filters (opened)
</div>
<div ng-show="filtersOpened"
ng-click="filtersOpened=false">
filters (closed)
</div>
The change happens, but it flickers so that for a very short moment I see both elements together.
How can I make the change behave nicer, smoother, without the flickering? I've read about ng-cloack but doesn't seem like it's related since I'm not using a template.
Maybe try ng-if instead:
<div ng-if="filtersOpened" ng-click="filtersOpened=true">
filters (opened)
</div>
<div ng-if="!filtersOpened" ng-click="filtersOpened=false">
filters (closed)
</div>
I only want to display the image div if the object returns an image, right now I'm outputting the image in my <div class="image">, however, if there's no image, then the <div class="image"> should not output:
<div class="image">
<img src="{{item.logo}}" alt="{{item.title}}" title="{{item.title}}" />
</div>
How about this?
<div class="image" ng-if="item">
...
</div>
See the documentation for ngIf.
You could also use ng-show, which will merely hide the div instead of removing it completely. See the documentation for ngShow.
I have a simple ng-repeat generating image divs. I want them to come out in rows of 4 instead of one long vertical list. How can I do this?
<div ng-repeat="artist in artists">
<div>
<h3> {({ artist.fields.title })} </h3>
<img src="{({ artist.fields.link })}" />
</div>
</div>
I believe you want to do something like this
<div style="width:800px;">
<div ng-repeat="artist in artists" style="width:200px;float:left;">
<div>
<h3> {({ artist.fields.title })} </h3>
<img src="{({ artist.fields.link })}" />
</div>
</div>
</div>
By having a container with a fixed width, and having each element inside be 1/4 of that width you can achieve what you want.
Of course, inline styles shouldn't be used in real code :)
You can use the $index property to add a tag every 4th item. Then use some CSS to display items as desired:
<div ng-repeat="artist in artists">
<div class="someClass">
<h3> {({ artist.fields.title })} </h3>
<img src="{({ artist.fields.link })}" />
</div>
<br ng-if="artist.$index % 4 == 0" />
</div>
One way is to use css properties. attach a class to the div with a float:left attribute, and insert a br tag after every 4th div
I guess you are using bootstrap?
If yes, this thread could do a help:
Bootstrap's grid columns number per row
doc for bootstrap grid layout:
http://getbootstrap.com/css/#grid-example-mixed
I've just started working on a project that requires me to learn AngularJS. What I'm trying to do is create two menus that slide into the screen, one from the left, one from the right. When they do this they push the content over.
Currently I can get one or the other to work, but not both. I realize this is because of the way that I'm defining the ng-class. I just can't quite conceptualize how to do it correctly.
<div ng-class="{true:'slide-left', false:''}[toggleSlide]" class="container">
<div class="content">
<button ng-click="toggleSlide = !toggleSlide" class="btn-left">From Left</button>
<button ng-click="toggleSlide = !toggleSlide" class="btn-right">From Right</button>
</div>
<div class="slide-from-left">
<p>Here is information that slides from off screen left.</p>
</div>
<div class="slide-from-right">
<p>Here is information that slides from off screen right.</p>
</div>
</div>
Set up the ng-class syntax like this for what you want:
<div ng-class="{'slide-left':toggleSlide, 'slide-right':!toggleSlide}" class="container">
Also, I'm guessing you were trying to adapt your code to something else you saw, so I'll offer something on that also. Here's an ng-class using ng-repeat's $index to dole out classes for even and odd:
ng-class="['even', 'odd'][$index % 2]"