How to reduce layout in bootstrap?

Hi Team

I have layout and filemanager, the issue is the size and width as well height of my Filemanager, its not showing other details like folder, they are hidden by sidebar layout. Who can help me? i want other details are hidden be hidden well?

@{
ViewBag.Title = "File-Upload";
}
@{
string[] files = new string[] {"Edit", "Open", "|", "Delete", "Download", "Rename", "|", "Details" };
string[] folder = new string[] { "Edit", "Open", "|", "Delete", "Download", "Rename", "|", "Details" };
string[] layout = new string[] { "Edit", "SortBy", "View", "Refresh", "|", "NewFolder", "Upload", "|", "Details", "|", "SelectAll" };
}
@using Syncfusion.EJ2;
class="main-content">
class="d-flex align-content-md-end justify-content-end">
@Html.EJS().FileManager("file").AjaxSettings(new Syncfusion.EJ2.FileManager.FileManagerAjaxSettings
{
Url = "/Home/FileOperations",
GetImageUrl = "/Home/GetImage",
UploadUrl = "/Home/Upload",
DownloadUrl = "/Home/Download"
// adding some extra functionality
}).View(Syncfusion.EJ2.FileManager.ViewType.Details).DetailsViewSettings(new Syncfusion.EJ2.FileManager.FileManagerDetailsViewSettings
{
Columns = new List
{
new Syncfusion.EJ2.FileManager.FileManagerColumn()
{
Field = "name", HeaderText = "File Name", MinWidth = "50", Width = "50"
},
new Syncfusion.EJ2.FileManager.FileManagerColumn()
{
Field = "frm_created", HeaderText = "Date Created", Width = "50"
},
new Syncfusion.EJ2.FileManager.FileManagerColumn()
{
Field = "frm_modified", HeaderText = "Date Modified", Width = "auto"
},
new Syncfusion.EJ2.FileManager.FileManagerColumn()
{
Field = "frm_modified_by", HeaderText = "Modified By", Width = "50"
},
new Syncfusion.EJ2.FileManager.FileManagerColumn()
{
Field = "size", HeaderText = "Size", Width = "50"
}
}
}).Render()

$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
@media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
}
.wrapper {
display: flex;
align-items: stretch;
}
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar {
min-width: 250px;
max-width: 250px;
min-height: 100vh;
}
In your Layout Wrap all inside a div "Wrapper">
Your Layout should look like
"wrapper">
"sidebar">
...
"content">

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
$(document).ready(function () {

    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
    });

});

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
}
.wrapper {
    display: flex;
    align-items: stretch;
}
.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
}

#sidebar.active {
    margin-left: -250px;
}
#sidebar {
    min-width: 250px;
    max-width: 250px;
    min-height: 100vh;
}

In your Layout Wrap all inside a div "Wrapper">
Your Layout should look like
"wrapper">


    "sidebar">
        ...



    "content">

Mageshwaran R5y ago
Hi GcoBani,

please refer this link,I may help you,
https://smallbusiness.chron.com/reduce-pagefilesys-size-53940.html