locked
how to make view pages FULL SIZE and not a tiny small centered box? RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User2142845853 posted

    asp.net mvc 4.7 with bootstrap and razor, on a view page; create a new controller entry add a view, shared layout to share the navbar, create a view page.

    content is centered.  how to erase formatting and make it full screen/full width but share the layout page?

    Tuesday, May 25, 2021 2:15 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User287926715 posted

    Hi rogersbr,

    Can you provide more view code?

    In addition, what does this passage specifically mean?

    what are ways to actually remove the padding?

    Best Regards,

    ChaoDeng

    Tuesday, May 25, 2021 9:42 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-323149085 posted

    object-fit: cover; 

    Tuesday, May 25, 2021 11:01 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User2142845853 posted

    Hi Chao,

    You can duplicate this by making any MVC app under the old asp.net 4.xx with razor pages.  you compile and run the new app.  the pages are not full screen by default.  the html has significant padding so that the usable part is about 60% of the screen or less.  html padding.   

    If you try and put a background image set to FULL SCREEN then run it?  you will have a large white border around the image.  but if you do this in the _Layout Shared page? it does go full screen.

    make a new view or use the default index.html, add a background image and set it to full screen 100% width?  it will have a huge white border around it.  Question is now how to get rid of that white border

    Tuesday, May 25, 2021 1:24 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User2142845853 posted

    Thank you but its still got the same border, 

    <body>
        <div class="modal-backdrop bg-image" style="  object-fit: cover;
            background-size: cover;
            background- center;
            background-repeat: no-repeat;
            background-image: url('../../Content/a11.PNG');
            height: 100vh;">

    if its just modal-backdrop?  it fills the screen but duplicates the image.  zoom out and there are 4, 6, 8 images.  no, must be one big image that does not repeat

    Tuesday, May 25, 2021 1:35 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User2142845853 posted

    remove bg-image from class, and its full screen but covers up the _Shared layout navbar

    Tuesday, May 25, 2021 2:03 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User2142845853 posted

    so far none of the CSS or changes have worked. 

    Tuesday, May 25, 2021 2:18 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User2142845853 posted

    no answers, nothing worked, conclusion: it cant be done.

    Tuesday, May 25, 2021 7:03 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    rogersbr

    no answers, nothing worked, conclusion: it cant be done.

    My best guess is you are asking about the div tag in the _layout.cshtml page that contains the View content.

        <div class="container body-content">
        @RenderBody()

    Just add a CSS container class to your Site.css file that defines whatever width you want.  Or any CSS file that loads after Bootstrap.

    .container {
    width:100%;
}

    Be to sure to press ctrl-F5 to force a page refresh and load the new CSS changes.  In the future, use the browser's dev tools to examine the style you wish to modify.  Dev tools has everything you need to troubleshoot CSS.

    Tuesday, May 25, 2021 7:48 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User2142845853 posted

    thanks, i wasnt meaning to sound sarcastic, but if the community doesnt respond, then its probably not the right kind of question.

    well it didnt make it full width, but will keep trying.  This is one of the first things i tried.  i know u know mvc and razor pages and how they have the padding in there

    Wednesday, May 26, 2021 12:10 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    thanks, i wasnt meaning to sound sarcastic, but if the community doesnt respond, then its probably not the right kind of question.

    well it didnt make it full width, but will keep trying.  This is one of the first things i tried.  i know u know mvc and razor pages and how they have the padding in there

    There is another style, body-content, which has left and right padding of 15px.   This style is in the Site.css file.  Change it to whatever you like.

    /* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 0px;
    padding-right: 0px;
}

    Wednesday, May 26, 2021 10:01 AM