Trying to make Bootstrap buttons completely fill the TD which contains them

[mongoose00318]

 

I have tried using bootstraps h-100 and w-100 to make it work as well as other things. I wont know the row height for each page so I need the buttons to fill the container TD. 

 

Why won't bootstraps h-100/w-100 classes work?

[Barand]

Why not add onclick() to the <td> elements themselves (and different color classes) instead of putting buttons inside them?

[mongoose00318]

I could but I'd have to recode a lot and I've always found bootstraps buttons easy to use.

 

https://stackoverflow.com/questions/53520077/css-100-height-in-a-tablecell

 

What do you think about that?

[mongoose00318]

Ugh this is frustrating

[mongoose00318]

Maybe I just need to write a jQuery function that determines the height and width of the parent td and then sets the height of each button...

[requinix]

Fake it with position:absolute and push it to the edges of the cell? Leaves you with a vertical alignment problem though.

[mongoose00318]

 

I got it working with this:

		function updateTableAfterSubmit() {
			table.ajax.reload( function (json){
				auto_btn_height_width();
			}, false );
		}

		function auto_btn_height_width() {
			$('td.mfg-view-cols').each(function() {
				tdWidth = $(this).width();
				tdHeight = $(this).height();

				$(this).find('button').css({'width': tdWidth, 'height': tdHeight});

				console.log(tdHeight);
			});
			console.log($('td.mfg-view-cols').length);
		}

Then just had to make sure I identified the right events to do call backs on. Works great now.

[mongoose00318]

Overall what do you think of this solution?