CODEWITHSUNDEEP
htmlcssangular
Geek
Geek

Reputation: 3329

Reserve space for DIV even if the condition is false

I have a div tag as follows:

<div class="ui-g-2 text-right visible" 
     *ngIf = "this.isUserAdmin && show"> &nbsp; Author Name: 
</div>
                    
<div class="ui-g-3 text-left visible" *ngIf = "this.isUserAdmin && show">&nbsp;
       <input class="pInputFilter" type="text" readonly id="authorname" value={{this.userSelectedAuthor}}>  
</div>

Based on the condiiton in ngIf i have to display the Div. What I am seeing is if the condition fails the next DIV in line takes this DIV's position.

I have this in css:

div.visible {
    visibility: hidden
}

Can someone tell me what is the right way to do the same?

Upvotes: 0

Views: 795

Answers (2)

micronyks
micronyks

Reputation: 55443

You can use visibility css as follow,

 <div class="ui-g-2 text-right visible" 
      [style.visibility]="this.isUserAdmin && show? hidden : visible ">  // check this line
          &nbsp; Author Name: 
 </div>
                    

 <div class="ui-g-3 text-left visible" 
       [style.visibility]="this.isUserAdmin && show? hidden : visible "> //check this line as well
          &nbsp;        
       <input class="pInputFilter" type="text" readonly id="authorname" value={{this.userSelectedAuthor}}>  
 </div>

Upvotes: 1

Talha Akbar
Talha Akbar

Reputation: 10040

You can remove *ngIf and instead bind the visible class based on the condition:

[class.visible]="!this.isUserAdmin || !show"

Upvotes: 1

Related Questions