Troubleshooting issues with adding rows to an HTML table

I want to include two buttons at the top of my page: Save and Cancel. These buttons should only appear after clicking the Submit button on the Customer Information panel. However, when trying this, the Customer Information panel is pushed down while I also need the Search for Plan panel to be moved down by one row so that both panels remain aligned at the top. Below is the code snippet:

<div ng-controller="MchPlanAddController">
<h3>UNDERWRITING RULES MAINTENANCE - Add Plan Information</h3>

<div class="col-lg-8">
    <table style="width:100%; table-layout:auto">
        <tr>
            <td style="vertical-align:bottom">

                <div ng-if="vm.customer" class="panel" style="margin-left:15px">

                    <button class="btn btn-success navbar-btn"
                            ng-click="vm.save()"
                            title="Save pending changes to any and all todolists">
                        <i class="glyphicon glyphicon-floppy-disk"></i> Save
                    </button>&nbsp;&nbsp;

                    <button class="btn btn-danger navbar-btn" ng-click="vm.cancel()"
                            title="Discard changes and refresh from the server">
                        <i class="glyphicon glyphicon-refresh"></i> Cancel
                    </button>&nbsp;&nbsp;

                    <span class="alert alert-danger" ng-if="vm.getChangesCount()">
                        Unsaved changes: {{vm.getChangesCount()}}
                    </span>
                </div>
            </td>
        </tr>
    </table>

    <!-- Rest of the code goes here -->

<style>
.input-contain input {
    width: 100%;
}
</style>
htmlcssangularjsforms

Answer №1

Make sure to keep your buttons separate in their own row.

<div class="row">
  <div class="col-md-12">
     ... place your buttons here ...
  </div>
</div>

<div class="row">
  <div class="col-md-8">
     ... display your panels here ...
  </div>
  <div class="col-md-4">
     ... showcase your panels here ...
  </div>
</div>

Answer №2

After realizing that the buttons were not displaying correctly within the div, I decided to remove them from their current placement. The issue stemmed from the fact that the containing div only occupied 8/12 of the screen, causing the buttons to move down by the same proportion. To solve this, I relocated the buttons outside of the original div and gave them their own separate container.

Below is a revised code snippet that resolves the problem:

<div ng-controller="MchPlanAddController">
<!--<a href="#/MchPlan">BACK</a>-->
<h3>UNDERWRITING RULES MAINTENANCE - Add Plan Information</h3>


<div ng-if="vm.customer" class="panel" style="margin-left:15px">

    <button class="btn btn-success navbar-btn"
            ng-click="vm.save()"
            title="Save pending changes to any and all todolists">
        <i class="glyphicon glyphicon-floppy-disk"></i> Save
    </button>&nbsp;&nbsp;

    <button class="btn btn-danger navbar-btn" ng-click="vm.cancel()"
            title="Discard changes and refresh from the server">
        <i class="glyphicon glyphicon-refresh"></i> Cancel
    </button>&nbsp;&nbsp;

    <span class="alert alert-danger" ng-if="vm.getChangesCount()">
        Unsaved changes: {{vm.getChangesCount()}}
    </span>
</div>


<div class="col-lg-8">

    <table style="width:100%; table-layout:auto">
        <tr>

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

Dynamic stacking of buttons in response to user navigation choices

Is it possible to create a navigation bar with 5 buttons using CSS and JS? Here is what I am looking to achieve: Display 5 nav/button options When a user clicks on a button, the other buttons should transition or hide, leaving only the selected button vi ...

javascripthtmlcss

Unable to transmit a variety of text or variables via email through PHP

Can someone assist me in figuring out how to send more content in an email? I have been attempting to include additional information in the email, but haven't been successful. I am using ajax to call and send the email, however, only basic emails seem ...

phphtmlcssajaxemail

Is it necessary for HTML "buttons" to follow the same box-model as other elements?

I recently encountered an issue with the button element and the input element when using a type of button. In both Firefox and Chrome, I noticed a behavior that seems like a bug in recent releases. However, as form elements often have exceptions to W3 rule ...

w3ccss

What are the steps to personalize Twitter Bootstrap with Less for changing the height of the Navbar?

I recently stumbled upon some interesting articles that explain how to customize various elements of Twitter Bootstrap using LESS. You can check out one of the articles here and find more information about Twitter Bootstrap here. However, I am still unsure ...

csstwitter-bootstrapless

Transforming a string in AngularJS to a "controller as" approach using $parse

How can I modify foo.callbacke to reference the timerController.callbacke method? <div ng-app="timerApp" ng-controller="timerController as foo"> <div ng-repeat="item in [1,2,3,4]"> <div watcher="{'seconds': 'foo.callbacke ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat

Ensure that the Bootstrap 5 modal and backdrop are sized to fit the parent container's width and height rather than filling the entire screen

Is there a way to limit the size of a Bootstrap 5 modal dialog and backdrop? The example below occupies 100% of the screen, can it be adjusted to cover only the parent main container? <main class="container-fluid pt-4 px-4" style="height ...

htmlcssbootstrap-modalbootstrap-5

Styling the navigation bar using CSS

Currently working on establishing a top menu bar similar to StackOverflow, but with a fixed position for my webpage. Check out the JSFIDDLE Demo here Encountering extra space on the left and top of the menu bar. Seeking advice on how to eliminate this ex ...

htmlcssmenu

Automatically fill in checkboxes based on user input

Having a simple problem here, I am attempting to dynamically populate check-boxes in an HTML form. However, when I try using the checked property of the checkbox in HTML, it doesn't work correctly. The checkbox remains checked whether I use checked=&a ...

phpjavascripthtml

PHP is unable to extract an email address from the $http post method in Angular

There seems to be an issue with the email address not being received properly when posted to the server. The @ symbol is causing the problem, while the rest of the email address appears fine. angular: $http({ method: 'POST', ...

phpangularjs

What is the best way to retrieve the value of a component's HTML id tag in React?

Is there a way for me to retrieve the id of a react component from within the component itself? I need this information to perform some tasks with a third-party library. In Ember, you can access the component's id using elementId, which can be found ...

htmlreactjstags

Exploring the nuances of AngularJS testing with Jasmine and Karma: delving into the differences between using beforeEach() with

I am new to Jasmine and Karma testing, specifically when it comes to unit testing AngularJS services. When writing specs, I encountered two different ways of injecting a module into the test. 1st Type beforeEach(angular.mock.module("app")); 2nd Type be ...

angularjskarma-jasmine

Using JavaScript to organize and categorize data within an array

I am working with a multidimensional array and need to filter it based on the value at a specific index position. Here is what the array looks like: arr = [ [1 , 101 , 'New post ', 0], [2, 101 , 'New Post' , 1], ...

javascriptangularjsarraysnode.js

What could be the reason for justify-self: flex-start not positioning the div at the bottom of a column?

I want to display a div in three levels: header, content, and footer. The content can vary in height and the footer should always be at the bottom. Here is how I have implemented it: <div class="news-content-block"> <div class=" ...

htmlcssflexbox

Tips for optimizing the use of angular-filter

I am currently attempting to group items in my application using the group by feature. In order to do this, I have included and referenced the angular-filter.js file. However, when trying to utilize the filter, I am encountering the following error: Unknow ...

angularjs

What is the process for creating a parent container in which clicking anywhere inside will cause a child container (built with jQuery UI draggable) to immediately move to that location?

This is a rundown of tasks that I am struggling to code more effectively: When the bar is clicked anywhere, I want the black dot button to instantly move there and automatically update the displayed percentage below it. Additionally, when I drag the butt ...

javascriptjqueryhtmlcssjquery-ui

extract all elements from an array nested within another array

I am having difficulty extracting data from an array file in PHP. I was able to read it and convert it into a PHP array, but now I want to display the stored information in a table, however, I keep getting incorrect values. How can I retrieve the informat ...

javascriptphphtmlarrays

Altering the look of a button as you navigate to it by tabbing

Check out this code snippet: In my design, I have set it up so that the user can tab through the username field first, then the password field, followed by the login button and finally the navigation tabs labeled "Getting Started" and "Vegetables." The i ...

htmlcss

The data in my AngularJS model will only refresh when the button is clicked twice

I am encountering an issue with a select list box and a button in my code. The aim is to filter the model displayed in the select list box based on the selectId received from clicking the button. The problem arises when the model updates only after clicki ...

javascriptjqueryangularjs

Ways to dynamically incorporate input fields into a form

My current project involves managing an Asset Management system for a company with multiple locations. This system has the capability to return unused asset items back to storage. I am faced with the task of returning a large number of items, which requi ...

phpjavascriptjqueryhtml

Make the text stand out by highlighting it within a div using a striking blue

Currently, I am working with Angular2 and have incorporated a div element to display multiple lines of text. Positioned below the text is a button that, when clicked, should select the entirety of the text within the div (similar to selecting text manually ...

htmlcssangulartypescriptangular2-template