I'm compiling Ember templates into a JS source file, which loads properly when loaded as an external source in the HTML.
However, when I inline the same source file into the HTML (which is required for the current project), I get the following error on the browser console:
Uncaught Error: Assertion Failed: An error occured while setting up template bindings. Please check "index" template for invalid markup or bindings within HTML comments.
The code of the template that is failing is the following:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="inner-nav">
<a class="navbar-brand" rel="home">
<img src="img/logo.png">
</a>
</div>
</nav>
<main class="login">
<div class="background-image">
<div class="color-overlay"></div>
</div>
<div class="container">
<aside>
<h4>Title</h4>
<p>Intro text, lorem ipsum, lahlahlah, etc.</ p>
</aside>
<article>
<div class="panel panel-default">
<div class="panel-heading">Sign in</div>
<div class="panel-body">
<form role="form" {{action "login" on="submit"}}>
<div class="form-group">
<label for="email">Email address</label>
{{input placeholder="Your email" id="email" class="form-control" value=username}}
</div>
<div class="form-group">
<label for="password">Password</label>
{{input type="password" placeholder="Your password" id="password" class="form-control" value=password}}
</div>
<label class='button-label'><a>Forgot password?</a></label>
<button type="submit" class="btn btn-primary pull-right">Sign in</button>
</form>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<label class='button-label'>New user?</label>
<button type="submit" class="btn btn-default pull-right">Sign up</button>
</div>
</div>
</article>
</div>
</main>
Any ideas?
Try using the classNames attribute in your input helper instead of class and see if that helps.
Related
I am trying to build an web app using apps script it was working well till yesterday but I don't know why my password recovery pages not rendering right. the image URL path getting mess, including googlescriptappconsle link automatically.
I am getting this error:
I tried to debug and checked the script a lot but not found any error in that. don't know why this msg is showing and how to fix this.
forget Password? link at login.
Forget Password
JavaScript.
function recoveryScreen() {
return document.getElementById('root').innerHTML = `
<div class="container">
<div class="row">
<div class="col d-flex justify-content-center">
<img src="https://img.freepik.com/free-vector/authentication-concept-illustration_114360-1640.jpg?t=st=1650012022~exp=1650012622~hmac=0b7d5c7400d49f971b6c626c09516602556c052642171457305bfaf5c17e2461&w=740" alt="">
</div>
</div>
</div>
<div class="container">
<div class="row d-flex justify-content-center">
<div class="col-lg-6 d-flex flex-column justify-content-center align-item-center recoveryInput">
<p class="text-center hide">For update your password please provide your email address here.</p>
<input type="text" placeholder="Email Address" id="email" class="hide">
<button type="button" onclick="sendRecoveryLink()" class="hide">Get OTP</button>
<button type="button" onclick="showLogin()" class="mt-2 hide" style="background-color:black;">Back</button>
<p class="pt-4 text-center show" id="msgpara" style="color:red; display: none;">We have sent you an OTP on your mail for update password.</p>
<input type="text" placeholder="Enter OTP" id="otp" class="show" style="display: none;">
<input type="text" placeholder="New Password" id="newpswd" class="show" style="display: none;">
<input type="password" placeholder="Confirm Password" id="confirmpswd" class="show" style="display: none;">
<button type="button" id="update" class="show" style="display: none;">Update</button>
</div>
</div>
</div>
</div>`
}
HTML.
<div class="container-fluid">
<div id="root"></div>
I can't get my content to fit in my slideout footer. I'm not sure why this is happening. I'm not sure if I have to add it to the JavaScript.
I added the #slideFootercontent to the beginning to everything that I want in the footer, and it's still not working. To be clear, I want the content to slideout with the slideout footer.
I created a codepen.io
<footer>
<div class="navbar-fixed-bottom">
<div id="footerSlideContainer">
<div id="footerSlideButton"></div>
<div id="footerSlideContent" class="container ">
<div class="row">
<div class="container">
<div class="row">
<br>
<hr>
<div class="col-lg-4">
<h3>Latest Tweets
</h3>
<div id="example1"></div>
<h4>Watch me on Periscope</h4>
#Erica2385
</div>
<!-- col -->
<div class="col-lg-4 border">
</div>
<!-- col -->
<div class="col-lg-4">
<h3> Subscribe
</h3>
<p>Subscribe for the latest newsletters and updates</p>
<div id="mc_embed_signup" class="mailchimp">
<form action="..." method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate form-inline" target="_blank" novalidate>
<div class="form-group">
<input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL" placeholder="Enter email">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn__bottom--border mailchimp__btn" data-style="shrink" data-horizontal>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div class="" style="position: absolute; left: -5000px;"><input type="text" name="..." value=""></div>
</form>
<span class="form_nospam">No spam</span>
</div>
<!--End mc_embed_signup-->
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
<hr class="container">
<div class="container">
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-soundcloud fa-2x"></i>
<div class="pull-right">
<iframe width="100" height="20" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/231337268&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
The problem is that you are styling #footerSlideContainer and #footerSlideContent with position:fixed (that prevents the content from being hidden).
Move the button (#footerSlideButton) outside of #footerSlideContainer, so it shows while that container is hidden and then style the rest appropriately. Check your modified codepen
Note that I changed a few things here and there as you had bad selectors that made some rules useless and also values that created problems.
I have been tasked at making notification toggles be accessible via tab for accessibility purposes. Googling this has ended in utter failure. How can I accomplish this?
HTML:
<!-- Settings - Notifications -->
<div class="panel-body account-settings" ng-show="item == 3" ng-controller="noteSettingsController as note">
<div class="row">
<h4 class="text-center">Email</h4>
<form class="form-horizontal">
<div class="form-group" ng-repeat="(key, alert) in defs.email">
<div class="row">
<label for="emailCritNotes" class="col-sm-2 control-label">{{alert.name}}</label>
<div class="col-sm-8">
{{alert.desc}}
</div>
<div class="col-sm-2">
<i class="fa" ng-click="toggleEmail(key)" ng-class="{'fa-toggle-on': alert.status, 'fa-toggle-off': !alert.status}"></i>
</div>
</div>
</div>
</form>
</div>
I'm using Bootstrap: Dropdown on Hover Plugin ( https://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/ ) and it works perfectly. The problem is that I don't only have common sub-menus with just links. In a sub-menu I have a big login form where the user has to click some input boxes. My problem is that my menu closes when I click anywhere inside that, even inside a form element. I know it's supposed to do that (or at least it's ok) when there are only links to click on but in my case I need to actually do more than one stuff in there.
Here's part my menu (with the login form):
<li class="dropdown pull loginbox">
LOGIN</i>
<div class="dropdown-menu">
<section id="signin_alt" class="authenty signin-alt">
<div class="section-content">
<div class="wrap">
<div class="container">
<div class="row" data-animation="fadeInUp">
<div class="col-md-4 col-md-offset-1">
<div class="normal-signin">
<div class="title">
<h2>Sign In</h2>
</div>
<div class="form-main">
<div class="form-group">
<div class="un-wrap">
<i class="fa fa-user"></i>
<input type="text" class="form-control" placeholder="Username" required="required">
</div>
<div class="pw-wrap">
<i class="fa fa-lock"></i>
<input type="password" class="form-control" placeholder="Password" required="required">
</div>
<div class="row">
<div class="col-md-6">
<input type="checkbox" class="form-control" checked>
<label>Remember me</label>
</div>
</div>
<div class="row top-buffer">
<div class="col-md-4 col-md-offset-8">
<button type="submit" class="btn">Sign In</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 hidden-xs">
<div class="horizontal-divider"></div>
</div>
<div class="col-md-4">
<div class="sns-signin">
<i class="fa fa-facebook"></i><span>Sign in with Facebook</span>
<i class="fa fa-google-plus"></i><span>Sign in with Google+</span>
</div>
</div>
<div class="col-md-1"></div>
</div>
<div class="row top-buffer bottom-wrap">
<div class="col-xs-6 col-md-2 col-md-offset-1">
Forgot your password?
</div>
<div class="col-xs-6 col-md-2">
Create an account
</div>
</div>
</div>
</div>
</div>
</section>
</div>
All the tags to make the jQuery work are in line 2 and it works! I just need it to not close the sub-menu when the mouse in over it, even if it's clicking like crazy. Any ideas?
Thanks!
You can do that by using a click event on the element you want and then stopping the Propagation inside the click event.
For Example:-
$("#some_id").click(function(e){
e.stopPropagation();
});
The Div, in which you have your form having following code which may closing your div. Also all of this code should be in li tag followed by ul wnder which you should keep your form.
<div class="row" data-animation="fadeInUp">
I want to have a form for each tab, but the form fields are completely misaligned:
http://jsfiddle.net/r2guf086/
As far as I can tell, I'm following Bootstrap's example code quite closely. What is wrong here?
My code:
<h2 id="ingredients"><strong>Ingredients</strong></h2>
<hr />
<div class="row">
<!-- Nav tabs -->
<div class="col-xs-12">
<ul class="nav nav-tabs" role="tablist">
<li class="active">#1</li>
<li>#2</li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="ingredients-1">
<form class="form-horizontal" action='' method="POST">
<fieldset>
<div class="form-group">
<div class="col-xs-12">
<textarea name="product_ingredients" class="form-control" rows="10">xxx</textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-10">
<button type="submit" class="btn btn-primary" form="update_product_ingredients_form">Save</button>
</div>
</div>
</fieldset>
</form>
</div>
<div class="tab-pane" id="ingredients-2">
<form class="form-horizontal" action='' method="POST">
<fieldset>
<div class="form-group">
<div class="col-xs-12">
<textarea name="product_ingredients" class="form-control" rows="10">yyy</textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-10">
<button type="submit" class="btn btn-primary" form="update_product_ingredients_form">Save</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
First one has the following CSS link:
<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
Second one has this CSS:
<link class="cssdeck" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
I would not mix and match CDNs for the same library, and only use those which you trust. Change the CSS in the second example to this and it will work
<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
Before: http://jsfiddle.net/awkbmn0L/
After: http://jsfiddle.net/1eznowf7/
(I've never heard of liveweave, and it was doing some weird display things to the code, so I went with jsfiddle for examples)