I'm trying the fixed tab example from the Google MDL documentation. Here is my code:
CODE
<!-- Simple header with fixed tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
Tab 1
Tab 2
Tab 3
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout__title">Title</span>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-2">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-3">
<div class="page-content"><!-- Your content goes here --></div>
</section>
</main>
</div>
OUTPUT
The problem is my drawer icon position is wrong! It is aligned to the top instead of center. What is wrong here?
I found this answer and it solved the problem! You need to add the <!DOCTYPE html> to the source and everything will work properly.
Related
I am currently using a Bootstrap for my website with a left sideBar navigation.
At the main content, i have 2 container for left and right content.
What I want is like the image below and i already done this:
and when the toggle button is clicked then the `rightDiv` will resize
which is my main problem and i'm not able to do:
and when the browser/device is small lets say mobile device then it be
like this and i already done this.
I am able to do the first and third image but failed at the second image which will resize the rightDiv on toggle button clicked.
so far i have this in my HTML:
<div id="wrapper">
<!--Start of Sidebar navigation -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<span>Home</span>
</li>
....
</ul>
</div>
<!-- End of Sidebar navigation-->
<!-- Start Main Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<!--START OF LEFT DIV-->
<div class="row-post-container">
</div>
<!--END OF LEFT DIV-->
</div>
<!--START OF RIGHT DIV-->
<div class="main-right-side-container">
<div class="right-side-container">
....
</div>
</div>
<!--END OF RIGHT DIV-->
</div>
</div>
</div>
<!-- END Main Content -->
</div>
and in my CSS i have this for left and right sidebar of DIV:
.row-post-container{
display: table-cell;
float: left;
max-width: 800px;
width: 100%;
min-width: 300px;
margin-right: 20px;
}.main-right-side-container{
display: table-cell;
min-width: 300px;
width: 100%;
max-width: 300px;
vertical-align: top;
height: 300px;
float: left;
padding: 0px;
margin-top: 20px;
}
Anyone has an idea?
For more clarification please do ask me.
Please suggest only CSS.
Thak you very much.
EDIT: the orange is leftDiv and dark green at the right side of orange is RightDiv.
One of the main things you are not considering is having bootstrap columns.
I have modified the example link you gave me and duplicated to have the two columns instead of one. By default, this is the current skeleton or rather structure of the code in the example -
Current Implementation on the example site
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<!-- your code here -->
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
Change to add columns like below -
In here, i suggest you should go on about adding more columns like so -
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-8"> <!-- your leftDiv code here --> </div>
<div class="col-lg-4"> <!-- your rightDiv code here --> </div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
First try to make full use of bootstrap classes, check this-
HTML-
<p><input type="button" id="showHideBtn" value="Slide Menu"></p>
<div id="sidebar-wrapper col-md-3">
<ul class="sidebar-nav">
<li>
<span>Home</span>
</li>
....
</ul>
</div>
<div id="page-content-wrapper" class="col-md-9">
<div class="container-fluid">
<div class="row">
<!--START OF LEFT DIV-->
<div class="col-xs-12 col-md-9 row-post-container">
</div>
<!--END OF LEFT DIV-->
<!--START OF RIGHT DIV-->
<div class="col-xs-12 col-md-3 main-right-side-container">
</div>
<!--END OF RIGHT DIV-->
</div>
</div>
</div>
CSS -
.hide{display:none !important;}
JS -
$('#showHideBtn').click(function(e){
$('#sidebar-wrapper').toggleClass('hide');
if($('#page-content-wrapper').hasClass('col-md-9')){
$('#page-content-wrapper').removeClass('col-md-9');
}else{
$('#page-content-wrapper').addClass('col-md-9');
}
});
I need that some content in my page would keep its position on screen even if the user scrolls the page right.
My HTML is very simple:
<head runat="server">
<title>Bla</title>
</head>
<body>
<!--header start-->
<header class="header dark-bg"></header>
<!--header end-->
<!--sidebar start-->
<aside>
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu"></ul>
<!-- sidebar menu end-->
</div>
</aside>
<section id="container" class="">
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<!--overview start-->
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><i class="fa fa-laptop"></i> Dashboard</h3>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i>Home
</li>
<li><i class="fa fa-laptop"></i>Dashboard</li>
</ol>
</div>
</div>
</section>
</section>
</body>
Take a look at:
https://jsfiddle.net/2wn8qgyb/
When scrolling right, I expect that the "Dashboard" and "Home / Dashboard" text wouldn't disappear and stand still. I want the user to have an option to click it without scrolling back to the left.
In your html, add an extra classname to this div <div class="col-lg-12">, it should now look like <div class="my-nav-bar col-lg-12">
After that, just add this to your css file:
.my-nav-bar{position:fixed;}
Here is a working Demo
Add this to your css:
.page-header {
position:fixed;
}
.breadcrumb {
position:fixed;
}
Fixed the Position of your div which you don't want to disappear
.div
{
position:fixed;
}
I use the basic Bootstrap Affix method to scroll to sections when clicking on a list group item.
This all works well.
The issue is, the content's title (anchor) disappears behind the header section of my pages
With fixed Top Navigation, it disappears behind the Menu, if the Top navigation is not fixed, but The WP Admin Toolbar is visible (logged in user), it disappears behind the Admin Toolbar.
Is there any way to set a kind of "Top Margin" for the title (anchor), so it will not scroll that far up?
To xplain better see this screenshots:
BEFORE
AFTER
I do not use JS but use just simple HTML for it.
Here the Mockup:
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 hidden-xs">
<!--Affix start-->
<div data-spy="affix" data-offset-top="0">
<div class="list-group">
Section I
Section II
Section III
Section IV
Section V
</div>
</div>
<!--Affix end-->
</div>
<div class="col-sm-9">
<!--Content start-->
<div class="wrapper">
<div id="section-2" class="section">
<h3>Section I</h3>
<p>...</p>
<p>...</p>
</div>
<div id="section-3" class="section">
<h3>Section II</h3>
<p>...</p>
<p>...</p>
</div>
<div id="section-4" class="section">
<h3>Section III</h3>
<p>...</p>
<p>...</p>
</div>
<div id="section-5" class="section">
<h3>Section IV</h3>
<p>...</p>
<p>...</p>
</div>
<div id="section-6" class="section">
<h3>Section V</h3>
<p>...</p>
<p>...</p>
</div>
</div>
<!--Content end-->
</div>
</div>
</div>
I have also tried to play with data-offset-top, but that is not even influencing the content, it is intended for the List (where you click to scroll-to)
Anybody has a idea why this is happening and how I could have the "Title" of post (my actual anchors) as the "upper limit" so that "titles" won't disappear behind the Menu/Admin bar?
Appreciated...
This solutions I already tried:
Not working, completely out of scope (padding to body won't solve anything here)
Bootstrap affix issues with sticky top navigation
CSS solution that will break the scroll experience and is not working in my case, I did not try yet the JS solution...
Div anchors scrolling too far
Try to combine positive padding-top and the same negative margin-top for .section
$(document).ready(function(){
$("#nav").affix();
});
.section {
padding-top: 26px;
margin-top: -26px;
}
.section:first-child {
margin-top: 0;
}
#nav {
width: 170px;
margin-top: 30px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 hidden-xs">
<!--Affix start-->
<div id="nav" data-spy="affix" data-offset-top="0">
<div class="list-group">
Section I
Section II
Section III
Section IV
Section V
</div>
</div>
<!--Affix end-->
</div>
<div class="col-sm-9" style="overflow: hidden;">
<!--Content start-->
<div class="wrapper">
<div id="section-1" class="section">
<h3>Section I</h3>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div id="section-2" class="section">
<h3>Section II</h3>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div id="section-3" class="section">
<h3>Section III</h3>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div id="section-4" class="section">
<h3>Section IV</h3>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div id="section-5" class="section">
<h3>Section V</h3>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
</div>
<!--Content end-->
</div>
</div>
</div>
Anyone know of any tricks to get the main content to move left (in my example) so it is lined up with the right drawer. I'm sure it has something to do with getting the absolute drawer outside of the overflow:hidden wrapper.
Here's the html, the css is in the jsfiddle example:
<nav>
<div class="header">
Title
</div>
<div class="content">
<ul>
<li>pizza</li>
<li>tacos</li>
<li>nachos</li>
</ul>
</div>
</nav>
<main>
<header class="rightnav">
<span class="left-nav">
toggle
</span>
<span class="content">
<input/>
link1 link2 link3
</span>
<span class="right-nav">
icon
</span>
</header>
<article>
<div class="header">header</div>
<div class="content">content</div>
</article>
<article>
<div class="header">header2</div>
<div class="content">content2</div>
</article>
<article class="detail">
<div class="header">header3</div>
<div class="content">content3</div>
</article>
</main>
I know it can be done if I break the right drawer outside of the main wrapper, just wondering if there are any techniques to get it to work leaving the html as is.
Need: To show / replace an another DIV from existing DIV tag on the same page while using data-role="page">
Problem: While using hide/show method to the div for displaying the next page reg button(click)=>reg DIV content> but the Reg DIV Content is displayed for only 2 sec, and then the apps is exited and comes to the main menu in Emulator.
Code_STRUCTURE: (as i mentioned below)
<div id="page" data-role="page">
<div id="header" data-role="header">
</div>
<div id="content" data-role="content">
<div id="log_in"> <!-- 1st content <div> -->
</div>
<!-- need to replace -->
<div id="reg"> <!-- 2nd content <div> -->
</div>
<!-- other <Div> with same procedure-->
</div> <!-- content END -->
<div id="footer" data-role="footer">
</div>
</div> <!-- page -->
// in J query call
// to show reg content then call
$('#log_in').hide(); // or also tried as $('#log_in').css('display','none');
$('#reg').show(); // or also tried as $('#reg').css('display','block');
Platform : Android
Compiled in: Eclipse Emulator
If any one have the answer, please post it! and if you prefer to give any more suggests and also be knowledgeable. Thank you for visiting this post!
Edited: (my old Code)
<div id="page" data-role="page">
<div id="header" data-role="header">
</div>
<div id="content" data-role="content">
<div id="log_in"> <!-- 1st content <div> -->
<form>
<input><!-- something goes here-->
<button id="login">Login</button>
<button id="reg">Register</button>
**</form>**
</div>
<!-- need to replace -->
<div id="reg"> <!-- 2nd content <div> -->
</div>
<!-- other <Div> with same procedure-->
</div> <!-- content END -->
<div id="footer" data-role="footer">
</div>
(Corrected Code):
<div id="page" data-role="page">
<div id="header" data-role="header">
</div>
<div id="content" data-role="content">
<div id="log_in"> <!-- 1st content <div> -->
<form>
<input><!-- something goes here-->
**</form>**
<button id="login">Login</button>
<button id="reg">Register</button>
</div>
<!-- need to replace -->
<div id="reg"> <!-- 2nd content <div> -->
</div>
<!-- other <Div> with same procedure-->
</div> <!-- content END -->
<div id="footer" data-role="footer">
</div>
The problem is most certainly with your js code.
You should be able to successfully use both jQuery show()/hide() and display: none;.
Here is working example