How to disable horizontal tap if content fits to mobile screen - html

Bootstrap 3 shopping cart is defined using bootstrap standard markup like
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<body>
<div class="container">
<div id="_info"></div>
<header class="row">
<div class="col-xs-12">
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Lüli navigeerimist</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>
....
In mobile its content width is same as mobile screen width.
However user can drag content horizontally left so that ugly white space appears in left.
How to fix this so that unnessecary left dragging is not allowed?
Maybe some element in page causes this effect?
I tried to delete elements in Chrome developer tools Elements tab but horizontal scroling is still allowed.

The problem is your header and footer both have a hard set width to them. This would normally not be an issue with proper media queries but in my opinion in order to not have to worry about adding more media queries I would just change your CSS for the header like I have below:
#media only all and (min-width: 481px)
header, .wrap {
width: 100%;
margin: 0 auto;
}
For the footer, you have a facebook toolbar that has a lot of hardset inline widths. You can hack this together by wrapping the entire element in a div and applying width: 100%; overflow: hidden; to that div but I would strongly recommend you do more research on that plugin to make it function properly or find a better plugin that will give you better results.

This did it on my comp. I just disabled the set width of the header.

Related

Bootstrap 4.0 - responsive header with image + navbar + full-height body

I am building a responsive page with bootstrap 4 which has a heading/title section with an image of the client's logo, their name and a navbar. All these elements are responsive, i.e. the image shrinks according to screen size and the navbar minimizes on small screens.
Now I would like to have the body also in a responsive way. i.e.: fill the remaining height of the screen with content, use a scrollbar to display all the content if necessary.
But for some reason I cannot figure out how to span the remaining part of the page over the whole height. It is either too large on some larger screens, when it fits perfectly for mobile devices, or it fits perfectly on large screens, but has only half the height it should have on mobile devices.
The page is roughly build with this structure:
<!DOCTYPE html>
<html lang="de" style="height:100%">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Client Name</title>
</head>
<body class="main" style="height:100%">
<div class="container">
<div class="text-center">
<!-- Client image goes here -->
<h1 style="display:inline;margin-left:0.6em;color:#8b7d7b">Client Name</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:#e0eee0">
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainnavbar" aria-controls="mainnavbar" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="mainnavbar" class="navbar-collapse collapse justify-content-md-center">
<ul class="navbar-nav">
<li class="nav-item nav-link active">Page A</li>
</ul>
</div>
</nav>
<div class="container" style="height:70vh">
<div class="row" style="height:100%">
<!-- Main body of page -->
<div class="col-sm-1 col-md-9" style="height:100%">
<p class="col-scrol">
<!-- Main part of the page. Content should have full height and scroll vertically if necessary -->
</p>
</div>
<!-- Comment section (scrolling) -->
<div class="d-none d-md-block col-md-3 comment-section">
<!-- Comment section at the left hand side of the page -->
</div>
</div>
</div>
</body>
</html>
I created a plunkr which actually shows the whole page:
https://plnkr.co/edit/GQHoephQyx3hoejgkT4k?p=preview
What is the correct way, with bootstrap 4.0, to display the page as desired, i.e. use the full remaining height which is left when the image shrinks/grows depending on screen size?
EDIT for clarification:
The content itself should have a scrollbar, but not the whole page. I.e. the header with the image and the menu bar should always stay visible, while the content which comes afterwards should have a scrollbar, if necessary.
Instead of setting defined heights, use flexbox to make the content area fill the height of it's parent container (which in this case is the body).
body {
display:flex;
flex-direction:column;
}
.flex-fill {
flex: 1 1 auto;
}
.flex-shrink {
flex-shrink: 0;
}
https://codeply.com/go/fKNRvG0Hak
Note: The flex-fill utility class will be included in the next Bootstrap 4.2 release: https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9
Similar questions:
Bootstrap 4 make nested row fill parent that has been made to fill viewport height using flex-grow
Bootstrap 4 Navbar and content fill height flexbox
Bootstrap 4 page wide header bar above navbar

Create collapsible title bar in Bootstrap (no navigation)

I have created an application where the search function is the most important part. Therefore, I decided to put the search form in the title bar to have it available on every page. Works great, only on mobile devices I have the problem that the fluid layout causes the search fields to cover up most of the screen.
Thus, it would be great to collapse this title bar on mobile devices the same way a navigation bar does. Unfortunately, I did not get this working. I tried solving this with a navbar which did not work at all (see below).
Another idea of mine was to create two different search bars, a collapsed one and a hidden one and use Bootstrap's .hidden-* and .visible-* classes. Not sure how this would perform, apart from that I have not figured out yet how to create a non-navigation title bar in Bootstrap.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid col-md-12">
<div class='row'>
<div class='col-md-8'>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./index.php">Home</a>
</div>
<form method='post' class='form-inline' role='form' action='./search.php'>
<div id='menu' style='display:table-cell;vertical-align:middle;padding:10px;'>
<!-- several form elements (search boxes) go here -->
</div>
</form>
</div>
<div class='col-md-4' style='padding-top: 7px;'>
<!-- Session & status information go here -->
</div>
</div>
</div>
</nav>
Any idea how I can show my search fields on large screens and collapse them on mobile devices?
You did not give us much to work with, but as far as the collapsing goes I would go for a combination of css and jQuery. Here is the gist of how I would go about solving this problem by simply creating your own little "bootstrap-like" collapse.
html: Make your own little navigation structure with a button that will display your form on mobile devices.
<ul class="search-nav">
<li class="collapse-button">ICON</li>
<li class="search-form">
<form method='post' class='form-inline' role='form' action='./search.php'>
<div id='menu' style='display:table-cell;vertical-align:middle;padding:10px;'>
<!-- several form elements (search boxes) go here -->
</div>
</form>
</li>
</ul>
css: Make the collapse-button not show on large screen devices. On small screen devices the collapse-button can be displayed, but the form has to be hidden by default. All of this can be achieved using media queries:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
.collapse-button{
display: none;
}
.search-form{
display: block;
}
#media (max-width: 480px){
.collapse-button{
display: block;
}
.search-form{
display: none;
}
}
jQuery: If the user clicks on the collapse-button the form will toggle between being displayed and not. Something like this:
$( ".collapse-button" ).click(function() {
$( ".search-form" ).toggle(function() {
$( ".search-form" ).css("display","block");
}, function() {
$( ".search-form" ).css("display","none");
});
});
This is just the general idea. I would probably actually go with setting max-height of the form to 0 and overflow:hidden on devices with small screen and a bigger max height on devices with a larger screen. This way you could add a css transition that would make it expand more fluently.

Bootstrap NavBar not collapsing as expected - separating onto two lines

Question Background:
I'm using Twitter Bootstrap on my site and have incorporated a collpasing navbar for my sites menu.
The Issue:
The NavBarcollapses to a button as expected but when the screen hits a certain width the logo I have within the NavBarand the menu items split onto two separate lines. The following shows the issue:
This is the navbar with the page fully expanded and working as desired:
This is with the page slightly minimized and response, notice the NavBar has now split into two lines. This is not the desired behavior I want. I ideally I want the option to stay on the same line or collapse to a button:
This shows the NavBar fully collapsed:
The Code:
This is my NavBar markup. I cannot see why I'm seeing the above unwanted behavior with the NavBarseparating into two lines:
<div class="navbar navbar-fixed-top">
<nav class="navbar navbar-default" role="navigation" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">FM<b>FC</b></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Welcome</li>
<li>Club</li>
<li>About Us</li>
<li>Gallery</li>
<li>Committee</li>
<li>Contact Us</li>
<li>Location</li>
<li><a href='#Url.Action("FutureEvents", "Events", new { pageNo = 1 })'>Events</a></li>
</ul>
</div>
</div>
</nav>
</div>
Any help in working out this issue would be appreciated.
The nav is wrapping in to 2 lines because you have many menu items and the Bootstrap container switches to 750px as the screen width shrinks. You have 2 options..
One option is to use the full width container-fluid (this may not work for your design):
http://codeply.com/go/TfbwIivilI
Another option is to decrease the point at which the navbar collapses. This requires CSS to override the default navbar collapse point. In your case around 1000px seems to work best:
http://codeply.com/go/kcaXYh7ARB
It happenes because you have so many li elements, so what you need is to change the collapse break point. Just add the following to your css
#media(max-width:992px) {
.nav>li>a {
padding-left: 10px;
padding-right:10px
}
}
bootply.

Cut Bootstrap navbar in half

I'm using Bootstrap navbar with the bootstrap.min.css file.
This navbar stretches to the entire screen, where in the CSS file do I change the navbar settings (I don't want it to stretch)? There are a lot of navbar classes there and I can't seem to locate the right one.
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Imperia Bank
<button class="navbar-toggle" data-toggle="collapse"
data-target=".navHeaderCollapse">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Login</li>
<li>Register</li>
<li>Clients</li>
<li>Administrator</li>
<li>Accounts</li>
<li>Illustration</li>
<li >Atm</li>
</ul>
</div>
</div>
</div>
Place <div class="container"> above <div class="navbar navbar-inverse navbar-static-top">.
For anyone trying to make the navbar a custom width in Bootstrap 4, just override the navbar css width.
For example:
.navbar {
width: 400px;
}
In case you have more than 1 navbars (?!) just specify a custom class/id for the one you want to alter.
You should be able add your own styles on top of the existing styles. Using a tool like the chrome debugger you should b able to find the style rule that is doing this and then in your own stylesheet just use a more specific CSS selector to override it.
You can place the navbar in its own container (with applicable ID) and adjust the width of the container in your stylesheets. As Swagata said, you should be able to just flip the div tags and adjust your css accordingly. I'd give it a memorable name, though, for the sake of editing.
There is no pretty way to do this, considering .navbar was built to span the screen. But it can be accomplished fairly easily using the built in grid.
<div id='row'>
<div id='col-md-6'>
INSERT NAVBAR HERE
</div>
<div id='col-md-6'>
INSERT WHATEVER YOU WANT ON THE OTHER HALF OF THE SCREEN HERE
</div>
</div>

Insert logo inside navigation menu , I am using bootstrap3

I am using bootstrap3. I am facing one issue. I have a navigation menu and I need to insert my logo inside that as shown below.
Insert the logo so that it will stick to the nav bar?
When we scroll the body up , the body should not go beyond NAV bar. At present, its going upside of nav.
Can any one please tell us the design.
Thank you.
This is exactly what I had to do a while ago. This is what I did:
In the navbar header replace the main title <a class="navbar-brand" href="#">Project name</a> with your logo graphics <a class="logo" href="#"><img src="/img/your-logo.png"></a>like this:
<body>
<div class="top-banner"></div> <!--this keeps the top distance and also an ideal place for the top banner-->
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="#"><img src="/img/your-logo.png"></a> <!-- your logo comes here -->
</div>
In your header include a custom css after the main bootsrap.css (keep your original bootstrap.css intact to be compatibel with future updates):
.top-banner {
height:107px; /* set this to whatever height your logo needs */
}
.logo {
position:absolute;
float:left;
top:-105px; /* again, use this to position your logo, you can also use left and right */
}
Then you can go in two directions, either set navbar's margin bottom to the appropriate height:
.navbar {
margin-bottom: 60px;
position: relative;
}
Or you can also put a subheader div right under your navbar:
<div class="subheader">
<div class="subheader-inner">
<div class="container"> </div>
</div>
<div>
And add this to your css:
.subheader-inner {
height:40px;
margin-bottom:20px; /* or whatever values you need */
}
This way you can use the subheader to display navigation or other info, depending on your design.
Hope this helps.