I've been struggling with customization of the simple form field for image upload (Carrierwave) in my Rails app.
Current design:
Desired result
What I did was to inspect HTML created by simple form helpers:
<%= f.input :photo %>
<%= f.input :photo_cache, as: :hidden %>
add styling, remove unnecessary fields and icons, which resulted in:
<label class="btn file-upload-btn">
<div class="form-group file required event_photo upload-field">
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
Add a photo
<div class="form-control uneditable-input input-name" data-trigger="fileinput">
<i class="fa fa-file fileinput-exists"></i>
<span class="fileinput-filename"></span>
</div>
<div class="input-group-btn" style="display: none;">
<input class="file required file-upload" type="file" name="event[photo]" id="event_photo">
</div>
</div>
</div>
<span style="display:none;">
<%= f.input :photo_cache, as: :hidden %>
</span>
</label>
Button works properly - I can select the picture, name tag shows to chosen img name. However when I try to submit the form it gives an error that image can't be blank.
What am I missing here?
I suggest to use Image upload widget included in Jasny gem : http://www.jasny.net/bootstrap/javascript/
And customize the input, like with user photo :
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span>
<input type="file" name="user[photo]" id="user_photo">
</span>
Remove
</div>
</div>
You'll be free to customize the css to have this like me :
It's working on my project.
Related
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'm working on an ASP site for the company I work at. It's about adding money saving or earning activities to an overview that one of the directors can look at.
Currently though I have some styling issues, using bootstrap here.
I believe I used to have this issue once but how I solved it escapes me. I can't center all the elements and I can't make the input boxes connect with the addons on the right side as is seen in the picture.
<div class="container body-content" style="padding-top: 15px;">
<div class="container" align="center">
<div class="col-lg-8">
<div class="row">
<h2>Abstract</h2>
<div class="form-group">
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">FYE</span>
<select class="form-control required" id="new-activity-fye-dropdown">
<option value="1">On Track</option>
<option value="2">Issue</option>
<option value="3">Behind</option>
</select>
<span class="input-group-addon" data-toggle="tooltip" data-placement="top" title="The Full Year Expectation of the Activity. Usually On Track on creation.">
<b>?</b>
</span>
</div>
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">Activity Name</span>
<input type="text" class="form-control required" id="new-activity-modal-name-field"
aria-describedby="new-activity-modal-name-field" />
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="The Name of the Activity. This name appears in the Activity Overview.">
<b>?</b>
</span>
</div>
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">Responsible</span>
<input type="text" class="form-control required" id="new-activity-modal-responsible-field"
aria-describedby="new-activity-modal-responsible-field" disabled />
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="The responsible person for this activity. This it the go-to person for questions, progress and reports.">
<b>?</b>
</span>
</div>
<!-- TODO: Find an automatic way to make this dropdown -->
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">Department</span>
<select class="form-control required" id="new-activity-modal-department-dropdown">
<!-- Handled in content-controller: CreateNewActivityDepartmentDropdown() -->
</select>
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="The department this activity belongs to.">
<b>?</b>
</span>
</div>
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">Start Time</span>
<input class="form-control" type="text" id="new-activity-modal-datepicker-start" />
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="The start of the activity. Usually today's date.">
<b>?</b>
</span>
</div>
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">End Time</span>
<input class="form-control" type="text" id="new-activity-modal-datepicker-end" />
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="The estimated end of the activity.">
<b>?</b>
</span>
</div>
</div>
</div>
<div class="row">
<h2>Description</h2>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Upload a thorough description explaining the Activity.</span>
</div>
</div>
</div>
<div class="row">
<h2>Estimation</h2>
<div class="form-group">
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">AX Account Number(s)</span>
<input type="text" class="form-control required" id="new-activity-modal-ax-account-numbers-field"
aria-describedby="new-activity-modal-ax-account-numbers-field" />
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="AX Account number associated with the activity.
Multiple accounts can be added separated by commas.">
<b>?</b>
</span>
</div>
<div class="input-group">
<span class="input-group-addon">Upload the estimation calculations for the Activity.</span>
</div>
</div>
</div>
</div>
</div>
</div>
I feel that my HTML is fairly normal but I have a hard time applying styles from CSS files in ASP in the first place.
How would I make the addons on the right side connect with the input fields?
UPDATE
It appears that the problem was inside a default generated file called Site.css. It had the following in it:
input,
select,
textarea {
max-width: 280px;
}
Commenting that out solves the problem.
Since I don't know how exactly ASP's css structure is, here is how i would approach this situation:
use your browser's inspector to check exactly what type of css rule is making the "?" button be all the way to the right, i can only assume it either has a float, or the form has a huge margin on it's right.
once you have found the issue, you could use your browser's inspector further to test out some edits, if it's a margin thing, see how much margin it will actually need, if it's a float issue, see how it will look with float:none
as soon as you've found the solution to the issue, you will need to apply it, to do this add a custom .css file AFTER ASPs css files, this way whatever you write in it will overwrite any existing rules.
add the fixes to this new file and you should be done.
There must be something elsewhere on the page that is breaking the style of the select boxes, because when I view your snippet in codepen, in both Chrome and IE11, the select boxes do stretch to the question mark boxes at the right:
codepen.io/anon/pen/pgVoQg
btw, inline styles should usually be avoided where possible
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.
I am trying to add a ruby block to a span class with in an HTML file.
<%= f.label :email =>
The div & span class are as follows:
<div class="input-prepend">
<span class="add-on">
<i class="icon-envelope"></i>
</span>
<input class="span" id="prependedInput" type="text" placeholder="">
</div>
I have placed the ruby block inside the the input class:
<div class="input-prepend">
<span class="add-on">
<i class="icon-envelope"></i>
</span>
<input class="span <%= f.text_field :email %>" id="prependedInput" type="text" placeholder="">
</div>
I am using Twitter Bootstrap, is this the correct way of placing ruby blocks inside of divs/spans/or input tags?
What I am trying to do is add an icon to an input field. It does work, when I submit the text. It just looks wierd, the code and the actual object.
I suspect this may be what you're after:
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span>
<%= f.text_field :email, :id => "prependedInput" %>
</div>