When using angular's ngHide directive on a button, it will still occupy space in the

At the bottom of this HTML file, there are 3 buttons displayed.

The first image illustrates the layout of the 3 buttons.
The second image demonstrates what happens when the middle button in the footer is commented out.
The third image shows the situation where ng-hide="true" is applied to the middle button.

Is it possible to eliminate the space between the "NO" and "YES" buttons when the middle one is set to ngHide(n)? Thank you

https://i.stack.imgur.com/tfkzY.png

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    height: 1%;
}

header > button {
    height: 1.5em;
    width: 1.5em;
    font-size: 1.5em;
    top: 0;
}
...
<!doctype html>
<html lang="en" ng-app="appModule">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <meta name="viewport" content="width=device-width" />

    <base href="http://localhost:63342/students/">
    
    ...

Answer №1

Make the entire li disappear by adding ng-hide to the li element.

<li ng-hide={{expression}}><button type="button">EXTRA</button></li>

NOTE: Instead of using ng-hide, you can also utilize ng-if, which will completely eliminate the <li> from the DOM and may improve performance with large content within the container.

Answer №2

After reviewing your code, everything looks good. However, I noticed that you are currently hiding a specific button.

<button type="button>EXTRA</button>

In order to hide the entire list item containing the button, you should use the following code:

<li><button type="button>EXTRA</button></li>

Once you make this adjustment, everything should be working correctly.

Answer №3

Even if the button is hidden, the list item (li) remains visible and certain styles applied to the li cause spacing between two buttons.

To completely hide the li, use ng-hide on the li element.

<li ng-hide="true"><button type="button">EXTRA</button></li>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Collecting data with Selenium as elements load [Python]

Is there a way to scrape only the newly generated items in sequence? I have a dynamic list that loads with scrolling. There are two methods I can use to scrape all generated divs: Scroll to the bottom of the list and then scrape all generated divs. Scroll ...

Can <p> be utilized without creating empty space at the top or bottom?

Is there a way to use paragraph breaks without any space at the top or bottom when there's no text above or below it? body { font-family:arial; background:#222; } #wrapper { width:100%; margin-top:100px; } .post_container { ba ...

View the picture directly on this page

Currently, I am in the process of creating a gallery and I would like the images to open on top of everything in their original size when clicked by the user. My expertise lies in HTML and CSS at the moment, but I am open to learning JavaScript and jQuery ...

What is the method for embedding HTML content into the header section of tcpdf?

I am currently utilizing the tcpdf library to create a PDF document. I have implemented the smarty template engine to manage the data. Below is the code snippet for inserting header data: // set default header data $pdf->SetHeaderData(PDF_HEADER_LOGO, ...

I am encountering an issue where my input is moving to the following line after the initial one. What could be

Trying to create a layout I like for this form has been a bit of a struggle. I thought I had something good at first, but after the first row of input, the formatting gets all messed up and I can't figure out what's going wrong. <!DOCTYPE htm ...

Modifying the button for the ajaxtoolkit:AsyncFileUpload widget

I am currently using the ajaxtoolkit:AsyncFileUpload and I'm curious if there is a way to customize the button that comes with it? <ajaxtoolkit:AsyncFileUpload Width="200" ID="filImageUpload" ThrobberID="imgUploadProgress" OnUploadedComplete= ...

What steps can be taken to avoid the table row from getting hidden behind the table header?

I am aiming to implement sticky headers for a table using only CSS. You can refer to this link for guidance: Table fixed header and scrollable body Everything looks good when the page loads, but as soon as I start scrolling, a sliver of data appears abo ...

`Where to include controller.js scripts in an Angular application`

As I dive into learning angular.js with .NET MVC, one major issue that keeps coming up is the fact that many tutorials advise referencing multiple controllers and services in the main (_Layout) page, which can make it quite messy. Although it may seem sim ...

Ways to obtain jquery object for replaced DOM element

Is there a way to select the new content after using the replaceWith function in my plugin? I want to chain my plugin for the new content. $.fn.customPlugin = function() { this.replaceWith('<div>New Content</div>'); }; So, ideal ...

Conditional text-boxes can be added to table columns based on certain conditions

I am working with a table that has three columns: type, 1st type, and 2nd type. The type column contains a button which toggles between two values, Db and Cr. I need to dynamically add a text box to the 1st type column when the button's value is Db, a ...

utilizing an ajax request to clear the contents of the div

When I click on Link1 Button, I want to use ajax to empty the contents in the products_list div <button type="w3-button">Link1</button> I need help with creating an ajax call that will clear the products in the product_list when the link1 but ...

How to reference a ListView control using its DataSource in a C# class

Currently, I have a ListView embedded in a webpage connected to a C# class datasource called CommentsDAO. This class contains the necessary methods to retrieve or delete data from the ListView. While data retrieval is successful, deleting a row proves to b ...

Sending a request from one Node.js application to another Node.js application

I have a nodejs-express server (1) that connects to a mongodb and a web server (2) in nodejs-express with Angularjs. I am attempting to send a post request from 1 to 2, but I keep receiving a 405 Method Not Allowed error (I tried using Postman). When I che ...

What separates text-align:center from margin auto?

As someone who is just beginning to learn about CSS, I have come across the properties: text-align:center; and margin:auto; Both of these seem to center elements, but how exactly do they differ from each other? Any insights would be much appreciated. T ...

The JSON.stringify method in TypeScript/JavaScript does not align with the json-String parameter or request body in a Java controller

Currently, I am utilizing jdk 1.8 and have a rest endpoint in my Java controller: @PostMapping("/filters") public ResponseEntity<StatsDTO> listWithFilter( @RequestBody(required = false) String filter ) { try { ............... } } A test sn ...

Tips for efficiently printing invoices on specific paper: Print a maximum of 20 items per sheet, and if it exceeds this limit, continue onto the next page. Ensure the total amount is

$(document).ready(function(){ var j = 23; for (var i = 0; i < j+11; i++) { if (i != 0 && i % 11 == 0) { $("#printSection div").append("<?php echo '<tr><td>fff</td></tr>'; ?>"); ...

Inserting an item into ng-model within a dropdown menu

I have a select box populated with data from my backend. This data is an array of objects: [Object { superkund_id="4", nod_id="12068", namn="Växjö Fagrabäck"}, Object { superkund_id="5", nod_id="9548", namn="Halmstad Bågen / Pilen"}] I am using ng-o ...

Tips for showcasing an image on an HTML page

I am encountering an issue with my HTML page that includes a Button. When clicked, it is supposed to display an image using an Ajax call. The functionality works properly in Postman Rest Client. However, when accessed through a browser, it only shows raw ...

Error message: WebTorrent encountered an issue and was unable to pipe to multiple destinations at once

Upon attempting to stream video from a provided torrent file, I encountered some unexpected issues. The example was taken from the official site, so one would naturally assume it should work seamlessly. To troubleshoot, I tried setting up a default site u ...

Utilize jQuery to choose a specific tab

I have implemented a jquery tab in my UI. I want to have the second tab selected when the page loads, instead of defaulting to the tab with the "Active" class. Here is my HTML tab code: <div class="typo"> <div class="container-fluid"> ...