2 Replies - 1762 Views - Last Post: 18 April 2013 - 03:47 PM

#1 Darkstar2500  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 08-November 12

Dynamic content resizing in twitter bootstrap

Posted 17 April 2013 - 05:08 PM

Hi, I am designing a general layout page where various types of content will be loaded onto and I can't seem to get the page to dynamically resize depending on the resolution of the screen the page is loaded on, I've currently set a fixed height which fits in IE but the moment I load it on Chrome everything goes bust; I did this as a temporary solution since I couldn't find any resources with a proper tutorial on how to do it. I was also having problems with scrollbars because I found my content overflowing but no scrollbar would appear until I set a fixed value for the height can anyone help me with dynamically resizing my page ?

NOTE: I wrote all this code in webmatrix with the cshtml extension, I'm also using bootstrap.

Code

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>

<link rel="stylesheet" type="text/css" href="/Shared/css/bootstrap.css" />
<style type="text/css">
.body
{     

    padding-top: 60px;
    padding-bottom: 40px;    

}
.renderBody {

        height: 462px;
        overflow: auto;
        padding-top: 60px;
        padding-left: 440px;
        margin: initial;
    }    
    #login{


        padding-right: 0px;
    }
</style>
<link rel="stylesheet" type="text/css" href="/Shared/css/bootstrap-responsive.css"/>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/js/bootstrap.min.js"></script>
  <script src="/downloads/twitter-bootstrap-hover-dropdown/twitter-bootstrap-hover-dropdown.js?view=1"></script>
</head>

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="navContainer">
            <img src="/Shared/Images/Logo.png" alt="LogoImage"></img>
                <form class="navbar-form pull-right">
                    <ul class="breadcrumb" id="login">
                       <li> <a href="#">Login</a>
                        <span class="divider"> /
                        <a href="#">Register</a></span></li>
                      </ul>
            </form>
            </div>
       <div class="container">
       <button type="button" class="btn btn-navbar" data-toggle="collapse">
         <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a class="brand" href="http://www.facebook.com">Some Information</a>
          <div class="nav-collapse collapse">
          <ul class="nav">
          <li class="active"><a href="/Login/LoginPage.cshtml">More Information</a></li>

    <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li class="nav-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
          <li class="active"><a href="">Traveling</a></li>
          <li class="active"><a href="#">Moving</a></li>
          <li class="active"><a href="#">Sports</a></li>
          </ul>

            <!--<form class="navbar-form pull-right">
                         <ul class="nav"><li class="active"><a href="#" class="active">Register</a></li></ul>
             </form>
             </div>-->
        </div>
      </div>
    </div>

            <div class="renderBody">
                @RenderBody()
            </div>
                </div>
</body>

</html>



Is This A Good Question/Topic? 0
  • +

Replies To: Dynamic content resizing in twitter bootstrap

#2 RhinoKok  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 18-April 13

Re: Dynamic content resizing in twitter bootstrap

Posted 18 April 2013 - 10:54 AM

What exactly the issue with the resizing? The button is not working or what?
Was This Post Helpful? 0
  • +
  • -

#3 Darkstar2500  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 08-November 12

Re: Dynamic content resizing in twitter bootstrap

Posted 18 April 2013 - 03:47 PM

View PostRhinoKok, on 18 April 2013 - 10:54 AM, said:

What exactly the issue with the resizing? The button is not working or what?


It's not really resizing but adding a scrollbar to the page when content overflows, I want a scrollbar to appear on the page when the content overflows (without giving the page a fixed height)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1