This topic contains 5 replies, has 2 voices, and was last updated by Sean Sean 2 years, 10 months ago.

Fixed right sidebar with admin 3 template


  • eggersa
    Participant

    Posts: 23
    Member Reply #6194

    Hello

    To meet my clients requirements I have to include a fixed sidebar on the right hand side within the admin 3 template (AngularJS, v4.5.4). See attachment. I did have a look at other templates that include a version of this sidebar on the left side (except that I do not need it for navigation, but some info portlets). But those sidebar navigation classes seem pretty complex. I am looking for an easy way to include the sidebar as in the attached picture inside the layout file to apply for all pages.

    Best Regards,

    Samuel

    • This topic was modified 2 years, 10 months ago by  eggersa.
    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #6211

    Hi,

    Did you try to devide the main content into 2 columsn using bootstrap grid system:

    Main Content(put all the dashboard portlets here)
    Right Sidebar

    Using the above code u can easily get the layout you need. I hope this will be helpful.

    Thanks.


    eggersa
    Participant

    Posts: 23
    Member Reply #6257

    Hi Sean

    Sorry for the late answer. I was spending a lot of time to find a proper solution myself. However, I did not succeed with that so far. The bootstrap grid system is inappropriate for this task since the grid system does not support fixed with columns (at least not that I know). As we use the fluid layout, this results in resizing the sidebar upon resizing the browser window. But the sidebar should be fixed with.

    Best Regards

    Samuel

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #6279

    Hi,

    You can use below code to implement fixed sidebar with fluid content. You can customize the below code further to fit your project requirements. Please add below code in your custom.min.css

    .mt-content-row {

    display: table;

    height: 100%;

    width: 100%; }

    .mt-content-row .mt-content-col-fluid {

    display: table-cell; }

    .mt-content-row .mt-content-col-fluid .mt-content-body {

    margin: 0;

    height: 100%;

    width: 100%;

    display: table; }

    .mt-content-row .mt-content-col-fixed {

    display: table-cell; }

    .mt-content-row .mt-content-col-fixed .mt-content-sidebar {

    height: 100%;

    width: 100%;

    display: table;

    margin-left: 20px;

    border: 1px solid red; }

     

    @media (max-width: 767px) {

    /* 767px */

    .mt-content-row {

    display: block;

    width: 100%; }

    .mt-content-row .mt-content-col-fluid {

    display: block;

    width: 100%;

    margin-bottom: 20px; }

    .mt-content-row .mt-content-col-fluid .mt-content-body {

    margin: 0; }

    .mt-content-row .mt-content-col-fixed {

    display: block;

    width: 100%; }

    .mt-content-row .mt-content-col-fixed .mt-content-sidebar {

    margin-left: 0; } }

    And use this fluid content with fixed sidebar layout as shown below:

    <div class=”mt-content-row”>

    <div class=”mt-content-col-fluid”>

    <div class=”mt-content-body”>

    content

    </div>

    </div>

    <div class=”mt-content-col-fixed” style=”width: 200px”>

    <div class=”mt-content-sidebar”>

    sidebar

    </div>

    </div>

    </div>

     


    eggersa
    Participant

    Posts: 23
    Member Reply #6283
    This reply has been marked as private.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #6285

    You are very welcome 🙂 Good luck with your project!

You must be logged in to reply to this topic.