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.
Related
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 ...
I would like to place Have an account?, Login button, and Link A Link B directly underneath something something something something, Enter Zip Code input field and Enter Zip Code button.
The way I've set up my Bootstrap (version 3.3.7) and HTML, I'd think that it would've appeared underneath but it's actually displaying the complete opposite of what I expect. Instead, it's all the way on the left side as per the picture below.
Why's is carrying out this behavior? If more information is needed please let me know.
picture of what I'm describing
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="col-7">
<form class="pull-right col-12 zipSection">
<h6 class="pull-right">something something something something</h6>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Zip Code">
</div>
<button type="submit" class="btn btn-default center-block enterZipCodeButton">Enter Zip Code</button>
</form>
<div class="col-12">
<p class="col-12">Have an account?</p>
<button type="submit" class="loginButton" onclick="document.location = '/'">Login</button>
Link A
Link B
</div>
</div>
</div>
Your form has a class called pull-right (which has been renamed to float-right in Bootstrap 4). What that does is forces the div to the far right. Since this is bootstrap, everything else adapts, which means the div which theoretically should be under, gets forced up to the top row, and to the left (since left-alignment is the default). A solution to that is to use the class of row from the Bootstrap grid system. Every row you want, you make a new div with a class of row. This way, they will now be under each other.
However, the Have an account? would still be on the left. To fix that, give it a class of pull-right.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-7">
<form class="pull-right col-12 zipSection">
<h6 class="pull-right">something something something something</h6>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Zip Code">
</div>
<button type="submit" class="btn btn-default center-block enterZipCodeButton">Enter Zip Code</button>
</form>
</div>
</div>
<div class="row">
<div class="col-12 pull-right">
<p class="col-12">Have an account?</p>
<button type="submit" class="loginButton" onclick="document.location = '/'">Login</button>
Link A
Link B
</div>
</div>
</div>
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.
My Grails (2.4.2) app has a simple form on one of its GSPs, that uses Bootstrap for styling:
<!DOCTYPE html>
<html>
<head>
<!-- Head omitted for brevity. -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 text-center">
<h1 class="strong-primary">Sign in to continue to MyApp.</h1>
</div>
<div class="col-md-4 text-center">
<form role="form">
<div class="form-group">
<input type="email" class="form-control" id="signin-email" placeholder="Your email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="signin-password" placeholder="Password">
</div>
<button type="submit" class="btn form-control btn-lg btn-success">Sign in</button>
<div class="form-group" style="text-align: left;">Need help?</div>
</form>
</div>
</div>
</div>
</body>
</html>
When the user clicks the "Sign in" button, the FizzController#signin() action should be executed. I am tempted to change the GSP form to something like:
<g:form controller="fizz" action="signin">
<div class="form-group">
<input type="email" class="form-control" id="signin-email" placeholder="Your email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="signin-password" placeholder="Password">
</div>
<g:submitButton name="submit" value="Sign in" />
<div class="form-group" style="text-align: left;">Need help?</div>
</g:form>
But then I lose the form role="form" declaration and the styling (btn form-control btn-lg btn-success) classes on the button.
How can I merge <g:form> and <g:submitButton> with my Bootstrap stylings?
There is nothing keeping you from adding additional attributes and values to the output from the standard <g:> tag library.
For example:
<g:form controller="fizz" action="signin" role="form" class="someClass">
The above will include the two additional attributes role and class as they appear. This holds true for almost all (if not all) of the standard tags in Grails.
If you want to look and see how this is actually implemented in the outputAttributes, you can review the source code for the built in forms tag library.
Applying styles to a dynamically generated page can be difficult coming from styling static HTML pages. A problem I ran into was correctly applying styles to my rendered templates in Grails. If your project uses a rendered template to display a form remember to apply the Bootstrap .form class to the parent view's <g:form> tag as noted in #Joshua Moore's answer.
Styles would look similar to:
<g:form id='myId' class='form-horizontal'>
<g:render template='myFormTemplate' model='yourModelInformationHere'/>
</g:form>
Done this way, the .form-group class can be used on the underlying template and since the .form-horizontal class is declared already the rendered page will be correct.
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.