I have created the plunkr found here: http://plnkr.co/edit/gqtFoQ4x2ONnn1BfRmI9?p=preview
This menu works as expected on a desktop/laptop.. But it does not look as it does on a desktop.
I imagine the CSS is correct, but something wrong with the viewport settings??
HTML:
<body ng-controller="MainCtrl" ng-style="{true: {overflow: 'hidden'}, false: {}}[toggleMenu]">
<div class="header compact" role="banner">
<div class="menu" ng-class="{true: 'active', false: ' '}[toggleMenu]" ng-style="{true: {width: menuWidth}, false: {}}[toggleMenu]">
<h2 ng-click="toggleMenu = true">Menu</h2>
<div class="nav" ng-style="{ 'width' : winWidth, 'height' : winHeight }">
<ul role="navigation" class="nav-main">
<li class="active">
Home
</li>
<li>
<a href="../makani/challenge/" data-ga-event="Header,Navigate,The Challenge">The
Challenge</a>
</li>
</ul>
<ul role="contentinfo" class="nav-aux">
<li>
FAQ
</li>
<li>
About Us
</li>
</ul>
</div>
<button type="button" ng-click="toggleMenu = false">Close</button>
</div>
</div>
</body>
You are not using any vendor prefixes in your css. Even iOS 8 requires them to be present. So in addition to transform also -webkit-transform.
See http://caniuse.com/#search=transform
BTW: Nice menu.
Related
I am developing a page in Angular2/4 which has a left navigation bar. I put this left menu in a separate component and nesting this in the main component. Reason being I need to reuse this left menu in multiple pages/ components, however, different page will have different menu items. So, I am trying to pass the menu items from the main component through #Input() binding:
sidebar.component.ts:
#Component({
selector:'sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent{
#Input() innerContent:string;
....
sidebar.component.html:
<div id='mySidebar' class='sidebar-primary sidebar-animate' [class.sideBarShow]='isSideBarShow'
[class.sideBarHide]='!isSideBarShow' >
<ul class='goo-collapsible' style="margin-bottom:0px" >
<li class='header'><!--Common header in left menu-->
<div class='glyphicon glyphicon-arrow-left' style='float: left; width: 33%;padding-left:5px;cursor:pointer;' (click)='editTheme()'></div>
<div class='glyphicon glyphicon-search' style='float: left; width: 34%;cursor:pointer;'></div>
<div class='glyphicon glyphicon-remove' style='float: left; width: 33%;cursor:pointer;' (click)='sideBarClose()'></div>
</li>
</ul>
<ul class="goo-collapsible" style="margin-bottom:0px" [innerHTML] = "innerContent"><!--This should hold menu items depending upon main page-->
</ul>
</div>
mainpage.component.html:
-------------------------
sidebar [isSideBarShow]="isSideBarShowShared" [innerContent] =
"viewLayout" (notify) ="onNotify($event)"></sidebar>
mainpage.component.ts
-----------------------
....
ngOnInit() {
//this.nav.hide();
this.viewLayout = `<!li class='dropdown'><a (click)='changeHeaderTextAlign()'><span class='icon-table'></span> Top Navigation Bar</a>
<ul>
<li ><a href='#'>Content</a></li>
<li ><a href='#'>Comments</a></li>
<li ><a href='#'>Tags</a></li>
</ul>
</li>
<li><a href='#'><span class='icon-folder-open'></span><input type='color' value='#999999' (input)='headerColorChange($event)'> Header Image with Text</a></li>
<li class='dropdown'><a><span class='icon-user'></span><input type='range' min='0.1' max='1' step='0.1' (change)='setHeaderOpacity($event)'> Page Section</a>
<ul>
<li ><a href='#'>Group</a></li>
<li ><a href='#'>User</a></li>
</ul>
</li>
<li><a (click) = 'addDynamicComponent()'><span class='icon-cogs'></span> Footer and Social Media</a>
</li>`;
}
What I am seeing is that the style is being dropped from the innerHTML. I followed following instructions, but no luck:
Angular2 innerHtml binding remove style attribute
I learned that accessing DOM directly is not recommended in angular2 but any better/ recommended approach for this scenario? Any help would be very much appreciated!!
regards
The thing you are trying to achieve by innerHTML can also be done using ng-content which will enclose the specific component html in your sidemenu html.
Your sidemenu.html should look like this
<div id='mySidebar' class='sidebar-primary sidebar-animate' [class.sideBarShow]='isSideBarShow'
[class.sideBarHide]='!isSideBarShow' >
<ul class='goo-collapsible' style="margin-bottom:0px" >
<li class='header'><!--Common header in left menu-->
<div class='glyphicon glyphicon-arrow-left' style='float: left; width: 33%;padding-left:5px;cursor:pointer;' (click)='editTheme()'></div>
<div class='glyphicon glyphicon-search' style='float: left; width: 34%;cursor:pointer;'></div>
<div class='glyphicon glyphicon-remove' style='float: left; width: 33%;cursor:pointer;' (click)='sideBarClose()'></div>
</li>
</ul>
<ul class="goo-collapsible" style="margin-bottom:0px">
<!--This should hold menu items depending upon main page-->
<ng-content></ng-content>
</ul>
</div>
You application-main.component.html or any file where you want to include sidemenu comeponent should be like this :-
<div>
..... Blah Blah whatever page component html
<sidebar [isSideBarShow]="isSideBarShowShared" (notify)="onNotify($event)">
<!---- Whatever goes inside the component tag , is part of ng-content ---->
<!li class='dropdown'><a (click)='changeHeaderTextAlign()'><span class='icon-table'></span> Top Navigation Bar</a>
<ul>
<li ><a href='#'>Content</a></li>
<li ><a href='#'>Comments</a></li>
<li ><a href='#'>Tags</a></li>
</ul>
</li>
<li><a href='#'><span class='icon-folder-open'></span><input type='color' value='#999999' (input)='headerColorChange($event)'> Header Image with Text</a></li>
<li class='dropdown'><a><span class='icon-user'></span><input type='range' min='0.1' max='1' step='0.1' (change)='setHeaderOpacity($event)'> Page Section</a>
<ul>
<li ><a href='#'>Group</a></li>
<li ><a href='#'>User</a></li>
</ul>
</li>
<li><a (click) = 'addDynamicComponent()'><span class='icon-cogs'></span> Footer and Social Media</a>
</li>
</sidebar>
</div>
Also you can put multiple ng-content in a component using [select] attribute.
<ng-content select="[header]"></ng-content>
And in the other component file using it, just on the parent html tag give the name assigned in select as an attribute to the tag like this..
<div header> Blah blah..... </div>
Here is my code:
<div class="wrap">
<div id ="header">
<a href="index" class = "logo">
<img src = "logo.png" alt = "" />
</a>
<nav class="navigation">
<ul>
<li>Share</li> |
<li>Join</li> |
<li>See Safty Tips</li> |
<li>Settings</li>
</ul>
</nav>
</div>
<div class="wrapper">
<img src="accident.png" alt="">
<div id="right-content">
<h2>Hit and Run No Injuries</h2>
<p>2.610 miles from your new neighbor<br />
May 20, 2015 at 12.34 PM </p>
<h4>California HWP 2 - High Level</h4>
</div>
</div>
<div class="wrap">
<ul class="secure_v5">
<li id="li-incident">
<a class="inviteLink dark" href="/v5/Resources.aspx?IFrameURL=Invitationv5&vn=&gORn=1">See Incident Location</a>
</li>
<li id="login-signup">
<a class="button dark" href="V4/Login.aspx?v5=1">Share Incident with Friends</a>
</li>
</ul>
</div>
<div class="thanks">
<p>Sincerely,<br />
The AlertID Team</p>
</div>
<p style="text-align:center;">This sponsor is helping to protect your neighborhood</p>
<div class="footer-links">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
and here is jsfiddle , (didn't include images)
When i run this code, some alignment is not correct,
I need something same like this
I just confused with which exact css can be used, Can anyone help me please?
Thanks,
Use HTML tables to control the design layout and some presentation. You may be used to using pure CSS layouts for your web pages, but that approach just won’t hold up in an email environment.
Use inline CSS to control other presentation elements within your email, such as background colors and fonts.
You just put div #right-content to right
try it on CSS.
#right-content {
float:right;
width:600px;
}
#right-content h2{
text-align:center;
}
I create a little attribute to h2 inside div #right-content
and define a fixed width for right-content. It's necessary because of attribute float: right.
I am using the jquery accordion source for my website and what happens when I scroll down is the accordion overlaps my header.
I haven't made any adjustments to the CSS code in the accordion class so I don't have much to show but I've read a lot of people complaining that the accordion source from jquery UI has this problem but I have not been able to find out what it is?
Any ideas? Thanks!
<script>
JQuery(document).ready(function(){
$("#accordion").accordion();
});
</script>
</a>
</div>
<nav class="nav">
<div class="padded">
<ul>
<li class="active"><a id="link1" class="nav-section1" href="#section1">About</a></li>
<li><a id="link2" class="nav-section2" href="#section2">Design</a></li>
<li><a id="link3" class="nav-section3" href="#section3">3D + Animation</a></li>
<li><a id="link5" class="nav-section5" href="#section5">Video Production</a></li>
<li><a id="link6" class="nav-section6" href="#section6">Contact</a></li>
<li class="scrollTop"><span class="entypo-up-open"></span></li>
</ul>
</div>
</nav>
<div class = "accordion">
<article>
<h1 id="section1">About</h1>
<p>Farman Pirzada is this one dude who's pretty awesome and there's a lot you should learn about him because I love him</p>
</p>
</article>
and here's the CSS
#accordion {
padding-left: 100px;
}
http://imgur.com/EaQOT0g
I need to know how to create a navigation bar with Unsemantic framework (or 960gs).
My menu structure is
<div>
<ul>
<li></li>
</ul>
</div>.
I have tried so much, but still can't find out the problem.
EDIT
I use wordpress.So it creates navigation menu. the eventual code rendered in the browser is as follows:
<nav role="navigation" class="clearfix black grid-100 grid-parent mobile-grid-100 mar-top10 mar-bottom10" id="wp_nav_menu_wrapper">
<div class="grid-container">
<div class="menu">
<ul>
<li class="page_item page-item-2">
ُSample Page
</li>
<li class="page_item page-item-5">ُSample Page 2
</li>
</ul>
</div>
</div>
</nav>
While my Wordpress markup is as follows:
<div class='grid-100 height-auto black-gray-bg font-tahoma'>
<nav role='navigation' class='clearfix black grid-100 grid-parent mobile-grid-100 mar-top10 mar-bottom10' id='wp_nav_menu_wrapper'>
<div class='grid-container'>
<?php
wp_nav_menu();
?>
</div>
</nav>
</div>
The grid-container class is for the outer container and the grid-parent class for inner or nested containers. In your code you have this backwards.
The grid-parent class lets you align self-contained grids with normal grid items. The container holds all of the grid items. So the grid-parent is just an indicator that the or whatever will contain further items related to its scale and ordering on the page.
You can use this structure, or similar:
<nav class="grid-container">
<ul class="grid-100 grid-parent">
<li class="grid-25">...</li>
<li class="grid-25">...</li>
<li class="grid-25">...</li>
<li class="grid-25">...</li>
</ul>
</nav>
I'm trying to create a simple thumbnail list, the code is pretty much copied off jqm docs pages. However, when I use the code below the button element of the list isn't anchored to the left of the list item and instead appears centered...Can anyone help me? It's driving me crazy!
I haven't got any styles in other than what is in the jquerymobile default page template
<div id="listDiv" class="ui-content" data-role="main">
<div id="listInformation" data-role="content-primary">
<ul id="swipeMeChildrenList" data-role="listview" class="ui-listview">
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="index.html" class="ui-link-inherit">
<img src="images/album-p.jpg" class="ui-li-thumb">
<p>Ha</p>
</a>
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
</div>
</li>
</ul>
</div>
</div>
What code do you use to generate your list from? A simple list will be specified like this:
<ul data-role="listview">
<li>
<a href="index.html">
<img src="images/album-p.jpg" />Ha
</a>
</li>
</ul>
jQuery Mobile will take care of adding all the necessary classes depending on the platform.
I suggest opening a new document and using the defaults from that page, ie
<ul data-role="listview">
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a></li>
</ul>
Then if that works, piece by piece replace the code with yours until it breaks, that should isolate the issue.