Display toolbar title on small screens in separate lines

Recently, I encountered an issue while using v-toolbar in my vue app. Despite my efforts, I couldn't find a way to split the title into multiple lines on small screens. Currently, it displays as "Secti...." on smaller devices. Can anyone assist me with resolving this problem?

Section
  One
Organisation

Any help or guidance would be greatly appreciated. Thank you!

<v-toolbar dense fixed scroll-off-screen>
 <v-layout row wrap>
   <v-flex xs4 md4>
     <v-toolbar-title><a>Section One Organisation</a></v-toolbar-title>
   </v-flex>
   <v-flex xs4 md4>
     <v-toolbar-title><a>Section Two Contact</a></v-toolbar-title>
   </v-flex>
   <v-flex xs4 md4>
     <v-toolbar-title><a>Section Three Location</a></v-toolbar-title>
   </v-flex>
 </v-layout>
</v-toolbar>
javascriptcssvue.js

Answer №1

To optimize for different screen sizes, consider displaying shorter titles based on the screen size. Only show parts that are xs (extra small) for smaller screens.

You can also use a custom CSS class specifically for xs4 v-flex components.

I hope this information is helpful.

<v-toolbar dense fixed scroll-off-screen>
  <v-layout row wrap>

    <!-- first section - small + medium + large screen -->
    <v-flex md4>
      <v-toolbar-title><a>Section One Organisation</a></v-toolbar-title>
    </v-flex>
    <!-- first section - extra small screen -->
    <v-flex xs4>
      <v-toolbar-title><a>Organisation</a></v-toolbar-title>
    </v-flex>

    <!-- second section -->
    <v-flex md4 class="landing-page-section">
      <v-toolbar-title><a>Section Two Contact</a></v-toolbar-title>
    </v-flex>
    <v-flex xs4 class="landing-page-section">
      <v-toolbar-title><a>Contact</a></v-toolbar-title>
    </v-flex>

    <!-- third section -->
    <v-flex md4 class="landing-page-section">
      <v-toolbar-title><a>Section Three Location</a></v-toolbar-title>
    </v-flex>
    <v-flex xs4 class="landing-page-section">
      <v-toolbar-title><a>Location</a></v-toolbar-title>
    </v-flex>
  </v-layout>
</v-toolbar>

Answer №2

In situations like this, Vuetify offers a convenient helper class: class="text-break".

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

jQuery divs seem to "gaze up" towards the mouse pointer

I am attempting to recreate a fascinating effect using jQuery - where "cards" move in response to the mouse cursor as if they are looking up at it. I have come across a script that almost achieves what I need, but I require the ability to control the mov ...

javascriptjquerycss

Utilizing Vuetify's tooltip (v-tooltip) component with an independent activator (not enclosed within)

While I have a good grasp on using Vuetify's v-tooltip with the tooltip wrapping the component, I am struggling to figure out how to place the activator button outside of it. For example, my attempt at the code below did not work: <v-tooltip bott ...

vue.jsvuetify.js

Mastering the Art of Defining SVG Gradients in a Page-wide CSS File

On my HTML page, I have implemented a JavaScript code that dynamically generates SVG elements and inserts them into the HTML page. Currently, all the styling attributes such as fill colors are specified in the CSS of the entire webpage. This approach allo ...

htmlcsssvggradient

Redirecting with Express js when the cookie is not found

I successfully integrated Facebook login using Passport-js and also set up Cookie-strategy for traditional username/password login on my Express-js backend with a React front-end. The backend and frontend are hosted on separate servers and domains (backend ...

javascriptexpressherokucookies

Connection to Mysql database terminated for Node.js

I'm currently working on integrating a basic form into my database to enhance my understanding of node.js. However, I keep encountering an intriguing error during the process... error when connecting to db: { [Error: Connection lost: The server close ...

javascriptmysqlnode.jsexpress

Replacing text using regex results in whitespace

How can I eliminate text and spaces? For instance: http://www.exampleweb.com/myprogram.rar http://www.examplebackup.com/mybackups.rar http://www.exampleweb.com/myprogram1.rar I have used something similar to remove the second line: http://www.exampleba ...

javascriptregexstring

Issue with Nuxt 3 Server-Side Rendering: Failure to Show Custom Error Page When Server API Endpoint Fails

I'm facing a challenge with my Nuxt 3 SSR application where the custom error page is not showing up when there's an error in a server API endpoint using createError. I've tried setting the fatal option to true or false but still end up seein ...

vue.jsnuxt.jsnuxtjs3nuxt3nitro

Newbie's guide: Saving information in Ruby on Rails

In my Rails 4 application, I am looking to save questions and answers either in a document or database. Once stored, I want to showcase them on a specific webpage for users to respond. For instance, I envision having a page titled /questions where a quest ...

javascriptruby-on-railsrubyajax

Incorporate a personalized add-button into the material-table interface

My current setup includes a basic material-table structured like this: <MaterialTable options={myOptions} title="MyTitle" columns={state.columns} data={state.data} tableRef={tableRef} // Not functioning properly editabl ...

javascriptreactjstypescriptdatatablematerial-table

Animating a JQuery Slider using code from scratch

I'm attempting to dynamically alter/animate a JQuery slider. In this scenario, there are two arrays present: one for the values that need to be modified and another for the durations between modifications. By monitoring the console, you'll observ ...

javascriptjqueryanimationjquery-ui-slider

Conceal your password using HTML techniques

My goal is to hide passwords from being visible unless a user hovers directly over them. I've tried using the code below, but the hover effect isn't working as expected - either the password disappears completely or remains visible at all times. ...

htmlcsshovervisibility

Change the anchor text dynamically with JQuery

The page contains href links with incomplete text. For example, the link text displayed on the page is "link1", but it should actually be "link1 - Module33". Both the page text and actual text start with the same initial text ("link1" in this case). I retr ...

javascriptjquery

Displaying a collapsible table directly centered within the table header

I am having trouble centering my table header in the web browser page. When I click the "+" button, the data is displayed beneath the table header, but I want the collapsible table to be centered directly below the header. I have tried making changes in CS ...

javascripthtmljquerycss

Revamping the jQuery eye pupil tracker via the mousemove functionality

My goal with this code is to create an eye that follows the user's cursor direction. I found inspiration from this code snippet: https://codepen.io/J-Roel/pen/wWGNQN. However, since it was written in jQuery, I decided to convert it to vanilla JavaScri ...

javascriptjqueryvue.js

Submitting requests in Node.js Express

Can a request for a specific route be dropped using Node.js and express? For example, not returning an HTTP status or any headers, but simply closing the connection? app.get('/drop', function(req, res) { //What is the method to drop the requ ...

javascriptnode.jsexpress

Sort ng-repeat based on the initial character

Working in AngularJS, I am handling an array of objects and aiming to display filtered data based on the first letter. My initial method used was as follows. HTML: <p ng-repeat="film in filmList | startsWith:'C':'title'">{{film. ...

javascriptangularjsangularjs-ng-repeatangular-filters

Fetching data in Vuejs only upon user interaction

Greetings to all. Thank you for taking the time to read this message. I am currently working on populating a list of items. Within objects1, there is an array containing various data, including a URL for retrieving each item's picture. However, when I ...

apivue.jsaxios

Adding a unique element to other elements in jQuery/Javascript can be achieved even when the existing elements only have classes assigned to them

One interesting feature of a Wordpress theme is the ability for site administrators to create forms with descriptions for each field. These descriptions share a common class, 'description,' and look like this: <div class="field-head"><l ...

javascriptjqueryclasselementtitle

Establishing the Access-Control-Allow-Origin

I have a basic .NET web service: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; /// <summary> /// Summary description for WebService /// </summary> [WebService(Namespace = "http ...

javascript.netajaxweb-services

Customize the appearance and text in the navigation bar

Currently, I am in the process of creating my own personal website template. However, I have encountered an issue with styling the image and text within the navbar. I am looking to adjust the aspect ratio of the image in order to center it within the n ...

htmlcss