Maintaining consistent row height in bootstrap when displaying or hiding a button

I'm currently working on a project utilizing AngularJS and Bootstrap to create a dynamic form. My goal is to have an 'edit' button display when a user hovers over a specific row of the form. However, I'm facing an issue where the row's size changes when the button appears or disappears, which is not the desired behavior.

I thought setting a minimum height for the row would solve the problem, like so:

ng-style="{'min-height': '40px'}"

Unfortunately, when I added this code to the 'div class="row"' element, it caused some issues, as demonstrated in this fiddle.

If anyone has insights into what I might be doing wrong and can offer a viable solution, I would greatly appreciate it.

htmlcssangularjstwitter-bootstrap

Answer №1

Apply a padding to the row and give the button a negative bottom margin in order to align them, similar to how you would position the footer at the bottom of a webpage.

Answer №2

@user9876543 Hooray, it's finally working! :) (I decided to post this as an answer instead of a comment)

It seems like there are two issues that need to be addressed. Firstly, the button is appearing on a separate row. To resolve this, you can include the following CSS code: 

.row > div {
    display: inline-block;
}

Secondly, the buttons are styled using Bootstrap and appear quite large. Replace the "btn" class with "btn-link" for your buttons and then eliminate the border and padding on top and bottom using the following CSS:

.btn-link {
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
}

Fingers crossed that this solution works for you :)

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

Leveraging Vue Data for Storing CSS Properties

I am currently utilizing the Quasar framework in conjunction with Vue for my application development. Below is a snippet of my code: <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"> Save </q-tooltip> <q-tooltip c ...

javascriptcssnode.jsvue.jsquasar-framework

What is the best way to transmit a response from PHP to Ajax?

A JavaScript function is used here that utilizes the POST method to send form data to PHP. The PHP script then checks this data in a database to verify its authenticity. However, there seems to be confusion on how to convey the response from PHP back to Ja ...

javascriptphpjqueryhtmlajax

Adjust the HTML content prior to displaying it to prevent any flickering

Is there a way to run code before the page is rendered, such as updating dates or converting text to HTML, without causing flickering when reloading multiple times? How can I ensure the code runs as it's drawn instead of waiting until the end to redra ...

javascripthtml

Switching images with Jquery

Seeking help to create an FAQ page using HTML, CSS, and jQuery. My goal is to rotate an arrow when a question is opened and revert it back when another question is clicked. I've successfully achieved this with <p> tags but facing issues with the ...

jquerycsshtml

Bind AngularJS data to select elements

I am encountering an issue with data binding on a select tag, despite following the guidelines in the documentation. Here is my select element: <select id="start-type" ng-model="startType"> <option value="day-of-week">Day of the week</op ...

javascriptangularjs

What is causing so many issues when this component is integrated? (the scope of issues will be detailed later on)

I have the following 3 components: news-feed.component user-activity-item.component user-activity-list.component Both user-activity components are located within a subdirectory of the news-feed component. Additionally, the user-activity-item is just a ...

htmlangularangular2-directivespure-css

Unable to load Google Maps API in Angular: Error - Google Maps API is not accessible

Just starting out with Ionic app development and I decided to incorporate angular google maps using bower. bower install angularjs-google-maps After installation, I added the necessary reference files in my index.html file: <script src="lib/lodash/di ...

angularjsionic-frameworkangular-google-maps

Applying CDNJS CSS or external CSS to Nodemailer HTML templates with Jade and Express: A Guide

I am attempting to send emails using node mailer. I have a jade template with HTML markup in an external file, which is compiled and rendered correctly. However, the styles inserted through maxcdn or cdnjs are not being applied. In this situation, how can ...

javascripthtmlnode.jsemailexpress

Is there a way to use JavaScript to alter the existing URL?

Currently, I am utilizing a select tag to allow users to choose the number of 'rows' displayed on the table. <%=select_tag :per_page, options_for_select([10,20,50,100]....some more code...., onchange => "if (this.value) {windows.location=& ...

javascriptjqueryhtmlruby-on-railsurl

Guide on setting default attributes for all properties of an object at once

Currently, I'm in the process of developing an AngularJS service provider (function) that achieves the following objectives: Gathers data from multiple tables within an SQLite database Delivers the resulting object to various controller functions S ...

javascriptangularjsobjectpropertiesdefineproperty

Adding a file to Flask using Peewee can be accomplished by following this

Can someone assist me with uploading a file in Flask Peewee? I am encountering an issue with my code generating an "IOError: [Errno 2] No such file or directory: '/lookbook/uploads/1375134_766940759988081_2093520123_n.jpg'" error. Form :- <f ...

pythonhtmlflask

The printed PDF of a webpage does not display HTML table background colors in Chrome or Firefox

Is there a way to change the colors of table cells in an HTML table when exporting to PDF? I'm creating content dynamically that includes background-color: #ffffff (or red) and showing it on a webpage, but the cell backgrounds appear as white in the P ...

htmlcsspdfpdf-generationbackground-color

Utilizing Webpack to emulate the @apply functionality of Tailwind CSS and shift away from using @extend in SASS

I am currently developing an internal CSS 'framework' / methodology that falls somewhere in between ITCSS and Tailwind. We heavily rely on utility classes, but sometimes the length of the actual class name becomes too much and we feel the need t ...

csswebpacksasstailwind-css

When words are enclosed in a table cell, the fixed table layout ensures that all columns are the same size

There are times when long words in my HTML table cells need to be broken if they overflow their designated area. To learn how to break table cell words, check out this question: Word-wrap in an HTML table The recommended CSS style is: style="word-wrap: ...

htmlcss

How can you create a blurred effect on a navbar?

Looking to achieve a unique blur effect in the background of my navbar component. The standard CSS blur effect isn't giving me the desired result, so I'm seeking some guidance on how to customize it. For example: https://i.sstatic.net/bPEXZ.png ...

htmlcss

What is the best method to shift an element to the top by a fraction of its height, namely -100%?

I am facing an issue with an element where I set top: -100%. My requirement is to translate top: -100% to top: -{height-of-the-element}. Unfortunately, instead of getting top: -{height-of-the-element}, I am getting top: -{height-of-another-element-wrapping ...

htmlcsscss-positionabsolute

Alter the displayed content of the component based on the tab that is selected

How can I change the content of a div outside of v-tabs based on the selected tab? I want to use the tabs as a navigation bar and not contain the content within the tabs. Do I need to use v-router within the component and give each tab a different href? M ...

htmlvue.jsvuetify.jsvuetify-tabs

Using AngularJS to Bind a $scope Variable

As I work on constructing a directive in angularJS, I come across an issue where I am attempting to bind an object property from another variable to an HTML element. Here is an example: angular.module('ng.box', codeHive.angular.modules) .directi ...

javascriptangularjsangularjs-directiveangularjs-scope

Is there a way to make the iOS Safari address bar shrink when scrolling, all while having a flexbox sticky footer inside a container?

I have implemented a standard flexbox sticky footer solution in my code: <body> <div class="wrapper"> <div class="header">Page Header</div> <div class="body"> <div class="b ...

cssflexboxmobile-safari

Retrieving a collection of data from MongoDB featuring today's date

How can I retrieve a list of items from MongoDB with today's date dynamically instead of hardcoding the date in my pushups.js file like "date":"2017-10-26T07:09:36.417Z? Take a look at the code snippet below: Here are the documents in my MongoDB: { ...

angularjsnode.jsmongodbexpress