Develop Reference

Script for existing search bar

I have tried the adding the Google search to my existing search bar to power it with no luck. Then I tried another bit of Javascript I found on the forums here and did place it directly after the form. Here is the existing code, but I do not have it working yet. Any suggestions would be appreciated. Thank you in advance.
<div class="navbar-collapse collapse right" id="search-not-mobile">
<button type="button" class="btn navbar-btn btn-primary" data-toggle="collapse" data-target="#search">
<span class="sr-only">Toggle search</span>
<i class="fa fa-search"></i>
</button>
</div>
</div>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
</span>
</div>
</form>

Use a handler like this one (w/ your own selectors):
$('button').click(function(ev){
location.href="search.html?q=":$("[type=text]").val();
});
Then, create search.html with a normal Google search box.

bootstrap-wysiwyg loses focus

I'm trying to implement bootstrap-wysiwyg editor in a project, but every time I click a button in the toolbar that has a dropdown the editor loses focus, meaning that, for example, it's impossible to add links because the text is not selected, and images are always added at the beginning of the content because the caret position in the editor was lost. This happens in Firefox and Chrome.
Here is the HTML code for the insert link button for example (quite similar to the editor documentation example, but not working)
<div class="panel panel-info">
<div class="panel-heading">
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Insert Link"><i class="fa fa-link text-primary"></i></a>
<div class="dropdown-menu input-append">
<input class="form-control" type="text" data-edit="createLink" placeholder="URL" />
<button class="btn btn-success" type="button"><i class="fa fa-link"></i></button>
</div>
</div>
</div>
</div>
<div class="panel-body">
<div id="editor">
</div>
</div>
</div>
The only JS code is the editor hook:
<script>
$(document).ready(function () {
$('#editor').wysiwyg();
});
</script>
I'm using jQuery v2.1.4, Bootstrap v3.3.6, and bootstrap-wysiwyg v1.0.4
Thank you for your help.

The version of the bootstrap-wysiwyg that you are using is out of date. This bug was fixed in the most recent version. You can download it here.

Bootstrap text-center is not working on buttons

So I've been trying to center these 2 buttons in bootstrap for some time now. I found out there is already a bootstrap css class called "text-center" so I'm trying to use that but unfortunately no matter where I use it, it doesn't change anything.
<div class="form-group">
<div class="col-sm-10 text-center">
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
</div>
The code is in a form, which is in a well, and if you need any more information let me know.
Thanks

Use .center-block class it is the best way to centering an element in bootstrap framework
<div class="form-group">
<div class="col-sm-10 center-block">
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
</div>

Your code snippet works once you include the bootstrap css file (see below). You may have other code affecting this section of your page- try checking your browser console to see what styles are overriding your intended styling.
Also you need to use an offset value to 'center' your col-sm-10 if you do not want to use col-sm-12
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-1 text-center">
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
</div>

Radio button don't work with UiBootstrap

I need this time a help with this example:
DEMO
You can see that the css on example 1 goes good. When you click on the button the state of the button change (press)
On example 2 i can't do the same. on my app i need that the "radio button" appear on vertical line (i get it).
But when i press the button, when i click out i back to the first state (don't press)
<h4>Exmaple 2</h4>
<div class="btn-group" data-toggle="buttons-radio">
<div class="row" ng-repeat="company in vm_login.decimals">
<button type="button" class="btn btn-primary" ng-model="radioModel.id" btn-radio="company.id">
{{company.desc}}
</button>
</div>
</div>
Can anybody help me?

I got a final version and this is how i need
DEMO
Thanks for all
<div class="btn-group-vertical" >
<button ng-repeat="value in vm_login.options"
class="btn btn-primary"
type="button"
ng-model="vm_login.model"
btn-radio="value.id">
{{value.desc}}
</button>
</div>
<p>texto aqui: {{vm_login.model}}</p>

This worked for me try this approach in one line without using buttons:
<div class="btn-group">
<label class="btn btn-primary" ng-repeat="company in vm_login.decimals" ng-model="radioModel" ng-model="radioModel.id" btn-radio="company.id">{{company.desc}}</label>
</div>

The btn-group classed element expects it's children to be buttons (a btn classed element). Not a div element. Take out the div and move the ng-repeat to the actual button. Now if you want your button to align verticaly you'll need to use btn-group-vertical instead of btn-group as stated in the bootstrap documentation. Here's the update code:
<div class="btn-group-vertical" data-toggle="buttons-radio">
<button ng-repeat="company in vm_login.decimals" type="button" class="btn btn-primary" ng-model="radioModel.id" btn-radio="company.id">
{{company.desc}}
</button>
</div>
Updated Plunker: http://plnkr.co/edit/kVFqNAXisMgkMVqy0WAF?p=preview

How to hide Bootstrap textbox toggle on load

I have a couple of dynamically created buttons with toggle boxes below it that are created like so.
HTML
<button type="button" class="accordion-toggle btn btn-default btn-small"
data-toggle="collapse" data-parent="#accordion'+this.id+'"
href="#collapseOne'+this.id+'"><i class="icon-info"></i></button>
Here is the textbox collapse it calls to display on click
<div id="accordion'+this.id+'">
<div id="collapseOne'+this.id+'" class="collapse" style="height: auto;">
<div class="control-group control-group-notes">
<button onclick="clearMsgBox(\''+this.id+'\')" type="button" class="close" data-toggle="collapse" data-parent="#accordion'+this.id+'" href="#collapseOne'+this.id+'">x</button>
<textarea id="doGet'+this.id+'" style="width: 92%;" rows="2" placeholder="Message..."></textarea>
</div>
</div>
</div>
The button and boxes are dynamically created and works fine. The only issue I can't seem to figure out is that on load all the boxes are open and not hidden. But once I click the x button it toggles to hide just fine.
Could anyone help me out? Thank you in advance.

In bootstrap the class="in" determines the visibility of your accordion and it's probably present on all of them when it loads.
class="panel-collapse collapse in"
For those you do not want to show onload remove the "in" class.

Solved!
If anyone wants to the know what was causing it.
As stated above in class needed to be removed. also there was a height auto that needed be removed.
code as follows.
<div id="accordion'+this.id+'">
<div id="collapseOne'+this.id+'" class="collapse">
<div class="control-group control-group-notes">
<button onclick="clearMsgBox(\''+this.id+'\')" type="button" class="close" data-toggle="collapse" data-parent="#accordion'+this.id+'" href="#collapseOne'+this.id+'">x</button>
<textarea id="doGet'+this.id+'" style="width: 92%;" rows="2" placeholder="Message..."></textarea>
</div>
</div>
</div>

If you want your div to be hidden on load, you can try to set: "display:hidden;" in your CSS for this div. Then the toggle function will show it on click by changing the display attribute. (at least this is how it works with jquery)