Creating a collection of footer buttons using CSS within Element UI

Struggling to recreate this layout using CSS, specifically with the footer buttons.

https://i.sstatic.net/etG51.png

Here's what I've achieved so far using the el-card component of Element UI and CSS:


     <el-card>
   <div style="cursor: pointer;">
     <p>(15*47*14) Servo Toy Alternator</p>
     <img src="https://demo.facturador.pro/logo/imagen-no-disponible.jpg" class="img-thumbail img-custom">

   </div>
   <div class="card-footer" style="width: 100% ;">
     <el-button-group style="width: 100% ; padding: 0px ;">
       <el-button class="btn-primary-pos" size="mini" type="primary" icon="el-icon-edit"></el-button>
       <el-button class="btn-primary-pos" size="mini" type="primary" icon="el-icon-share"></el-button>
       <el-button class="btn-primary-pos" size="mini" type="primary" icon="el-icon-delete"></el-button>
     </el-button-group>
   </div>


 </el-card>

My CSS looks like this:

.btn-primary-pos {
   background-color: #007bff;
   border-color: #007bff #007bff #007bff;
   color: #FFF;
 }

 .btn-primary-pos:hover,
 .btn-primary-pos.hover {
   background-color: #0069d9;
   border-color: #0069d9;
   color: #FFF;
 }


 .card-footer {
   padding: 0px 0.75rem !important;
 }

https://i.sstatic.net/Thc4o.png

cssvue.jsvue-componentelement-ui

Answer №1

If you're looking to easily address this issue, consider using flexbox. By allowing your buttons to expand based on the size of their content, you can achieve the desired result:

<el-button-group class="group" style="width: 100% ; padding: 0px ;">
       <el-button class="btn-primary-pos" size="mini" type="primary" icon="el-icon-edit"></el-button>
       <el-button class="btn-primary-pos" size="mini" type="primary" icon="el-icon-share"></el-button>
       <el-button class="btn-primary-pos" size="mini" type="primary" icon="el-icon-delete"></el-button>
     </el-button-group>

Here is the corresponding CSS:

.btn-primary-pos {
   background-color: #007bff;
   border-color: #007bff #007bff #007bff;
   color: #FFF;
   flex-grow: 1;
 }

 .btn-primary-pos:hover,
 .btn-primary-pos.hover {
    background-color: #0069d9;
    border-color: #0069d9;
    color: #FFF;
 }


.group {
  display: flex;
}

For a live example, check out this CodePen link

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

What can be done to prevent parallel images from getting displaced while using CSS3 transformation effects?

Currently facing an issue where three separate images are being transformed using CSS3 upon hover. Various attempts have been made, including placing them in divs, a table, or just plain images. Trying to float them all in one direction, with #1 left, #3 ...

css

Tips for emphasizing a searched item in V-data-table using VueJS

Is it possible to highlight a specific value in a v-data-table by searching for a particular word? Below is a snippet of my current code: EDIT: I am using the CRUD-Actions Example from the official Vuetify documentation. https://vuetifyjs.com/en/componen ...

javascriptvue.jsvuejs2vuetify.js

Halt the adhesion of the Bootstrap column when it hits the div section

I have a simple bootstrap row containing two columns: <div class="row"> <div class="col-xs-7"> <p>Walking together</p> </div> <div class="col-xs-5" id="stay"> <p>Joyful journey</p> </div ...

javascriptjquerycsstwitter-bootstrap

Creating a Sleek MenuBar in JavaFX

At the top of my BorderPane, I have added a MenuBar containing a "File" Menu and a "Close" MenuItem: https://i.sstatic.net/5TAGS.png I want to make it appear thinner like the MenuBars in most software applications, similar to the image below: https://i. ...

javacssjavafxmenubar

Struggling to detect a click event within a VueJS application when using a bootstrap button-group

I am currently working on a VueJS project that includes a bootstrap button group... <div class="btn-group btn-group-xs pull-right" data-toggle="buttons"> <label class="btn btn-primary label-primary"> <input type="radio" name="options" i ...

javascripttwitter-bootstrapvue.js

Using HTML <style> in a bash script is a great way to enhance

I am attempting to eliminate the bullet points from HTML code generated by a bash script. I am currently struggling to apply the style across the entire program. Given my limited knowledge of html, I suspect that I may be misinterpreting or incorrectly p ...

htmlcssbashstylesheet

Change the JavaScript code to output HTML rather than just plain text

I've created a small plugin for tinymce4 that adds an additional dropdown menu with a list of headers (e.g. h1, h2...). The issue I'm facing is that I'm trying to display these header elements with their corresponding styles (e.g. <h1> ...

javascriptjqueryhtmlcsstinymce

Tips for resolving a double click issue with a jQuery slide up/down animation

When I click a button, there is an animation that makes a div slide up and then down again. It functions the way I want it to, but the first time you click it, it doesn't work; you have to click twice for it to respond. Someone recommended using... ...

javascriptjqueryhtmlcss

What is the best way to stack columns on small screens in a single row?

While utilizing the default bootstrap col classes, I noticed that when I reduce the grid to mobile size, the columns span the entire width of the row. This results in a long vertical list of items on mobile devices, even though there is sufficient space on ...

htmlcssbootstrap-4

Page load triggers the mounted component to fire twice

I am encountering a strange issue where the mounted and beforeMount functions of my components are running twice on page load. Each component represents a different page, so when I visit mywebsite.com/contact, the Contact.vue functions mounted and beforeMo ...

vue.jsvuejs2vue-componentvue-router

Undefined reference in Vue.js occurs when components are imported using lazy loading

In my current project, I am experimenting with lazy loading components like this: components: {SizeChartForm:() => import("@/core/components/size/SizeChartForm/SizeChartForm")}, One issue I encountered was with a ref to the SizeChartForm comp ...

vue.js

Issue with Vue.js webpack encountering problems when importing a CSS file from an external library

I'm in the process of integrating the aos animation library into my testing app. I installed it using yarn add aos, and in my Vue application, I've included the following code: <script> .... import AOS from 'aos/dist/aos.js' imp ...

webpackvue.jscss-loader

Can you explain why this unexpected bootstrap positioning is happening?

On my website, I have two large buttons (btn-lg) - one is placed at the top of the page with a hidden form beneath it (initially set to display: none), and the other button is below that with another hidden form. When clicked, the buttons reveal their resp ...

csstwitter-bootstrap

"Enhance your website's loading speed with the Google Page Speed Up

Hi, I've been using the Google PageSpeed Module and have created a .htaccess file to optimize my website (www.anetoi.com). I tried using combine_css to merge my CSS files but it didn't work as expected. I followed Google's instructions but s ...

cssperformance.htaccessweb

How can I incorporate sass abstracts into all my Vue components when using Vite as a build tool?

I am currently tackling a project that utilizes vue3, vue-router, vuex, and sass with vite as the chosen build tool. In my previous projects with vue-cli, I utilized a vue.config.js file to automatically import sass abstracts into all components using we ...

vue.jssassvite

Implementing yadcf and a fixed column filter in a Bootstrap datatable

I am currently utilizing Bootstrap DataTable in conjunction with the Yadcf filter plugin. The filter is functioning correctly for a regular table, however, when I have a fixed column with a Select2 dropdown, it does not render properly. The dropdown is hid ...

javascriptcssbootstrap-4yadcf

React Native buttons are displaying at a fixed width and not adjusting as expected

Within a row, I have two buttons with a padding of 20 between them, and they are only taking up the necessary width for the button text. The width remains constant! Here is the code for the buttons: <View style={styles.buttonContainer}> &l ...

javascriptandroidcssreactjsreact-native

Change your Bootstrap 4 navbar to a two-row layout using Bootstrap 5

Looking to update the navbar from Bootstrap 4 to Bootstrap 5 with two rows I came across this code snippet that works well for me in Bootstrap 4: https://codepen.io/metismiao/pen/bQBoyw But now I've upgraded to Bootstrap 5 and need help converting it ...

cssbootstrap-5

Issue with extra spacing within a div element in Bootstrap 5

Why is there extra spacing on the right side of my div? The image and text are supposed to take up 50% of the screen each. However, for some reason, there is additional spacing on the right that prevents this from happening. I am using Bootstrap 5. Click ...

htmlcssbootstrap-5

Fixing the bug in the circle text animation

I followed the instructions in this tutorial and implemented the following code: Splitting(); * { margin: 0; padding: 0; box-sizing: border-box; font-family: monospace; } body { display: flex; justify-content: center; align-items: center; ...

csscss-transforms