How to set up toolbar to be fixed in vuetify?









up vote
0
down vote

favorite












In vuetify I use a toolbar



 <v-toolbar dark color="primary">
 <v-toolbar-side-icon @click.stop="drawer.drawer = !drawer.drawer"></v-toolbar-side-icon>
 <v-toolbar-title>drawer.title</v-toolbar-title>
 </v-toolbar>
 <router-view v-bind:page="pageData"></router-view>


But I want to make it fixed, and not overlap with the vuerouter contents. How can I do that? I tried putting fixed but it still overlaps.



Thanks






javascript vue.js vuejs2 vuetify.js







share|improve this question





















  • could you provide a screenshot of what you're getting?
    – Boussadjra Brahim
    Nov 9 at 0:13










  • fixed it with this codepen.io/anon/pen/boxqwY
    – omega
    Nov 9 at 0:14














up vote
0
down vote

favorite












In vuetify I use a toolbar



 <v-toolbar dark color="primary">
 <v-toolbar-side-icon @click.stop="drawer.drawer = !drawer.drawer"></v-toolbar-side-icon>
 <v-toolbar-title>drawer.title</v-toolbar-title>
 </v-toolbar>
 <router-view v-bind:page="pageData"></router-view>


But I want to make it fixed, and not overlap with the vuerouter contents. How can I do that? I tried putting fixed but it still overlaps.



Thanks






javascript vue.js vuejs2 vuetify.js







share|improve this question





















  • could you provide a screenshot of what you're getting?
    – Boussadjra Brahim
    Nov 9 at 0:13










  • fixed it with this codepen.io/anon/pen/boxqwY
    – omega
    Nov 9 at 0:14












up vote
0
down vote

favorite









up vote
0
down vote

favorite











In vuetify I use a toolbar



 <v-toolbar dark color="primary">
 <v-toolbar-side-icon @click.stop="drawer.drawer = !drawer.drawer"></v-toolbar-side-icon>
 <v-toolbar-title>drawer.title</v-toolbar-title>
 </v-toolbar>
 <router-view v-bind:page="pageData"></router-view>


But I want to make it fixed, and not overlap with the vuerouter contents. How can I do that? I tried putting fixed but it still overlaps.



Thanks






javascript vue.js vuejs2 vuetify.js







share|improve this question













In vuetify I use a toolbar



 <v-toolbar dark color="primary">
 <v-toolbar-side-icon @click.stop="drawer.drawer = !drawer.drawer"></v-toolbar-side-icon>
 <v-toolbar-title>drawer.title</v-toolbar-title>
 </v-toolbar>
 <router-view v-bind:page="pageData"></router-view>


But I want to make it fixed, and not overlap with the vuerouter contents. How can I do that? I tried putting fixed but it still overlaps.



Thanks






javascript vue.js vuejs2 vuetify.js




javascript vue.js vuejs2 vuetify.js






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 8 at 23:31









omega

9,45844128255




9,45844128255











  • could you provide a screenshot of what you're getting?
    – Boussadjra Brahim
    Nov 9 at 0:13










  • fixed it with this codepen.io/anon/pen/boxqwY
    – omega
    Nov 9 at 0:14
















  • could you provide a screenshot of what you're getting?
    – Boussadjra Brahim
    Nov 9 at 0:13










  • fixed it with this codepen.io/anon/pen/boxqwY
    – omega
    Nov 9 at 0:14















could you provide a screenshot of what you're getting?
– Boussadjra Brahim
Nov 9 at 0:13




could you provide a screenshot of what you're getting?
– Boussadjra Brahim
Nov 9 at 0:13












fixed it with this codepen.io/anon/pen/boxqwY
– omega
Nov 9 at 0:14




fixed it with this codepen.io/anon/pen/boxqwY
– omega
Nov 9 at 0:14












1 Answer
1






active

oldest

votes

















up vote
1
down vote













  1. Add the app attribute to the toolbar

  2. Put your router content inside a v-content element.

  3. Finally, make sure the whole shebang is inside a v-app element.





share|improve this answer




















    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













     

    draft saved


    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53217709%2fhow-to-set-up-toolbar-to-be-fixed-in-vuetify%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    1
    down vote













    1. Add the app attribute to the toolbar

    2. Put your router content inside a v-content element.

    3. Finally, make sure the whole shebang is inside a v-app element.





    share|improve this answer
























      up vote
      1
      down vote













      1. Add the app attribute to the toolbar

      2. Put your router content inside a v-content element.

      3. Finally, make sure the whole shebang is inside a v-app element.





      share|improve this answer






















        up vote
        1
        down vote










        up vote
        1
        down vote









        1. Add the app attribute to the toolbar

        2. Put your router content inside a v-content element.

        3. Finally, make sure the whole shebang is inside a v-app element.





        share|improve this answer












        1. Add the app attribute to the toolbar

        2. Put your router content inside a v-content element.

        3. Finally, make sure the whole shebang is inside a v-app element.






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 9 at 2:21









        Steven Spungin

        6,34322230




        6,34322230



























             

            draft saved


            draft discarded















































             


            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53217709%2fhow-to-set-up-toolbar-to-be-fixed-in-vuetify%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            -

            Popular posts from this blog

            𛂒𛀶,𛀽𛀑𛂀𛃧𛂓𛀙𛃆𛃑𛃷𛂟𛁡𛀢𛀟𛁤𛂽𛁕𛁪𛂟𛂯,𛁞𛂧𛀴𛁄𛁠𛁼𛂿𛀤 𛂘,𛁺𛂾𛃭𛃭𛃵𛀺,𛂣𛃍𛂖𛃶 𛀸𛃀𛂖𛁶𛁏𛁚 𛂢𛂞 𛁰𛂆𛀔,𛁸𛀽𛁓𛃋𛂇𛃧𛀧𛃣𛂐𛃇,𛂂𛃻𛃲𛁬𛃞𛀧𛃃𛀅 𛂭𛁠𛁡𛃇𛀷𛃓𛁥,𛁙𛁘𛁞𛃸𛁸𛃣𛁜,𛂛,𛃿,𛁯𛂘𛂌𛃛𛁱𛃌𛂈𛂇 𛁊𛃲,𛀕𛃴𛀜 𛀶𛂆𛀶𛃟𛂉𛀣,𛂐𛁞𛁾 𛁷𛂑𛁳𛂯𛀬𛃅,𛃶𛁼

            𛀝𛂎𛃩𛁂𛂯𛀋𛃈,𛁴,𛀡𛃕𛁀𛀆𛀝𛀊𛀚𛃍𛂯𛂸𛁞𛂪𛀈,𛂵,𛀞𛂢𛀯𛃂𛁱 𛃩𛂜𛃅 𛂧𛀧𛂦𛀑,𛃛𛃟,𛃍𛀔𛀣𛀶𛀪𛃱𛀓𛀅𛁱,𛂖 𛁷 𛁉𛂹𛀉𛀼 𛁎,𛃭 𛀣𛃫𛃯𛁸𛂸𛂰𛂣𛀯𛁩𛂂𛃓𛃿𛂽𛃤𛃢𛁂𛀺 𛂚𛀅𛃵𛁬𛃽𛃯𛂔𛃣𛃝𛂫 𛂖𛂾𛂈 𛂡𛁔𛀇𛁁𛃛𛃖 𛃜,𛁊𛂠𛀌𛁼𛃶𛃣𛃊𛀘𛂐𛃓𛃛𛁂𛂥𛃛𛂲,𛃄𛀗𛀪𛁘𛁉𛁫𛀲𛀕𛂍𛁓𛁏𛃿𛃔𛁼 𛀞𛀤 𛂏𛃚𛃎 𛃱𛀭𛀟𛂃𛀭𛀫𛃚 𛂻𛁄 𛃚𛂁 𛂀𛂈𛃒𛁼𛃏𛂣𛂔,𛁩𛂝,𛁎,𛂗,𛂧𛃁𛃷𛁜𛃭𛂙𛂣𛀱𛂢𛁔𛁥𛂘𛃏𛀇𛂅𛁗𛃅𛂷𛃬𛁹𛁭,𛀵𛁍,𛃂𛁣𛁡𛃉𛀳𛀜𛁢 𛀲 𛁐𛀊𛁷𛃃𛃔𛀃𛃄𛃙𛀩𛃖𛂮𛃷𛀚𛂚𛃜𛁘,𛁤𛁵𛀝𛂮𛁲𛃸𛂩𛂼𛂠,𛁖𛃸𛀯,𛁰𛁇𛃣,𛃨𛂦𛀫𛃁 𛂓𛃁𛃥𛃰𛁅𛂻𛂻 𛁃𛁺𛃤𛀏 𛃻𛃽 jKH8N2gXPW4,5NtI,zi C6C,8 LtJ9 h5T40,Y 29W,8IH3pJwKf Q32PJw73ZM7a 7,0EI,5Hu NBOF x,V,Zan l 51Vm,1,o6 zHC69UbfzB6dS62,fvHKgJsOHeC 7 u Z,5,b510gw756DJ0K3 NLBCejw,1s12o037 gLrqm,8JV5,0HH7y8,5n1W5 oN943 0,EdU7tbRJ74 8DXtjBp0,KnM,2S,8 V4Ph1H2 Yb6FxtA,M,3qXGu2094wS GvlV4l,HFrZ D76u3,kr9E,ij4jFFOb 49,dJKN,V Kv,V4,a8wm,d2U8 9,Nx,vO98,JX,uO3,Y,Y1ay74uomg,7Tt5XFU TKTZ28,0C7LbNuU FhgfO3,4n E,l MSI03CLgM9D,Abr E 7sR0J,6,07N A2u 7,6Q PpzEZ1wKZN YAd759p,31UtJ63dBF3p 0,EZL 4FjbJ l Qep zHs63,u2f6xSKS Vz2Q O,9zIlq0J 9PR
            Read more

            Edmonton

            Image
            Clash Royale CLAN TAG #URR8PPP This article is about the city in Canada. For other uses, see Edmonton (disambiguation). City in Alberta, Canada Edmonton City City of Edmonton From top left: Downtown Edmonton, Fort Edmonton Park, Legislature Building, Law Courts, Rogers Place, High Level Bridge, Muttart Conservatory Flag Coat of arms Logo Nickname(s):  Canada's Festival City, City of Champions, The Oil Capital of Canada more... [1] Motto(s):  Industry, Integrity, Progress Edmonton Location of Edmonton in Canada Show map of Canada Edmonton Edmonton (Alberta) Show map of Alberta Coordinates: 53°32′N 113°30′W  /  53.533°N 113.500°W  / 53.533; -113.500 Coordinates: 53°32′N 113°30′W  /  53.533°N 113.500°W  / 53.533; -113.500 Country Canada Province Alberta Region Edmonton Metropolitan Region Census division 11 Founded 1795 Incorporated [2] [3]    • Town January 9, 1892  • City October 8, 1904 Amalgamated [2] February 12, 1912 Named for Edmonton, London Government  • Mayor Don I
            Read more

            Crossroads (UK TV series)

            Image
            [dummy-text] Crossroads (UK TV series) From Wikipedia, the free encyclopedia Jump to navigation Jump to search For other uses, see Crossroads (disambiguation). "Crossroads Motel" redirects here. For the album by the Sonny Moorman Group, see Crossroads Motel (album). Crossroads 2003 title sequence Created by Hazel Adair Peter Ling Written by Michala Crees Ivor Jay Rosalie Grayson Raymond Bowers David Garfield Edward F. Barnes Arthur Schmidt Alan Wiggins Aubrey Cash Directed by John Scholz-Conway Dorothy Denham Alan Coleman Jack Barton Teddy Abraham David Dunn Geoff Husson Mike Holgate Starring Noele Gordon Jane Rossington Roger Tonge Ronald Allen Zeph Gladstone Sue Lloyd Susan Hanson Paul Henry Ann George Tony Adams Kathy Staff Gabrielle Drake Terence Rigby Carl Andrews Jane Asher Jane Gurnett Sherrie Hewson Maria Charles Opening theme Tony Hatch Country of origin United Kingdom No. of episodes Original Series: 4510
            Read more