I copied prepended input from twitter bootstrap examples but it does not work properly. What is the problem?
<div class="input-prepend">
<span class="add-on">#</span>
<input type="text" placeholder="Username" id="prependedInput" class="span2"/>
</div>
http://jsfiddle.net/jGbFt/
You are trying to use code from bootstrap 2.3.2 and linking to the bootstrap 3 css file, you can change your css to link to
//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
and it will work.
Fiddle
Related
Guys I have a very simple but complex problem in the same way.
I'm building my custom wordpress theme, using the MDB framework (Bootstrap material design).
And when I go to implement my form via wordpress cf7, the two styles conflict. Generating a problem that the checkbox is displayed but cannot be used.
I have been around a lot in google but I have not found any resolution.
How can I solve this?
Checkbox in mdb:
<!-- Default checked -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="defaultChecked2" checked>
<label class="custom-control-label" for="defaultChecked2">Default checked</label>
</div>
Checkbox in cf7:
<div class="custom-control custom-checkbox">
<label class="custom-control-label" for="defaultChecked2">Default checked</label>
[checkbox checkbox-887 id:defaultChecked2 class:custom-control-input]
</div>
It would be hard to troubleshoot without a link to the malfunctioning checkbox.
However if I were to take a wild guess you could try this CSS:
input[type="checkbox"] {
-webkit-appearance: checkbox;
}
Add that CSS to your theme's CSS. And if it fails send us a link.
I'm struggling to get simple_form with form-horizontal working after a bundle update: The layout is not horizontal anymore :(
I've read and tried http://www.iconoclastlabs.com/blog/using-twitter-bootstrap-3-with-simple_form and Simple_form class form-horizontal with bootstrap 3 not working in rails 4. The latter claims, that simple_form 3.1.0 is working with bootstrap 3, but here it doesn't :(
The problem might be, that the around the input element is simply missing:
<div class="form-group string required container_code">
<label class="string required col-lg-2 control-label control-label" for="container_code"><abbr title="Benötigt">*</abbr> Nummer</label>
<input class="string required form-control form-control" id="container_code" name="container[code]" type="text" value="1" />
</div>
At least, the example from here looks quite different: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php
These are the gem versions that I'm currently using:
twitter-bootstrap-rails (3.2.1 cd805c7)
simple_form (3.1.0)
rails (4.0.0)
As I'm quite a rails rookie, I was hoping that bootstrap and simpleform can help me to avoid such problems, so I really hope you can help me...
Thanks,
Markus
You may want to try as the outer div:
<div class="form-inline">
Your form code here
</div>
i am using typeahead using twitter bootstrap and angularjs .its showing autocomplete suggestions as shown in below screenshot.but i want to show big cities name in different lines.for example London Borough of Harrow in two lines using twitter bootstrap typehead .How to acheive that ??any help is appreciable i am using http://angular-ui.github.io/bootstrap/ .
Just put a <br> tag where you want the line to break.
you can have template for this
<input id="id" type="text" name="name" ng-model="binding" typeahead-min-length="0" uib-typeahead="x as x.name for xyz in alphabet" typeahead-popup-template-url="url/to/template" typeahead-editable="false" autocomplete="off" typeahead-on-select="yourMethodCall()" ng-change="yourMethodCall()">
in your template file i.e. some_template.html
<div class="design class" aria-hidden="{{!isOpen()}}">
<div class="container" ng-repeat="match in matches">
<div> your design here... </div>
</div>
</div>
and boom you are done
One of my web designer given template for making bootstrap switch.I compiled it and rendered on top of page.it's displaying checkbox.
template Code:
<script id="switchTemp" type="text/x-handlebars-template">
<div class="span16 mr1 headerToggleDiv" style="height:42px;">
<div class="switch switch-square pull-right" data-off-label="1" data-on-label="2"><input type="checkbox" id="switchBox"/></div>
</div>
</script>
using this, I tried in the following way.
$('#switchBox').wrap('<div class="switch switch-square pull-right has-switch" />').parent().bootstrapSwitch();
getting small with default names(on,off),like in the following way.
I want in the following way.
I want 1,2 instead of on,off as a labels.
can anyone help me.
Thanks
Please remove the script tag and use the below code to get 1 and 2 for On and Off.
<div class="make-switch pull-right" data-on-label="1" data-off-label="2">
<input type="checkbox" id="switchBox"/>
</div>
You can use this plugin for your work:
http://www.bootstrap-switch.org/
i'm currently working with Twitter Bootstrap creating forms.
For styling an file input i'm using input-append:
<div class="input-append">
<input type="text" name="product[picture]-input" id="picture" readonly="readonly" placeholder="Produktbild (optional)">
<button class="btn" id="picture-reset" type="button"><i class="icon-remove"></i></button>
<button class="btn" id="picture-select" type="button">...</button>
</div>
But i don't get the styling fit to other inputs. I'm using the responsive design and i tried the relative sizing with
class="input-medium"
or the grid-sizing with
class="span4"
but it seems that input-append not optimized for. The full code you can see here:
http://jsfiddle.net/6cvYr/
And here some screens with different screen-sizes, in each size it won't fit:
https://drive.google.com/folderview?id=0ByywF8ZXCU9kbTdUZ1N6bkxodGs&usp=sharing
Any ideas?