The chosen option in the q-select is extending beyond the boundaries of the input field

Here's the code snippet I used for the q-select element:

      <q-select
        square
        outlined
        fill-input
        standout="bg-grey-3 text-white"
        v-model="unit_selection"
        :options="units"
        options-dense
        dense
      >
      </q-select>

I encountered an issue where the options in my 'units' array were too long, causing them to extend outside of the select box.

let units = ['aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa']
https://i.stack.imgur.com/GrWO4.png

Is there a way to limit the length of the selected option so that it is trimmed and does not overflow beyond the boundaries of the select box?

Answer №1

After some investigation, I discovered that this particular class requires overflow hiding to be applied.

.q-field__native {
  overflow: hidden;
}

In my opinion, this should be the default setting. Additionally, it's necessary to set a maximum width for the q-select element to prevent the box from expanding too much when the largest option is selected.

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

Effective ways to manage extensive forms in Angular 2

I have a complex form in my application. What is the most effective way to collect data from this form and transmit it to the API using Angular 5? ...

Ways to navigate to a different page using HTML response from an AJAX request

After receiving an HTML document as a response from an AJAX call, I need to create a redirection page using this HTML response. Can anyone provide guidance on how to achieve this? ...

Guide on how to retrieve Twitter Username and Profile Photo through the Twit NPM Package

Utilizing the twit npm package to retrieve the Authenticated Twitter Username and Profile Image, here is the code I am using: const Twit = require('twit'); let T = new Twit({ consumer_key: 'xxx', ...

Refresh needed for Material UI styles to load correctly in Next JS

UPDATE: Reproducible issue https://github.com/ganavol409/next-material-ui-classes-bug Issue seems to be related to Higher Order Components and importing useStyles from Material UI Implemented Solution: https://github.com/mui-org/material-ui/blob/master/ ...

Group an object by its name using Java Script/Vue.Js

I am looking to group objects by partial name and assign them to variables data = { SCHOOL-ADMISSION_YEAR: "2021" SCHOOL-SCHOOL_NAME: "ABC SCHOOL" SCHOOL-SCHOOL_LOCATION: "NEWYORK" ENROLLMENT-ADMISSION_YEAR: " ...

What is the appropriate way to notify Gulp when a task has been completed?

I have been working on developing a gulp plugin that counts the number of files in the stream. Taking inspiration from a helpful thread on Stack Overflow (source), I started implementing the following code: function count() { var count = 0; function ...

Can Mongoose handle document arrays editing and version control efficiently?

Currently working on a web application using Node.js and MongoDB/Mongoose, the main model in our project is Record which contains numerous subdocument arrays such as "Comment", "Bookings", and "Subscribers". However, when users click the delete button in ...

Vue is currently operating in development mode

I keep receiving this notification each time I visit the site: Vue is currently running in development mode. Remember to switch to production mode when deploying for production. Find more helpful tips at .... I came across a solution from someone suggest ...

Struggling to make button switch in my Spring Boot Application (e.g. from "Add to Cart" to "Remove")

My application allows users to add items to their cart, which are then persisted using Spring Data JPA and saved in a MySQL database. I am looking to change the text from "Add to Cart" to "Remove" when the button is clicked, and vice versa. I have attempt ...

Initiating a horizontal scroll menu at the center of the screen: Step-by

I need assistance setting up a horizontal scrolling menu for my project. The requirement is to position the middle button in the center of the .scrollmenu div. Currently, I am working with HTML and CSS, but open to suggestions involving javascript as well ...

My content is being obstructed by a single-page navigation system

I attempted to create a simplified version of the issue I am facing. Basically, I am working on a header with navigation that stays at the top of the page while scrolling. The problem arises when clicking on a section in the navigation. The screen scrolls ...

Issue with Nuxt 3 and .nojekyll file not being effective on Github Pages

I am facing some challenges while attempting to deploy my nuxt project on a github page. I have included the .nojekyll file in the public folder, but even after running generate, files with "_" are still showing up under public/static. Below are some ...

The Vue.js component appears to be hidden within the Swal.fire HTML

Here is how I use Swal.Fire in my file1.js: import TextModuleComponent from "../components/TextModuleComponent"; export default { components: {TextModuleComponent} } Swal.fire({ title: 'Sending the offer via email?', ...

What is the best way to create an index for a user-provided value in a textbox

Looking for guidance on how to set an index to user-provided values in a textbox, append them to a table in a new row, and display that index in the first column of every row. I am unfamiliar with this type of functionality. $(document).ready(function() ...

Stop the occurrence of OpenCPU javascript error pop-up notifications

I'm currently experiencing an error related to CORs during a test deployment of OpenCPU. While I may create a separate question for this issue in the future, for now, I am wondering if it is possible for the deployment to fail without alerting the end ...

The coordinates of the event do not match the coordinates of the location. Successful AJAX response data

How can I retrieve the accurate latitude and longitude when the Google Maps marker finishes dragging? It's confusing because for the same exact point, two different (but very approximate) coordinates are provided. Here are some example results for t ...

The functionality of the .toggle method is limited to only being effective 1.5

I'm having an issue with making an image popup using the .toggle function in javascript. It seems to work initially, but then only works partially after that. When I click on the image, it opens as expected. However, when I try to close it by clickin ...

material-ui DropDown with an image displayed for the selected value

Can someone help me figure out how to display an image in my material-ui dropdown menu? I'm currently using version 0.19.1 and have written the following code: <DropDownMenu autoWidth style={{ width: 500, marginBottom: 30 }} underlin ...

Vue email validation is failing to return a valid email address

I'm relatively new to Vue and have implemented email validation using the reg expression in my Vue script data for this project. By utilizing console.log(this.reg.test(this.email)) and observing the output while users input their email, the validation ...

Creating a regular expression to match special characters using JavaScript

I'm making an attempt to verify certain characters in my code. If the input field contains specific characters for each character, it will return true; otherwise, it will return false. function isChar(value) { //Creating a regex pattern to permit ...