Md-Sidenav. How can i push main content to the right when sidenav is open? - angular-material

So I learning by building a portfolio SPA and I really want to use md-sidenav and so far it works but its showing up above my content and i want it to just push my content to the right when it's opened.
var app = angular.module('myApp', ['ngMaterial']);
app.controller('MyController', function($scope, $mdSidenav) {
$scope.openLeftMenu = function() {
$mdSidenav('left').toggle();
};
});
HTML
<div layout="row" ng-controller="MyController">
<!--MENU ICON AND FUNCTION -->
<md-button ng-click="openLeftMenu()">
<a><i class="material-icons medium">menu</i></a>
</md-button>
<md-sidenav md-component-id="left" class="md-sidenav-left md-whiteframe-z2" style="background-color: white;" >
<div class="container" style=" margin-top: 30px;
width: 90%;">
<img class="circle responsive-img ram " src="assets/avatar.png" style="margin-left: 13%">
<p style="font-weight:bold;
text-decoration:underline;color:#FF5E19;
letter-spacing:1pt;word-spacing:2pt;
font-size:18px;text-align:center;font-family:arial, helvetica, sans-serif;
line-height:1;">Ramin Joseph</p>
</div>
<div class="nav-wrapper">
<div class="col l12 s12 m12">
<ul style=" text-align:center;">
<li class="sbar">About</li>
<li class="sbar">Portfolio</li>
<li class="sbar">Shop</li>
<li class="sbar">Contact</li>
</ul>
</div>
</div>
</md-sidenav>

Use attribute md-is-locked-open on md-sidenav element.
However, then you'll have to change the logic how to open the sidenav. I would do it by binding md-is-locked-open to the model state property and then toggling it myself on click event:
<md-sidenav md-is-locked-open="isSideNavOpen">...</md-sidenav>
$scope.openLeftMenu = function() {
$scope.isSideNavOpen = !$scope.isSideNavOpen;
};

For new Angular Material version
Add mode="push" in your <md-sidenav>.
<md-sidenav mode="push">
</md-sidenav>
Refer this : Sidenave | Angular Material | Mode

Related

Bootstrap 4 - Scrollspy not working in MVC Core

I am learning MVC Core and I'm trying to implement Scrollspy from Bootstrap 4, but it looks like it does not work at all. I have already went through multiple questions in here, but no answer seems to work in my case. That's my first attempt to implement a web application, so I don't assume that I'm doing everything correctly.
My View looks as follows:
<div>
<div class="mainContent" data-spy="scroll" data-target="#sideMenu" data-offset="150">
<div>
<h3 id="title1">Title 1</h3>
<div class="regionContent">
Lorem ipsum...
</div>
</div>
<div>
<h3 id="title2">Title 2</h3>
<div class="regionContent">
Lorem ipsum...
</div>
</div>
<div>
<h3 id="title3">Title 3</h3>
<div class="regionContent">
Lorem ipsum...
</div>
</div>
<div>
<h3 id="title4">Title 4</h3>
<div class="regionContent">
Lorem ipsum...
</div>
</div>
<div>
<h3 id="title5">Title 5</h3>
<div class="regionContent">
Lorem ipsum...
</div>
</div>
</div>
<div class="sideBar list-group">
<ul class="nav navbar-nav" id="sideMenu">
<li><a class="list-group-item list-group-item-action" href="#title1">Title 1</a></li>
<li><a class="list-group-item list-group-item-action" href="#title2">Title 2</a></li>
<li><a class="list-group-item list-group-item-action" href="#title3">Title 3</a></li>
<li><a class="list-group-item list-group-item-action" href="#title4">Title 4</a></li>
<li><a class="list-group-item list-group-item-action" href="#title5">Title 5</a></li>
</ul>
</div>
</div>
My CSS (MainStyles.css):
.regionContent {
margin-top: 10px;
margin-bottom: 30px;
}
.mainContent {
margin-right: 300px;
padding-right: 30px;
}
.sideBar {
position: fixed;
top: 150px;
right: 0px;
width: 300px;
margin-right: 10%;
}
My _Layout page (jQuery copied from https://code.jquery.com/jquery-3.3.1.js) and pasted to js file:
<!DOCTYPE html>
<html>
<head>
<link href="~/Styles/Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="~/Styles/MainStyles.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jQuery_v3.3.1.js"></script>
<script src="~/Styles/Bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
#RenderBody()
</div>
</body>
</html>
File structure in wwwroot, which I wasn't sure if it's correct:
- wwwroot
-----Scripts
---------jQuery_v3.3.1.js
-----Styles
---------Bootstrap
------------css
---------------bootstrap.css
---------------bootstrap-grid.css
---------------bootstrap-reboot.css
------------js
---------------bootrstrap.js
------------MainStyles.css
My Startup.cs has UseStaticFiles() in Configure method. Also referencing js files itself seems to be working, because I have done tests with adding custom js file like this, with some code from w3schools just for testing purpose and it was OK. Yet for some reason scrollspy is not responding to scrolling at all and nothing on the list of titles is marked as active class. I was testing it on Chrome, but lately I also downloaded Firefox Developer Edition and in there, the last position on the list was always marked as active (by default and wasn't changing).
I'd be very grateful for any help and comments
Under the How it works section:
Scrollspy requires position: relative; on the element you’re spying on, usually the <body>.
You can either do that in your CSS:
.mainContent {
position: relative;
}
Or you can use one of the utility classes on your div:
<div class="mainContent position-relative" data-spy="scroll" data-target="#sideMenu" data-offset="150">
Additionally, the section also notes:
When spying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.
This is not the case with your .mainContent area. The snippet below shows your code with these changes applied, and the scrollspy functions correctly. If you don't want to have an explicit height for your .mainContent area, you'll need to apply the data-* attributes to body instead, and ensure that body is positioned relative.
.regionContent {
margin-top: 10px;
margin-bottom: 30px;
}
.mainContent {
margin-right: 300px;
padding-right: 30px;
/* CSS required to make it work */
position: relative;
height: 200px;
overflow: scroll;
}
.sideBar {
position: fixed;
top: 0; /* moved to top for sake of example display in iframe */
right: 0px;
width: 300px;
margin-right: 10%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div>
<div class="mainContent" data-spy="scroll" data-target="#sideMenu">
<div>
<h3 id="title1">Title 1</h3>
<div class="regionContent">
Lorem ipsum...
</div>
</div>
<div>
<h3 id="title2">Title 2</h3>
<div class="regionContent">
Lorem ipsum...
</div>
</div>
<div>
<h3 id="title3">Title 3</h3>
<div class="regionContent">
Lorem ipsum...
</div>
</div>
<div>
<h3 id="title4">Title 4</h3>
<div class="regionContent">
Lorem ipsum...
</div>
</div>
<div>
<h3 id="title5">Title 5</h3>
<div class="regionContent">
Lorem ipsum...
</div>
</div>
</div>
<div class="sideBar list-group">
<ul class="nav navbar-nav" id="sideMenu">
<li><a class="list-group-item list-group-item-action" href="#title1">Title 1</a></li>
<li><a class="list-group-item list-group-item-action" href="#title2">Title 2</a></li>
<li><a class="list-group-item list-group-item-action" href="#title3">Title 3</a></li>
<li><a class="list-group-item list-group-item-action" href="#title4">Title 4</a></li>
<li><a class="list-group-item list-group-item-action" href="#title5">Title 5</a></li>
</ul>
</div>
</div>

My Kendo Datepicker is not visible when close to the bottom of the page

When using the Kendo date picker under ASP Razor, the control opens outside the visible area if the picker is close to the bottom of the page. It also opens at quite a distance from the control.
#model [Company].DebugViewModel
<h2>Development Debug Page</h2>
#using (Html.BeginForm("Index", "Debug", FormMethod.Post))
{
<div class="form-group">
<label for="DebugDate">Blank Space:</label>
<div style="height:2000px; background-color:lightgray;"> </div>
</div>
<div class="form-group">
<label for="DebugDate">Debug Date:</label>
#Html.Kendo().DatePickerFor(a => a.DebugDate)
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" style="width:120px;" value="Save" />
</div>
}
Here is an image:
In the end, thanks to the feedback I got, I decided to drop bootstrap from the project. Lucky for me this is a desktop only application.
Here is what I ended up using:
<style>
body {
padding: 0 0 20px 0;
margin: 0;
position:relative; /* Fixed Kendo widget box problem */
}
.form-container {
width: 100%;
max-width:800px;
margin: 16px auto;
}
</style>
<div class="k-content form-container">
<ul>
<li>
<label for="ID">ID:</label>
#Html.Kendo().TextBoxFor(a => a.ID)
</li>
<li>
<label for="Date">Date:</label>
#Html.Kendo().DatePickerFor(a => a.Date)
</li>
</ul>
</div>

Shopify Website is giving white space on right side in Ipad Only

I'm facing an issue on this website fearofmissingoutfomo.com where there is a white bar on the right side when viewing in iPad.
my code is
html,body {
margin: 0;
padding: 0;
border: 0;
#include smooth_font();}
{% if settings.use_bg_image %}
body {
background: {{settings.shop_bg_color}} url({{ 'bg.png' | asset_url }}) 0 0 no-repeat;
}
body.index-template {
background: {{settings.shop_bg_color}} url({{ 'bg.png' | asset_url }}) 0 0 no-repeat;
padding-top: 40px;
padding-bottom: 40px;
}
Help will be really appreciated. I also see some related threads but can't relate that to my issue. Thanks.
The problem is happenning because of this section:
Currently you section has HTML like that
<div id="shopify-section-1509186783462" class="shopify-section index-section products-grid">
<section data-section-id="1509186783462" data-section-type="products">
<div class="section-header text-center">
<h2>View our featured christmas items</h2>
</div>
<div class="grid grid--uniform grid--view-items">
......
</div>
<div class="text-center view-more btn">
<a href="/collections/christmas">
See more
</a>
</div>
</section>
</div>
You should fix it and add container and row like that:
<div id="shopify-section-1509186783462" class="shopify-section index-section products-grid">
<section data-section-id="1509186783462" data-section-type="products">
<div class="container">
<div class="row">
<div class="section-header text-center">
<h2>View our featured christmas items</h2>
</div>
<div class="grid grid--uniform grid--view-items">
......
</div>
<div class="text-center view-more btn">
<a href="/collections/christmas">
See more
</a>
</div>
</div>
</div>
</section>
</div>

bootstrap responsive sidemenu

I've been trying to get my site which has a sidemenu to override the normal functionality for the top menu when mobile view is operated.
i.e. i want the menuitems to be full width.
<div class="col-md3 pull-left">
<div class="bs-sidebar hidden-print affix-top" id="sidemenu">
<ul class="nav bs-sidenav">
<li class="nav-header">
<a data-toggle="collapse" data-parent="#sidemenu" href="#Admincontainer" class=""><span>Admin</span><i class=" pull-right glyphicon glyphicon-chevron-down"></i></a>
<ul style="list-style-type: none; margin-left:10px" id="Admincontainer" class="nav collapse ">
<li class="">
<a href="lnk" title="">
Manage Members
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
<li>
<a href="/Admin/Member/addnew" title="">
Add A New Member
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
</ul>
</li>
<li class="nav-header">
<a data-toggle="collapse" data-parent="#sidemenu" href="#Publiccontainer" class=""><span>Committee</span><i class=" pull-right glyphicon glyphicon-chevron-down"></i></a>
<ul style="list-style-type: none; margin-left:10px" id="Publiccontainer" class="nav collapse ">
<li>
<a href="/Public" title="">
Home
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
<li>
<a href="/Public/Contact" title="">
Contact Us
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
</ul>
</li>
</div>
</div>
I've tried and failed with a few approaches so ive created a "vanilla" template of how my menu looks before i try and "fix" it. I basically want the sidemenu to become that fullwidth top menu when the viewport becomes too small to accommodate both sidemenu and main content side by side.
I've hacked an example from a default bootstrap template below.
jsbin example
Default template
Default template's in mobile with vertically stacked menu
Example showing the sidemenu i want to replace the vertically stacked menu in previous image.
You need two navbars (one at the top and one at the side) and then use JQuery to move the side navbar to the top of the page.
So if you have two navbars like so:
<div class="navbar navbar-inverse navbar-fixed-top ">
<div class="container ">
<div class="navbar-header ">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topmenu">
<span class="icon-bar "></span>
<span class="icon-bar "></span>
<span class="icon-bar "></span>
</button>
<a class="navbar-brand " href="/ ">Application name</a>
</div>
<div id="topmenu" class="navbar-collapse collapse ">
<ul class="nav navbar-nav ">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right ">
<li>
Register
</li>
<li>
Log in
</li>
</ul>
</div>
</div>
</div>
<div id="navbar" class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav nav-stacked" id="menu-bar">
<li class="panel dropdown">
<a data-toggle="collapse" data-parent="#menu-bar" href="#collapseOne">
Admin
</a>
<ul id="collapseOne" class="panel-collapse collapse">
<li>Manage Members</li>
<li>Add a new Member</li>
</ul>
</li>
<li class="panel dropdown">
<a data-toggle="collapse" data-parent="#menu-bar" href="#collapseTwo">
Committee
</a>
<ul id="collapseTwo" class="panel-collapse collapse">
<li>Home</li>
<li>Contact Us</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
<div class="clearfix"></div>
<div class="content">
<div class="container bodycontent">
<div class="jumbotron">
<h1>Testing Responsive sidemenu</h1>
<p class="lead">Trying to get my side menu to replace the top menu when the size goes too small.
</p>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<article>
<h1>Content</h1>
<p>Content here</p>
</article>
</div>
</div>
</div>
</div>
</div>
The JQuery is as follows:
var $window = $(window),
$html = $('#menu-bar');
$window.resize(function resize(){
if ($window.width() < 768) {
// When the side bar is moved to the top, this stops it being fixed in place
$("#navbar").removeClass('navbar-fixed-top');
return $html.removeClass('nav-stacked');
}
$("#navbar").addClass('navbar-fixed-top');
$html.addClass('nav-stacked');
}).trigger('resize');
And CSS:
/* CSS used here will be applied after bootstrap.css */
#media (max-width: 767px) {
.content {
padding: 15px;
margin-top: 10px;
}
}
#media (min-width: 768px) {
#menu-bar .panel {
margin-bottom: 0;
background-color: rgba(0,0,0,0);
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu-bar li a {
color: #fff;
font-size: 16px;
font-weight: bold;
}
#navbar {
float: left;
width: 200px;
height: 100%;
}
.content {
margin-left: 200px;
min-height: 100%;
margin-top: 60px;
}
.container {
margin-left: 10px;
padding-right: 150px;
}
}
.navbar-brand > h3 {
margin-top: 0;
margin-bottom: 0;
}
.body-content {
padding-left: 15px;
padding-right: 15px;
}
#navbar {
margin-top: 50px
}
If you want the left hand side bar to have certain CSS, you should specify the CSS like so:
#media (min-width: 768px) {
#menu-bar {
/* Put your CSS here. It will not apply to the menu-bar when it moves to the top */
}
}
Bootply here

Rendered HTML differs from source

I've come across some strange behaviour when I want to view a page in my ASP.NET MVC app.
I've created a small HTML helper that should generate a specific layout to display one of my classes.
It is invoked as such:
<div id="tabs-3" style="display:block; float:left;width:95%;">
#foreach (Trade trade in ViewBag.Trades)
{
#Html.Trade(trade, userLanguage)
}
</div>
The expected HTML that is generated looks like this:
<div id="tabs-3" style="display:block; float:left;width:95%;">
<div style="display:block; margin-top:0px; margin-left:auto; margin-right:auto; text-align:center;">
<a href="/en/Trade/Details/1" class="blocklink">
<div style="display:inline-block; margin-top:0px; margin-left:auto; margin-right:auto; border:2px solid black;">
<div style="display:inline-block; vertical-align:middle;">
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<img style='height:50px; width:50px; vertical-align:middle;' alt="User" src="http://localhost:50254/Images/Avatars/01.png">
</div>
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<span style="font-size:16pt; display:block; font-weight:bold;">
User
</span>
<span style="font-size:8pt; display:block;">
<br/>0 Trades (100%)
</span>
</div>
</div>
<div style="display:inline-block; padding-left:50px; padding-right:50px; vertical-align:middle;">
<div style="display:inline-block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto;">
<span style="font-size:10pt; display:block; font-weight:bold; text-align:center;">Sat 19 Apr 2014 20:00</span>
</div>
<div style="display:block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto; padding-top:5px; padding-bottom:5px; ">
<img alt="" src="/Images/Blank.png" style="background: url(/Images/Icons.png) -465px 0; display: block; width: 20px;height: 20px; text-indent: -9999px; margin-left:auto; margin-right:auto;" />
</div>
<div style="display:block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto;">
<span style="font-size:10pt; display:block; font-weight:bold; text-align:center;">3 Trades</span>
</div>
</div>
<div style="display:inline-block; vertical-align:middle;">
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<span style="font-size:16pt; display:block; font-weight:bold; text-align:right;">
User2
</span>
<span style="font-size:8pt; display:block; text-align:right;">
<br/>0 Trades (100%)
</span>
</div>
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<img style='height:50px; width:50px; vertical-align:middle;' alt="User2" src="http://localhost:50254/Images/Avatars/09.png">
</div>
</div>
</div>
</a>
</div>
<!-- Other records-->
</div>
I've used breakpoints to look at the generated string and it does look like it should. When I look at the source in a browser it also looks like the above.
However the rendered HTML differs from it (I've checked it with the debugging tools of IE 11, FF 28 and Chrome 34), it looks like this:
<div id="tabs-3" style="display:block; float:left;width:95%;">
<div style="display:block; margin-top:0px; margin-left:auto; margin-right:auto; text-align:center;">
<div style="display:inline-block; margin-top:0px; margin-left:auto; margin-right:auto; border:2px solid black;">
<div style="display:inline-block; vertical-align:middle;">
<a href="/en/Trade/Details/1" class="blocklink">
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<img style="height:50px; width:50px; vertical-align:middle;" alt="User" src="http://localhost:50254/Images/Avatars/01.png">
</div>
</a>
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<a href="/en/Trade/Details/1" class="blocklink">
<span style="font-size:16pt; display:block; font-weight:bold;"></span>
</a>
User
<span style="font-size:8pt; display:block;">
<br>0 Trades (100%)
</span>
</div>
</div>
<div style="display:inline-block; padding-left:50px; padding-right:50px; vertical-align:middle;">
<div style="display:inline-block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto;">
<span style="font-size:10pt; display:block; font-weight:bold; text-align:center;">Sat 19 Apr 2014 20:00</span>
</div>
<div style="display:block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto; padding-top:5px; padding-bottom:5px; ">
<img alt="" src="/Images/Blank.png" style="background: url(/Images/Icons.png) -465px 0; display: block; width: 20px;height: 20px; text-indent: -9999px; margin-left:auto; margin-right:auto;">
</div>
<div style="display:block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto;">
<span style="font-size:10pt; display:block; font-weight:bold; text-align:center;">3 Trades</span>
</div>
</div>
<div style="display:inline-block; vertical-align:middle;">
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<span style="font-size:16pt; display:block; font-weight:bold; text-align:right;">
User2
</span>
<span style="font-size:8pt; display:block; text-align:right;">
<br>0 Trades (100%)
</span>
</div>
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<img style="height:50px; width:50px; vertical-align:middle;" alt="User2" src="http://localhost:50254/Images/Avatars/09.png">
</div>
</div>
</div>
</div>
<!--Other records-->
</div>
In case it isn't clear at first sight the Hyperlink (with class="blocklink" on the 3rd row of the good HTML) is not rendered as a single tag around the div, but is rendered several times within the code either with nothing in between or around a <span> tag, breaking what should be in that tag.
The blocklink style class is something I found looking for a way to add a link around a div:
.blockLink
{
position:absolute;
top:0;
left: 0;
width:100%;
height:100%;
z-index: 1;
background-color:#ffffff;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:0;
}
Has anyone come across such an issue? I'm really in the dark on why the rendered HTML looks different.
All is done on the build-in IIS Express directly from within VS 2012.4. I can't try it on an external server, since the app is still being developed and no server has been assigned yet.
That's because your html contains nested <a> elements, which is not standards compliant HTML. From the W3C spec for <a>:
The a element may be wrapped around entire paragraphs, lists, tables,
and so forth, even entire sections, so long as there is no interactive
content within (e.g. buttons or other links).
You also have related discussions on SO, like in this question. The way the browsers render this scenario is discussed here which explains why you see a different rendered html.
I have created this fiddle with a simplified html code that reproduces this issue:
<a class="blockLink" href="#">
<div class="blockLinkContent">
<h1>Link with inner link</h1>
<a class="innerLink" href="#">inner link</a>
</div>
</a>
The rendered html looks like this on Chrome:
<a class="blockLink" href="#">
</a>
<div class="blockLinkContent"><a class="blockLink" href="#">
<h1>Link with inner link</h1>
</a><a class="innerLink" href="#">inner link</a>
</div>
In order to fix this, you can get rid of one of the links. Then use Javascript\CSS to handle the click event and add any styling you might need like active/hover states or text underline.
For example, you could get rid of the inner link, replacing it with a span and use Javascript to handle clicking on the new inner span:
<a class="blockLink" href="#">
<div class="blockLinkContent">
<h1>Outer link only</h1>
<span class="innerLink">inner link</span>
</div>
</a>
$(function(){
$(".innerLink").click(function(){ alert("inner clicked"); return false; });
});
You can play around with this code in this other fiddler.
Hope this helps!

Resources