How can I make the buttons closer together in Vuetify's v-bottom-navigation?

When viewing the vuetify v-bottom-navigation on certain mobile devices like the iPhone 5/SE, it can look distorted as shown here:

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

To fix this issue, I attempted to adjust the spacing between buttons so that it resembles the layout on other devices:

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

I tried using the small prop/class but unfortunately, it did not have the desired effect:

<v-bottom-navigation>

  <v-btn small>
    <v-icon>mdi-home-outline</v-icon>
  </v-btn>
  <!-- ... more buttons here ... -->

</v-bottom-navigation>
cssvue.jsvuetify.js

Answer №1

To customize the spacing and minimum width of the buttons, you can override the default styles:

<v-bottom-navigation>

  <v-btn class="custom-btn" small>
    <v-icon>mdi-home-outline</v-icon>
  </v-btn>
  <!-- ... additional buttons can be added here ... -->

</v-bottom-navigation>

.v-btn.custom-btn {
  min-width: 20px !important;
}

For more options, refer to the component API and explore the available SASS variables

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

Automatically closing a popup in VueJS once a success message is received

I am currently utilizing the vs-popup component from the Vusax library to showcase content. I have a method in my code for closing the vs-popup, but I want it to close automatically after displaying a success message since I have a form inside the popup. ...

vue.jspopup

Struggling to locate dependencies in vue cli 4

After setting up vue cli 4.1.1 for a new project and opting for manual setup to select necessary components, I encountered an issue when trying to run "npm run serve." The error message displayed was as follows: ERROR Failed to compile with 4 errors 10:59 ...

node.jsvue.jsnpmwebpackvue-cli

Identifying the Mounting of a New Component in Vue

Currently, I am developing a feature that allows users to undo actions through a modal that appears at the bottom of the screen after clicking the 'delete' button, similar to Gmail. My goal is to prevent users from clicking the 'delete butto ...

vue.jswatch

Creating a split hero section view using a combination of absolute/relative CSS techniques, Tailwind, and React

I'm in the process of creating a website using Nextjs, React, and TailwindCSS, and I aim to design a Hero section that resembles the one on the following website. https://i.sstatic.net/tq3zW.png My goal is to: Have a text title and buttons on the l ...

cssreactjstypescriptnext.jstailwind-css

The FormValidation plugin for Bootstrap is having issues with misplaced validation icons after changing the style

Do you think there may be an issue with the FormValidation package, or am I overlooking something? Upon testing a standard Bootstrap page, such as the "Stacked Form" example from this site, the form validates and displays icons correctly. https://i.sstat ...

csslayoutbootstrap-4formvalidation-pluginformvalidation.io

using mixins with styled-components

I have encountered a challenge while attempting to pass a mixin from Material UI to a styled-component. The problem lies in finding a way to transfer the mixin value to the styled-component without having to assign it to a css property. Unfortunately, dire ...

cssmaterial-uistyled-components

A structured design approach combining fixed and fluid elements tailored for the 960.gs framework

Our website is designed using the 960.gs grid system, and I am attempting to customize it into a 3-column layout with Fixed(100px) - Fluid(max width) - Fixed(100px) view. However, most online generators for 960.gs grids only offer fully fixed or fully flui ...

csslayoutgridfluid-layout960.gs

How is it possible for flex-direction to function correctly even when display: flex is not explicitly defined

I'm unsure if it is required to specify the display property when the flex-direction is set in a container. Everything seems to be working fine without it, but I'm concerned that I might be causing issues: .App { background-color: white; ...

cssflexbox

Learn how to collapse a list by clicking outside of it on the document with the following code: $(document).on("click"

I want to create a collapsible/expandable menu for my website. I had a version where hovering over a category would expand the subcategory, but what I really need is for the subcategories to expand when I click on a category and remain expanded until I cli ...

javascripthtmlcss

The issue I am facing with this self-closing TITLE tag causing disruption to my webpage

I am encountering a problem with my basic webpage. <html> <head> <title/> </head> <body> <h1>hello</h1> </body> </html> When viewed in both Chrome and Firefox, the webpage ...

csshtml

Utilizing the each() method to cycle through multiple unordered lists and concealing any nested list items exceeding a count of 8

Struggling to figure out how to loop through all ul elements with a class of ul.children and hide any child elements under ul.child that exceed 8. See the snippet of code below for reference: $(function() { $('ul.children').each(function() { ...

javascriptjqueryhtmlcss

The color of a Three.js plane appears more intense with the addition of lights

import * as THREE from 'three'; import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'; import * as dat from 'dat.gui'; const renderer = new THREE.WebGL1Renderer(); renderer.shadowMap.enabled = true re ...

javascripthtmlcssthree.jsthreejs-editor

What is the reason behind my page automatically scrolling to the bottom when it loads?

I am currently working on a project for my company, and unfortunately, I cannot share the code as it is proprietary. However, I am encountering a problem where the page loads and automatically scrolls to the bottom. I have checked for any unclosed tags in ...

javascripthtmlcsstwitter-bootstraptabs

Refreshing local JSON data in Vue.js

Being fairly new to Vue.js, I encountered an issue where I am unable to update or write data in my local JSON file. Let's assume that I have a data.json file https://i.sstatic.net/GZKh5.png and I want to add a new entry to it. I am currently using ...

javascriptnode.jsvue.jsvuejs2

The Vuetify v-spacer does not seem to be working as intended

When using the <v-dialog> modal, I am attempting to stick one block to the bottom of the <v-col> block by utilizing the <v-spacer> component, but it does not seem to have any effect. What could be causing this issue? You can view an exam ...

vue.jsvuetify.js

Using Vue.js, transitions are implemented selectively on certain views

In my vuejs application, I have set up transitions between pages in App.vue. Here is an example of how it looks: <template> <div class="container mb-auto"> <router-view v-slot="{Component}" > <transition ...

vue.js

Attempting to troubleshoot the issues causing my React application to malfunction

Having some trouble with my Spotify project. Every time I search for an artist, I receive an error message saying "illegal redirect_uri." I am also facing a list of coding issues that I am struggling to resolve. Any advice or suggestions would be greatly a ...

javascripthtmlcssreactjs

How to center a Bootstrap 4 navbar with brand and links in the middle

I'm facing some difficulty in centering the navigation bar of my website, including the brand and the links. Since I am more focused on backend development, I'm struggling with the frontend aspect of this. Code <script src="https://ajax.go ...

htmlcssbootstrap-4

What could be causing my Bootstrap 4.0 beta to malfunction?

I recently downloaded Bootstrap 4.0 beta from getbootstrap.com and included the CSS & js files from the dist folder. However, I noticed that some styles such as navbar, hidden, and visible are not working properly. Do I need to include any additional fil ...

htmlcssbootstrap-4

The current page I'm working on is scrolling sideways, but I prefer a stationary layout without any scrolling

I am currently facing an issue with my webpage scrolling to the right. This behavior is not acceptable as web pages are not supposed to scroll to the right, correct? Could someone assist me in eliminating this unwanted scroll from my page? I have only u ...

htmlcss