I define a spinner, when the page need to do some thing for example bring some data from database i want to show it, and when its done i want to hide this spinner, so i decide to define some thing like this in Layout.cshtml :
<div id="SpinnerDiv" ng-show="showSpinner">
<div id="AllContent">
<!--I put all of my contents here-->
<div>
</div>
but there is a problem in this method, when i put ng-show to False it will hide it's child too, so its not the right way, anyone one can help how can i implement a spinner ?
Your spinner should be managed by adding/removing a specific css class to <div id="AllContent">
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 want to edit HTML&CSS code to arrange it differently on the page depending if a condition is met or not using AngularJS (ng commands)
I have thisYear=true or false
If thisYear is true I want the labels and input HTML tags from the page to be arrange in a certain way using inLine css if the year is false I want to arrange it in a different way.
How can I set up an if/else statement in AngularJS (ngIf) and edit the html and CSS inLine?
You need to add something like this in your view:
<div ng-if="thisYear">
<!-- Displays stuff when thisYear is true -->
</div>
<div ng-if="!thisYear">
<!-- Displays stuff when thisYear is false -->
</div>
Also, add the css classes to particular div for styling.
It looks as though there are multiple things that you may be asking for. I think you could benefit from using the ng-style and ng-class directives as well as the ng-if directive.
Using ng-if will allow you to load a div into the DOM based upon whether or not the boolean value is true or false. With this, you can easily arrange your labels in whatever position you'd like.
<div ng-if="inputTrue">
<!-- your input/labels go here and will be loaded into the DOM -->
</div>
<div ng-if="!inputTrue">
<!-- this input will not be loaded into the DOM -->
</div>
In addition to this, you can also take advantage of the ng-class and ng-style directives. Using ng-class will allow you to add a class to the div based on a condition that evaluates to true or false. The same thing goes for the ng-style directive.
It would follow something along the lines of ng-class="{'className':inputTrue}".
In my Angular app I have a button where I apply a CSS style depending on the $index from the ng-repeat.
However whats happening is on page load the buttons style appears as the default (which is class button) for a second before applying the actual style I want (which is customColour{{$index}}).
<button type="button" ng-click="superAction($index)"
class="small button customColour{{$index}}">
</button>
I have confirmed that it must be down to the delay in getting the $index value having spent the last 4 hours playing around with the CSS files (ensuring things like my custom style appears at the top of my css file etc).
So any ideas/suggestions I can try would be appreciated.
I need to figure out how I can have different views(html+css) for a component. A lot of people say that it's better to have multiple components for each for each of those views and then use a service to interact but my case is as follow:
I have a controller with a view that is basically a layout. Say my layout has 3 panes on top and one pane in the bottom. Now I have button in my view to change the layout to two panes on top and two panes on the bottom. So basically my data does not change. Its just a change in the html and css.
also if the first layout is filled with some data I dont want to change it or reinitialize it when changing the layout since the change is only a change on layout not the data.
I have difficulty figuring out how I can achieve this in angular2. Any ideas?
so you want to add html and css or just change the actual template?
If you just want to change the actual html , i personally suggest that you use states instead of different views. And based on the states move the html around. I had the same issue myself and i solved it by rethinking the layout and ended in finding a simpler layout structure.
Hope this helps.
Enjoy coding.
You can have two views in one template and switch between them by setting a flat:
<div *ngIf="firstLayout">
<!-- first layout -->
</div>
<div *ngIf="!firstLayout">
<!-- first layout -->
</div>
I use the module angular-snap to adding a menu to my app like this:
<snap-content>
<div ui-view='header'></div><br/><br/>
<div ui-view='content'></div>
</snap-content>
<snap-drawer>
Menu
</snap-drawer>
And my ui-view (content):
<div class="content-padded">
<div class="">
<center><h4>Accueil</h4></center>
<!-- ... -->
</div>
</div>
My problem is I want to put a scrollable div inside my snap-content. And, I don't want the snap-content will become scrollable.
I have the following image to help you to understand what is my problem:
The three elements in the picture are in snap-content, but only the blue div have to scrollable.
Thank you in advance for your help and sorry for my bad English.
The solution I found is :
putting the snap-content "scrollable"
putting the divs I want outsdide the scroll "fixed"
putting a "top" and a "margin-top" in order to have the scroll under my others components.
If somebody have another method, it will be with pleasure.