I have a problem with my code....buttons inside ion-content not working. I think it´s because a split-pane but i don´t know. Here you get my code. I refere to the button with "navigate()" click event at the bottom of the code.
<!-- LATERAL MENU -->
<ion-split-pane>
</ion-split-pane>
<!-- HEADER ZONE -->
<ion-header>
</ion-header>
<!-- CONTENT ZONE -->
<ion-card>
<ion-card-content>
<ion-grid>
<ion-row>
<ion-col>
Genera tu código QR
</ion-col>
</ion-row>
<ion-row>
<ion-col class="bold">
¡Canjea tus puntos
</ion-col>
</ion-row>
<ion-row>
<ion-col class="bold">
acumulados!
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
<ion-grid>
<ion-row>
<ion-col>
<ion-icon name="information-circle-outline" class="icon"></ion-icon>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="parraf">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-button expand="block" class="generate" (click)="navigate()">GENERAR MI CÓDIGO</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>```
Related
I am trying to align an image and a text to the right and left of the header, like they were navigation buttons.
This doesn't work as expected even editing the CSS with the ugly !important tag.
Hope you could help me.
I am running Ionic 5.2.7 and using Ionic lab to visualize my app.
<ion-header>
<ion-toolbar color="primary">
<ion-title text-center>
%name%
</ion-title>
<ion-text>
<img src="/assets/star.svg" class="rep-icon" />
<div class="rep">%rep%</div>
</ion-text>
<ion-text>
<img src="/assets/star.svg" class="coins-icon" />
<div class="coins">%$%</div>
</ion-text>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<img src="/assets/shapes.svg" alt="" />
<ion-card-header>
<ion-card-subtitle>hh:mm dd MM</ion-card-subtitle>
<ion-card-title>Title</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
commodo orci in dapibus efficitur. Pellentesque nisi urna, dictum non
rhoncus ac, tempus eu augue...
</p>
</ion-card-content>
</ion-card>
</ion-content>
This is the result.
https://prnt.sc/p547nl
Thanks in advance
I think you should stick with using Ionic's components, you can achieve that by doing something like this
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-button color="light">
<ion-icon name="star"></ion-icon>
Star 2
</ion-button>
</ion-buttons>
<ion-title text-center>{{ name }}</ion-title>
<ion-buttons slot="end">
<ion-button color="light">
<ion-icon name="star"></ion-icon>
Star 2
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
If you want to have a custom icon you can see this link.
Use it like this for your toolbar
<ion-header>
<ion-toolbar>
<ion-text>
<img src="/assets/star.svg" class="rep-icon" />
<div class="rep">%rep%</div>
</ion-text>
<ion-title>
%name%
</ion-title>
<ion-text>
<img src="/assets/star.svg" class="rep-icon" />
<div class="rep">%rep%</div>
</ion-text>
</ion-toolbar>
</ion-header>
I'm using inline TinyMCE inside a bootstrap modal and when opening a drop-down menu item e.g.:"Formats", the items are shown aligned to the top-left corner of the page, instead of appearing where they should.
Any ideas on how to solve this problem?
There's yet another problem with inserting links, when you click on the link menu item, it opens the TinyMCE model but it doesn't let you input anything on the inputs.
Found solution for this last problem with this: tinyMCE in a bootstrap dialog.
Repro on this js fiddle.
tinymce.init({
selector: 'h2.editable',
inline: true,
toolbar: 'undo redo',
menubar: false
});
tinymce.init({
selector: 'div.editable',
inline: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste'
],
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'
]
});
h2.mce-content-body {
font-size: 200%;
padding: 0 25px 0 25px;
margin: 10px 0 10px 0;
}
body {
background: transparent;
}
.content {
overflow: visible;
position: relative;
width: auto;
margin-left: 0;
min-height: auto;
padding: inherit;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.4/tinymce.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="editable">
<h2><img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce#2x.png" alt="TinyMCE Logo" width="110" height="97" style="float: right" />TinyMCE Inline Mode</h2>
<p>
This is an editable div element.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt est ac dolor condimentum vitae laoreet ante accumsan. Nullam tincidunt tincidunt ante tempus commodo. Duis rutrum, magna non lacinia tincidunt, risus lacus tempus ipsum, sit amet
euismod justo metus ut metus. Donec feugiat urna non leo laoreet in tincidunt lectus gravida. Sed semper ante sed dui consectetur eget commodo eros imperdiet. Mauris magna diam, scelerisque at ornare vel, dignissim ac sem. Fusce id congue
lacus. Duis sit amet tellus erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus mattis facilisis pretium. In in nibh eu urna ornare semper. Sed imperdiet felis vitae nibh sagittis eu pulvinar
metus facilisis. Sed dolor orci, aliquet sagittis auctor id, faucibus at justo.
</p>
<p>
Vestibulum vestibulum velit nec magna lobortis elementum. Ut egestas ultrices tincidunt. Sed vestibulum mi vitae dui interdum eget rhoncus neque faucibus. Ut nec leo tellus. Nunc in metus sit amet purus bibendum dignissim pulvinar quis erat. Quisque vel
ultricies nisi. Vestibulum eu ante risus. In ultrices dignissim massa, vel luctus dui consequat quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
It seems to be a problem with tabindex="-1" attribute on the modal. If you remove it, it will work like expected.
tinymce.init({
selector: 'h2.editable',
inline: true,
toolbar: 'undo redo',
menubar: false
});
tinymce.init({
selector: 'div.editable',
inline: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste'
],
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'
]
});
h2.mce-content-body {
font-size: 200%;
padding: 0 25px 0 25px;
margin: 10px 0 10px 0;
}
body {
background: transparent;
}
.content {
overflow: visible;
position: relative;
width: auto;
margin-left: 0;
min-height: auto;
padding: inherit;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.4/tinymce.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="editable">
<h2><img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce#2x.png" alt="TinyMCE Logo" width="110" height="97" style="float: right" />TinyMCE Inline Mode</h2>
<p>
This is an editable div element.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt est ac dolor condimentum vitae laoreet ante accumsan. Nullam tincidunt tincidunt ante tempus commodo. Duis rutrum, magna non lacinia tincidunt, risus lacus tempus ipsum, sit amet
euismod justo metus ut metus. Donec feugiat urna non leo laoreet in tincidunt lectus gravida. Sed semper ante sed dui consectetur eget commodo eros imperdiet. Mauris magna diam, scelerisque at ornare vel, dignissim ac sem. Fusce id congue
lacus. Duis sit amet tellus erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus mattis facilisis pretium. In in nibh eu urna ornare semper. Sed imperdiet felis vitae nibh sagittis eu pulvinar
metus facilisis. Sed dolor orci, aliquet sagittis auctor id, faucibus at justo.
</p>
<p>
Vestibulum vestibulum velit nec magna lobortis elementum. Ut egestas ultrices tincidunt. Sed vestibulum mi vitae dui interdum eget rhoncus neque faucibus. Ut nec leo tellus. Nunc in metus sit amet purus bibendum dignissim pulvinar quis erat. Quisque vel
ultricies nisi. Vestibulum eu ante risus. In ultrices dignissim massa, vel luctus dui consequat quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
I have the following item on a webpage which I'm defining as a Scheme.org Article. The details have been obsfucated, but all of the genuine URLs work.
<div itemscope itemtype="http://schema.org/Article" class="large-6 columns related blog">
<meta itemprop="publisher" content="My Company" />
<meta itemprop="dateModified" content="February 4, 2016" />
<meta itemprop="mainEntityOfPage" content="http://example.co.uk/main-page/" />
<div>
<h2 itemprop="headline" class="stretch_this"><a itemprop="url" href='http://example.co.uk/main-page/'>Article title</a></h2>
<p>Posted by <span itemprop="author">A N Other</span> on <span itemprop="datePublished">February 4, 2016</span></p>
<img itemprop="image" class="post_preview" alt='Article title' class="hide-for-small" src="http://example.co.uk/wp-content/uploads/2016/02/example-image.jpg" />
<p itemprop="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum…</p>
</div>
<a itemprop="url" href="http://example.co.uk/main-page/" class="button readmore">Read More<span class="icon icon-arrow"></span></a>
</div>
When I run this through Google's Structured Data Testing Tool, it gives the following error on image:
The attribute itemtype has an invalid value.
But according to schema.org, image should accept an image object or a URL, and has in other instances, e.g. when defining a Person.
What's up with this?
While a URL is valid according to schema.org, Google will only accept an image object, and the tool you're using to validate your markup is produced by Google.
Try this instead:
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="image" class="post_preview" alt="Article title" class="hide-for-small" src="http://example.co.uk/wp-content/uploads/2016/02/example-image.jpg" />
<meta itemprop="url" content="http://example.co.uk/wp-content/uploads/2016/02/example-image.jpg">
<meta itemprop="width" content="800">
<meta itemprop="height" content="800">
</div>
Don't forget to specify you own width and height. You need to have the full specifications. Going according schema.org while ignoring googles directives on the subject will make mistakes like that happen. Plus they may change those whenever they want.
It looks like you will have to provide them with more information on your snippet than you used to before.
For more you can always check https://developers.google.com/structured-data/rich-snippets/articles?hl=en
And at the same time i can find a mistake on you the publisher tag.
Try changing the meta tag for the publisher to this :
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img src="http://example.co.uk/logo.jpg"/>
<meta itemprop="url" content="http://example.co.uk/logo.jpg">
<meta itemprop="width" content="600">
<meta itemprop="height" content="60">
</div>
<meta itemprop="name" content="Company">
</div>
So at the end what you would like to have as a final result is the microdata below:
<div itemscope itemtype="http://schema.org/Article" class="large-6 columns related blog">
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img src="http://example.co.uk/logo.jpg"/>
<meta itemprop="url" content="http://example.co.uk/logo.jpg">
<meta itemprop="width" content="600">
<meta itemprop="height" content="60">
</div>
<meta itemprop="name" content="Company">
</div>
<meta itemprop="dateModified" content="February 4, 2016" />
<meta itemprop="mainEntityOfPage" content="http://example.co.uk/main-page/" />
<h2 itemprop="headline" class="stretch_this"><a itemprop="url" href='http://example.co.uk/main-page/'>Article title</a></h2>
<p>Posted by <span itemprop="author">A N Other</span> on <span itemprop="datePublished">February 4, 2016</span></p>
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="image" class="post_preview" alt="Article title" class="hide-for-small" src="http://example.co.uk/wp-content/uploads/2016/02/example-image.jpg" />
<meta itemprop="url" content="http://example.co.uk/wp-content/uploads/2016/02/example-image.jpg">
<meta itemprop="width" content="800">
<meta itemprop="height" content="800">
</div>
<p itemprop="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum…</p>
<a itemprop="url" href="http://example.co.uk/main-page/" class="button readmore">Read More<span class="icon icon-arrow"></span></a>
</div>
I am doing my first Meteor application and facing some issues in navigation using the iron router. Everytime, I click the Signin button from the signing template, it doesn't redirect me to home page template. The browser shows a url with a question mark in it after signing button is clicked(http://localhost:3000/?). The weird thing is that after I click the back button in browser, it takes me to home page with URL:http://localhost:3000/home. I am not able to understand why this is happening. Please help me to find what I am doing wrong.
In the router.js file, I have written:
Router.configure({
layoutTemplate: 'layout',
});
Router.map(function() {
this.route('/home',function()
{
this.render('home');
});
this.route('/',function()
{
this.render('signin');
});
});
The layout file looks like this:
<template name="layout">
<div>
{{>header}}
</div>
<div>
{{>yield}}
</div>
<div>
{{>footer}}
</div>
</template>
SignIn template file looks like this:
<template name="signin">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<div class="account-wall">
<h1 class="text-center login-title">Sign in to continue</h1>
<form class="form-signin">
<input type="text" class="form-control" placeholder="Email" required autofocus>
<input type="password" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">
Sign in</button>
<label class="checkbox pull-left">
<input type="checkbox" value="remember-me">
Remember me
</label>
Need help? <span class="clearfix"></span>
</form>
</div>
Create an account
</div>
</div>
</div>
</template>
Home template looks like:
<template name="home">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</template>
The code for Signin.js file is as follow:
if (Meteor.isClient)
{
console.log("Sign In JS");
Template.signin.helpers({
});
Template.signin.events({
'submit': function(event, template) {
// alert("My button was clicked!");
Router.go('home');
}
});
}
I your case you have to use the path
Router.go("/home")
I'm trying to get the BS sticker footer as in this example http://twitter.github.com/bootstrap/examples/sticky-footer.html
I added the css and html to my gwt Uibinder xml file but it seems the wrap css selector has no effect. I’m not sure if this is b/c i need to redefine the css elements that will be included under 'wrap' div. I'm not sure why the BS sticker footer in GWT doesn't work . do you have a GWT uibinder example of a BS sticker footer?
---UPDATE---
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style >
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -30px;
}
#footer {
min-height: 40px;
/* padding-left:250px;*/
background-color: #f2f2f2;
}
/* Set the fixed height of the footer here */
#push, #footer {
height: 30px;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container2 {
width: auto;
max-width: 680px;
}
.credit {
margin-left: auto;
margin-right: auto;
width:580px;
}
#main
{
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
</ui:style>
<g:HTMLPanel >
<!-- Part 1: Wrap all page content here -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">GND</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Search</li>
<li>Maintain</li>
<li>Add Data</li>
<li class="dropdown">
<!-- Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul> -->
</li>
</ul>
<!-- <form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email"></input>
<input class="span2" type="password" placeholder="Password"></input>
<button type="submit" class="btn">Sign in</button>
</form> -->
<form class="navbar-search pull-right">
<input type="text" class="search-query" placeholder="Search"></input>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div id="wrap">
<div id="main" class="container clear-top">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="row">
<div class="span12">
<p> </p>
</div>
</div>
<div class="well well-small">
<h2 align="center">Welcome To The Geospatial Network Database!</h2>
<p align="center">This is a demo for gwt and Bootsrap library integration</p>
<!-- <p><a class="btn btn-primary btn-large">Learn more »</a></p> -->
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span3">
<h2>How It works</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" data-content="And here's some amazing content. It's very engaging. right?" rel="popover" href="#" data-original-title="A Title" >View details »</a></p>
</div>
<div class="span3">
<h2>Who It Is For</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span3">
<h2>Get Support</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span3">
<h2>Find Out More</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
<div class="row">
<div class="span6">
<div class="well">
<ul class="nav nav-list" ui:field="recentDocumentList">
<li class="nav-header">What's New</li>
<!-- <li class="active" ui:field='moreItem'></li> -->
<!--
<li>Document2</li>
<li>Document3</li>
<li>Document4</li>
<li>Document5</li>
<li>Document6</li> -->
</ul>
</div>
</div>
<div class="span6">
<div class="well">
<h2>Section</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<!-- <p> </p> -->
<!-- <br></br> -->
<p>
<!-- <a class="btn btn-primary" id="myButton" data-content="And here's some amazing content. It's very engaging. right?" rel="popover" href="#" data-original-title="A Title">Click to toggle popover</a> </p> -->
<g:Button styleName="btn btn-primary" ui:field="myButton">Click to toggle popover »</g:Button> </p>
</div>
</div>
</div>
</div> <!-- /container -->
<div id="push"></div>
</div>
<footer>
<p align="center" >© 2012 Ian Mayo and othman El Moulat.</p>
</footer>
</g:HTMLPanel>
</ui:UiBinder>