I was trying to create a login form inside a modal like shown here (https://codepen.io/skcals/pen/bxdpaN).
However when I put this same code on my own website here is how it renders :
Has some one ever met the same issue ? And knows how to solve it ?
This is my html head were materialize css is included :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type = "text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.js"></script>
And this is the code of my login form
<div id="login-modal" class="modal">
<h5 class="modal-close" style="color:black;">✕</h5>
<div class="modal-content center">
<h4>Se connecter</h4>
<br>
<form action="#">
<div class="input-field">
<i class="material-icons prefix">person</i>
<input type="text" id="name">
<label for="name">Username</label>
</div>
<br>
<div class="input-field">
<i class="material-icons prefix">lock</i>
<input type="password" id="pass">
<label for="pass">Password</label>
</div>
<br>
<div class="left" style="margin-left:20px;">
<input type="checkbox" id="check">
<label for="check">Remember Me</label>
</div>
<br>
<input type="submit" value="Login" class="btn btn-large login-btn">
</form>
</div>
</div>
I used your code in my project and it worked fine!
The only thing I can think off is using the newest version of JQuery:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
In the meantime, I've solved my own issue by moving the login div somewhere else. Previously it was inside my navbar menu and I think that is was causing the display issue.
There is just one last thing, the remember me check box doesn't show up ...
Related
Recaptcha not rendering until I refresh the page
I'm using Recaptcha in my angular js project for security stuff.
I just implemented the captcha with following below steps:
1. I added below link to my page (in the head tag before every styles and scripts file):
<script src="https://www.google.com/recaptcha/api.js?hl=fa" async ></script>
2. In my form, I added captcha
<div class="g-recaptcha" data-sitekey="my_site_key"></div>
so my page is something like this
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/api.js?hl=fa" async ></script>
</head>
<body>
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="my_site_key"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
Apparently, everything is fine, but Recaptcha not rendering until I refresh the page. actually, it's not gonna work when the page request by ajax but after page reloading, Recaptcha will render on the page!
So how can I render Recaptcha with the first render??
I figure out how can I fix this problem.
instead of adding this script
<script src="https://www.google.com/recaptcha/api.js?hl=fa" async ></script>
to layout page, I added it in every page that I want to render captcha so after routing to the special page, in addition, to render the page content captcha will render for us too.
for exmaple the content page template will be something like this:
contactus.html content
<script src="https://www.google.com/recaptcha/api.js?hl=fa" async></script>
<form name="contactUsForm" novalidate>
<section class="well">
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group has-feedback" ng-class="{'has-error': contactUsForm.firstName.$error.required && contactUsForm.firstName.$dirty, 'has-success': !contactUsForm.firstName.$error.required }">
<label class="control-label col-sm-4" for="firstName">Name</label>
<div class="col-sm-8 col-md-6">
<input type="text" id="firstName" name="firstName" ng-model="contactUs.firstName" class="form-control" ng-class="{'form-control-error': contactUsForm.firstName.$error.required && contactUsForm.firstName.$dirty, 'form-control-success': !contactUsForm.firstName.$error.required }" placeholder="Name" required />
<span ng-show="contactUsForm.firstName.$error.required && contactUsForm.firstName.$dirty" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span ng-show="!contactUsForm.firstName.$error.required" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<div class="text-danger" ng-show="contactUsForm.firstName.$error.required && contactUsForm.firstName.$dirty">Name is required</div>
</div>
</div>
<div class="form-horizontal form-widgets col-sm-12 col-sm-offset-2" style="display: flex;justify-content: flex-start;margin-bottom: 2rem;">
<div class="g-recaptcha" data-sitekey="my-sitekey"></div> <!-- Server -->
<!--<div class="g-recaptcha" data-sitekey="my-sitekey"></div>--> <!-- Local -->
</div>
<div class="buttons-wrap col-sm-offset-2" style="text-align:right;padding-right:1.6rem">
<button class="btn btn-primary" ng-disabled="contactUsForm.$invalid" data-toggle="modal" data-target="#confirmModal"><i class="glyphicon glyphicon-save"></i><span>&submit</span></button>
</div>
</section>
</form>
I will like to put an image beside and input field using bootstrap. i want my output to be like :`
but with the below code i get
<div class="form-group row">
<label for="inputTitle" class="col-sm-2 col-form-label">Title</label>
<div class="col-sm-10">
<span class="glyphicon glyphicon-phone"></span>
<input type="title" class="form-control" id="inputTitle" >
</div>
</div>
The form-control class will make your input 100% wide, meaning it will flow onto the next line. Additionally, it will make it display as a block element.
If I were you, I would look at using input groups instead, this is a nice tidy way of achieving the same effect:
Also, you have given your text input a type of title which is not valid. It's likely just a text input.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-phone"></span></span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
I think this should do it
<div class="form-group">
<label class="control-label">Title</label>
<div class="input-group"><span class="input-group-addon"></span>
<input type="text" class="form-control">
</div>
</div>
I'm using bootstrap 3 along with angularjs (with angular for bootstrap) for an html5 application running on google apps script.
I expected Bootstrap to be responsive by default, but for my surprise a very simple form is remaining small on my mobile device. Text, buttons and input fields are so small that they are almost unusable. I'm writting some CSS rules for mobile screens, but I'm not sure if I should. Maybe I'm doing something wrong?
Here is the form. I have removed some extra stuff to make it simple, but bootstrap makes any single form a big monster:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
<!-- BOOTSTRAP CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<base target="_top">
<?!= include('css'); ?>
</head>
<body ng-app='Gestor'>
<div class="container-fluid" ng-controller="ExampleController">
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-md-8 col-lg-4">
<fieldset class="form-group">
<label for="Concepto" class="col-md-4">Concepto:</label>
<div class="col-md-8 text-left"><input type="text" ng-model="data.concepto" class="form-control"></div>
</fieldset>
</div>
<div class="col-md-6 col-lg-4">
<fieldset class="form-group">
<label class="col-md-4" for="pvp" >Precio:</label>
<div class="col-md-8">
<div class="input-group">
<a class="input-group-addon btn btn-default" role="button" ng-click="increase('pvp',-5)">-5</a>
<input type="number" ng-model="data.pvp" class="form-control">
<div class="input-group-addon">€</div>
<a class="input-group-addon btn btn-default" role="button" ng-click="increase('pvp',5)">+5</a>
</div>
</div>
<label class="col-md-4 " for="cantidad">Cantidad:</label>
<div class="col-md-8">
<div class="input-group">
<a class="input-group-addon btn btn-default" role="button" ng-click="increase('cantidad',-5)">-5</a>
<input type="number" ng-model="data.cantidad" class="form-control">
<a class="input-group-addon btn btn-default" role="button" ng-click="increase('cantidad',5)">+5</a>
</div>
</div>
</fieldset>
</div>
<div class="col-md-6 col-lg-4">
<fieldset class="form-group">
<label class="col-md-4" for="Category">Categoría:</label>
<div class="col-md-8">
<select ng-model="data.category" class="form-control form-control-lg" ng-options="option for option in formValues.availableOptions" ></select>
</div>
<label class="col-md-4" for="Fecha">Fecha:</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="data.fecha" is-open="datepicker.opened" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"> </i></button></span>
</div>
</div>
</fieldset>
</div>
<div class="col-md-12">
<fieldset class="form-group">
<button ng-click="formValues.submitStatus ===0 ? submit() : reset()" class="btn" ng-class="{'btn-primary':(formValues.submitStatus===0),'btn-success':(formValues.submitStatus===1),'btn-danger':(formValues.submitStatus<0)}" type="submit">{{formValues.submitStatus===0 ? 'Register' : 'Reset'}}</button>
</fieldset>
</div>
</div>
</form>
</div>
<!-- MAIN APP CODE -->
<?!= include('app.js'); ?>
</body>
</html>
EDIT:
Here is an image that shows what I want to achieve. As you can see, input and label elements are quite big, but that is because the custom CSS styles that I made. I expected this to be automatic on Bootstrap. If you take a look at the bottom, you can see a very small button, that is how the entire form is displayed without my custom styles.
[.. Removed image ..]
EDIT2:
Here is another screenshot added. This time is a much simpler form, which was directly taken from here:
http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=vertical-form-layout
As you can see, it looks awful
EDIT3:
I have added the tag google apps script, because it should be a problem with how google apps scripts serves the webpage on the Iframe. I have updated the plunk provided by #Satej to make it work properly with angular, but it works exactly as I expected:
http://plnkr.co/edit/Ze4DEQDxr3Hd8SVtdifZ?p=preview
I have opened the plunker on my mobile device, and it works flawlessly, no issues so far as you can see on the following screenshot:
So the question is, what does google apps script when it serves the HTML file to make it display so small?
Finally I got the solution.
The problem was the view-port meta tag. It was being removed by CAJA, or whatever sanitization is applied to IFRAME mode.
There was a bug about this, where people pointed this exact problem:
https://code.google.com/p/google-apps-script-issues/issues/detail?id=4659
And on that same thread, someone linked to a solution:
https://plus.google.com/+MarcoColomboMow/posts/GXgRCh98HTu
Finally, it was just a matter of adding the following to the html template when serving it (on the doGet function)
return t.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).addMetaTag('viewport', 'width=device-width, initial-scale=1');
You are doing something wrong.
You have to explicity state the styling for small and extra small screens if you want them to take a particular column size.
This is done by using the col-sm-* and col-xs-* classes.
I suppose it's wrong to nest a col-md-x immediately inside a col-md-x in Bootstrap 3. Am I right?
I have following at the moment:
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
<input class="col-md-4" value="something" />
<div class="col-md-8">Something here</div>
</div>
In this case, the input border starts at the very beginning of the row. It doesn't have any padding on the outside of it.
I would like the input to show 15px away from the row border. The way I know of how to achieve this is to put this input inside a col-md-x. However, could this cause any issues?
From the bootstrap docs:
To nest your content with the default grid, add a new .row and set of
.col-sm-* columns within an existing .col-sm-* column.
So as long as you are nesting within child rows, you are gonna be fine. Another option would be custom css rules and ids for your nested structure to achieve the desired padding or margin.
UPDATE
To refer to your comment, since this is about validation states: let me add that bootstrap already offers great validation-highlighting. See this quick sample. The bootstrap docs on forms offer great documentation on this topic. As for the padding: I like to put most of my "not-inline" forms into a .well, which shows the user, where action is required and allows a consistent styling of forms...
var resetSec = function(){
$('#sth-form-section').removeClass('has-error');
$('#sth-form-section').removeClass('has-warning');
$('#sth-form-section').removeClass('has-success');
$('#helpBlock-sth').addClass('sr-only');
$('#helpBlock-sth').html('');
};
$('#invalid').click(function(){
resetSec();
$('#sth-form-section').addClass('has-error');
$('#helpBlock-sth').removeClass('sr-only');
$('#helpBlock-sth').html('Oh snap! Better think about this one more time!');
});
$('#valid').click(function(){
resetSec();
$('#sth-form-section').addClass('has-success');
$('#helpBlock-sth').removeClass('sr-only');
$('#helpBlock-sth').html('Well done! I think your input was the best so far!');
});
$('#reset').click(function(){
resetSec();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well">
<form class="form-horizontal" role="form">
<div id="sth-form-section" class="form-group">
<label for="something" class="col-lg-2 control-label">Something:</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="something" placeholder="Something here">
<span id="helpBlock-sth" class="help-block sr-only"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
<button class="btn btn-primary" id="reset">Reset</button>
<button class="btn btn-danger" id="invalid">Invalid</button>
<button class="btn btn-success" id="valid">Valid</button>
Ah, just write the markup a little differently, like so:
<div class="row">
<div class="col-md-4">
<input class="form-control" value="something" />
</div>
<div class="col-md-8">
<p class="form-control-static">Something here</p>
</div>
</div>
The problem was putting the col-md-4 class on the input.
I have a form with some inputs and I can't figure out how to put these inputs inline with Twitter Bootstrap. I am new to Twitter Bootstrap.
Here is my code:
<div class="control-group">
<div class="controls">
<div class="input-prepend">
<span class="add-on"> <i class="icon-lock"></i>
</span>
<input path="q1" class='input-xlarge' type='text' value='Name of my father'readonly="yes"/>
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="input-prepend">
<span class="add-on"> <i class="icon-lock"></i>
</span>
<input path="r1" class='input-xlarge' type='text' value='' autofocus="autofocus" />
</div>
</div>
</div>
Here is a jsFiddle with my code to well understand my problem: http://jsfiddle.net/XHPMH/1/
Using inline-style attribute I have the result I'm expecting, but I would like to use as many as possible Twitter Bootstrap : http://jsfiddle.net/5Z3rP/
Edit: I'm performing client side validation with jQuery-validation, so I think I have to keep control-group css class
Look at the "Inline Form" section here: http://getbootstrap.com/2.3.2/base-css.html#forms
<form:form class="form-horizontal form-validate form-inline" method="POST" acceptCharset="UTF-8">
http://jsfiddle.net/5Z3rP/1/
I also removed the ".controls" div, which was unnecessary and preventing the inline style.