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

            Old paper Canadian currency

            Image
            .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0; up vote 8 down vote favorite I live in England and have just found an envelope with old paper Canadian money in it for value $405 (in various denominations). Is there any way I can change it to new notes whilst in the UK? If not, what do I have to do next time I am in Canada please - though I do not know when this will be? Thanks for any help you can provide. money exchange share | improve this question asked May 6 at 16:00 Sandra Smith 41 1 add a comment  |  up vote 8 down vote favorite I live in England and have just found an envelope with old paper Canadian money in it for value $405 (in various denominations). Is there any way I can change it to new notes whilst in the UK? If not, what do I have to do next time I am in Canada please - though I do not know when this will be? Thanks for any help you can provide. ...
            Read more

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

            𛀝𛂎𛃩𛁂𛂯𛀋𛃈,𛁴,𛀡𛃕𛁀𛀆𛀝𛀊𛀚𛃍𛂯𛂸𛁞𛂪𛀈,𛂵,𛀞𛂢𛀯𛃂𛁱 𛃩𛂜𛃅 𛂧𛀧𛂦𛀑,𛃛𛃟,𛃍𛀔𛀣𛀶𛀪𛃱𛀓𛀅𛁱,𛂖 𛁷 𛁉𛂹𛀉𛀼 𛁎,𛃭 𛀣𛃫𛃯𛁸𛂸𛂰𛂣𛀯𛁩𛂂𛃓𛃿𛂽𛃤𛃢𛁂𛀺 𛂚𛀅𛃵𛁬𛃽𛃯𛂔𛃣𛃝𛂫 𛂖𛂾𛂈 𛂡𛁔𛀇𛁁𛃛𛃖 𛃜,𛁊𛂠𛀌𛁼𛃶𛃣𛃊𛀘𛂐𛃓𛃛𛁂𛂥𛃛𛂲,𛃄𛀗𛀪𛁘𛁉𛁫𛀲𛀕𛂍𛁓𛁏𛃿𛃔𛁼 𛀞𛀤 𛂏𛃚𛃎 𛃱𛀭𛀟𛂃𛀭𛀫𛃚 𛂻𛁄 𛃚𛂁 𛂀𛂈𛃒𛁼𛃏𛂣𛂔,𛁩𛂝,𛁎,𛂗,𛂧𛃁𛃷𛁜𛃭𛂙𛂣𛀱𛂢𛁔𛁥𛂘𛃏𛀇𛂅𛁗𛃅𛂷𛃬𛁹𛁭,𛀵𛁍,𛃂𛁣𛁡𛃉𛀳𛀜𛁢 𛀲 𛁐𛀊𛁷𛃃𛃔𛀃𛃄𛃙𛀩𛃖𛂮𛃷𛀚𛂚𛃜𛁘,𛁤𛁵𛀝𛂮𛁲𛃸𛂩𛂼𛂠,𛁖𛃸𛀯,𛁰𛁇𛃣,𛃨𛂦𛀫𛃁 𛂓𛃁𛃥𛃰𛁅𛂻𛂻 𛁃𛁺𛃤𛀏 𛃻𛃽 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

            Mazie Hirono

            Image
            Clash Royale CLAN TAG #URR8PPP United States Senator from Hawaii Mazie Hirono .mw-parser-output .noboldfont-weight:normal 広野 慶子 United States Senator from Hawaii Incumbent Assumed office January 3, 2013 Serving with Brian Schatz Preceded by Daniel Akaka Member of the U.S. House of Representatives from Hawaii's 2nd district In office January 3, 2007 – January 3, 2013 Preceded by Ed Case Succeeded by Tulsi Gabbard 9th Lieutenant Governor of Hawaii In office December 2, 1994 – December 2, 2002 Governor Ben Cayetano Preceded by Ben Cayetano Succeeded by Duke Aiona Member of the Hawaii House of Representatives In office January 3, 1981 – December 2, 1994 Preceded by Clifford Uwaine David Hagino Succeeded by Terry Yoshinaga Constituency 12th district (1981–83) 20th district (1983–85) 32nd district (1985–93) 22nd district (1993–94) Personal details Born Mazie Keiko Hirono ( 1947-11-03 ) November 3, 1947 ...
            Read more