I have a bootstrap dropdown menu combined with a text input field that acts as an Angular filter. The code looks like this:
<form name="searchForm" role="form" data-ng-submit="goSearch()">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<div class="dropdown">
<input type="text" ng-click="load_origins()" name="dropdown-toggle" data-ng-model=origin_search placeholder="Ciudad Origen" class="btn btn-default search-menu-button dropdown-toggle" id="origin" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false" required autocomplete="off">
<ul class="dropdown-menu dropdown-menu-right search-menu-items" aria-labelledby="origin">
<li><a href class= "search-menu-item" data-ng-repeat="origin in origins | filter:origin_search" data-ng-click="checkDestinations(origin)">{{origin.Localidad}}</a></li>
</ul>
</div>
</div>
</div>
</div>
</form>
The thing is that:
<input type="text" ng-click="load_origins()" name="dropdown-toggle" data-ng-model=origin_search placeholder="Ciudad Origen" class="btn btn-default search-menu-button dropdown-toggle" id="origin" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false" required autocomplete="off">
is not working as intented in iOS, the keyboard appears but no text appears when the user tries to write.
For what I've been searching it can be related with a bug in iOS with that particular input type, but there was no solution that worked for my case.
Is it maybe a CSS related thing? (Maybe a Bootstrap bug: http://getbootstrap.com/browser-bugs/)
Or could it be re an Angular thing? Or maybe just an iOS problem?
Any help will be appreciated.
Thanks in advance.
Finally I opted to use a Typeahead of UI-Bootstrap mostly because it seemed a good option as it behaved the same way that the dropdown that I tried to implement, but without the troubles on iOS.
So, I didn't find out what was causing the problems, after some frustration it was a better option to change the directive.
Related
I want to pass from a tab to another tab through a input (type submit), that input has some JS code behind, but the console shows this
Uncaught TypeError: Cannot read property 'addEventListener' of null
HTML Code:
<div class="container">
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Registrarse</h3>
</div>
<div class="panel-body">
<ul class="nav nav-tabs" id="myTabs">
<li role="presentation" class="active" id="pone">
<a data-toggle="tab" href="#datospersonales">Datos personales</a>
</li>
<li role="presentation" id="ptwo" class="disabled">
<a data-toggle="tab" href="#registrousuario">Registro de usuario</a>
</li>
<li role="presentation">
</li>
</ul>
<div class="tab-content mt-25">
<div role="tabpanel" id="datospersonales" class="tab-pane active fade in">
<form class="form-horizontal" id="form1" name="form1">
<label class="col-md-1 control-label">Nombres</label>
<div class="col-md-4">
<input type="text" class="form-control s" placeholder="Nombres" id="name">
</div>
<label class="col-md-offset-1 col-md-1 control-label">Correo</label>
<div class="col-md-4">
<input type="text" class="form-control s" placeholder="Correo" id="email">
</div>
</form>
<div class="col-md-offset-11 col-md-1 mt-25">
<input type="submit" class="btn btn-success" class="guardar" value="Siguiente" onclick="handleClick()">
</div>
</div>
JavaScript Code:
var boton = document.querySelector(".guardar")
boton.addEventListener('click',handleClick);
function handleClick(){
$('#myTabs a[href="#ptwo"]').tab('show');
}
I don't know if it's that i'm not using JQuery properly in this case, im new at this.
I found few things on your code, please consider this just observations.
In the future please specify that you are using boostrap and jQuery (not all pages uses these frameworks), it will help to understand the issue that you are having , also please specify the version of the libraries that you are using!.
in the Submit button you are repeating the attribute "class", so the second one will be ignored when you are trying to get by className; Other important point it since you are adding event handler through JS is not necessary to use "onclick".
<input type="submit" class="btn btn-success" class="guardar" value="Siguiente" onclick="handleClick()">
change by
<input type="submit" class="btn btn-success guardar" value="Siguiente">
The HTML submit button will handle a submit , it means that always will send the information in the page to other (could be the same), but that perform of sumit means another requests is done, so, it is necessary to be a submit button ?. Assuming the submit is needed you will need to prevent the event of sending the information (until you want that perform of information necessary), for preventing events you can use "event.preventDefault()", you also will need to add a logic to stop preventing when you consider the information is ready to be sent.
the selector for the tab is not necessary to be to much specific, since is supossed that the id af an HTML element should not be the same in the entire page.
var boton = document.querySelector(".guardar")
boton.addEventListener('click',handleClick);
function handleClick(e){
e.preventDefault();
$('#ptwo').tab('show');
}
this is the sample workiing:
Your sample working
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.
I have an app that uses Bootstrap. I need to use the Bootstrap Collapse component. I have created a Bootply to demonstrate my problem here. My code looks like this:
<div id="items-group" class="form-group">
<div data-toggle="collapse" data-parent="#items-group" data-target="#items-list" aria-expanded="true" aria-controls="items-list" class="collapsable-group-header">
<ul class="list-inline no-padding-below" style="margin-bottom:0;">
<li><span class="glyphicon glyphicon-chevron-down"></span></li>
<li class="no-padding-x">
<h5 style="margin:0;">Items <span>(<button type="button" class="btn btn-link btn-link-padding" onclick="selectAll('items-list')">choose all</button>)</span></h5>
</li>
</ul>
</div>
<div id="items-list" style="padding-left:32px;">
<label style="font-weight:normal;">
<input type="checkbox">
<span>Item A</span>
</label><br>
<label style="font-weight:normal;">
<input type="checkbox">
<span>Item B</span>
</label><br>
<label style="font-weight:normal;">
<input type="checkbox">
<span>Item C</span>
</label><br>
</div>
</div>
If you run the Bootply, you will notice that the collapse does not work correctly on the initial load. When the page initially loads, the collapse items are visible (as expected). Then click the header. It is supposed to collapse the items. Instead, it quickly hides them and then expands the list. After the initial run, it works fine. Its just that when the page loads, I need to get it so the list collapses when you click it. I thought setting aria-expanded="true" would take care of this, however it didn't.
You are missing the classname of the group that identifies the collapse, so when you click the first time the action just toggle that classnames. Add this:
<div class="collapse in" id="items-list" style="padding-left:32px;">
UpdatedBootply
The above image shows my attempt at creating my own "light-weight" Bootstrap-looking ComboBox control with ASP.NET textbox.
The input group shown above which consists of a texbox and button (with black arrow) looks funny. Has anyone experienced this before? Any ideas as to why it looks that way? Any recommendations to fix this?
I am not doing anything fancy here. The mechanism that "appends" a button to a textbox is supported by Bootstrap.
ASPX Page:
<div class="col-sm-3" id="TimesheetStep"><b>Timesheet Date</b>
<div class="input-group">
<asp:TextBox runat="server" ID="TimesheetBox" CssClass="form-control">
</asp:TextBox>
<div class="input-group-btn">
<button type="button" class="btn btn-inverse dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="demolist" class="dropdown-menu scrollable-menu pull-right"
runat="server" role="menu">
<li>11/22/2013</li>
<li>11/15/2013</li>
<li>11/08/2013</li>
</ul>
</div>
</div>
</div>
CSS:
.scrollable-menu { height: auto; max-height: 300px; overflow-x: hidden; }
I figured it out:
With this HTML:
<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
You get:
But with the following HTML examples:
<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
OR
<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
Action<span class="caret"></span>
</button>
You get (respectively):
So it looks like you need to add a word (e.g., Action) OR just put an HTML space (e.g., )before <span class="caret"></span>. I hope this helps someone.
This is a common problem in Twitter Bootstrap.
The "computed" CSS height of the input field is different than that of the actual button.
Open your "developer tools" on your browser, and inspect the element styles, then find where it is overwritten | OR - fix the bootstrap CSS of the drop-down button, append: !important so it cannot be overridden.
I have a page that requires two Rich Text Editors, so I went with WYSIWYG (What You See Is What You Get). They work fine, except for one little annoying detail. When I click the buttons to bold, italicize or indent, it applies to BOTH RTEs, and focuses on the second input. I can't quite figure out how to separate the toolbars from each other.
HTML:
<div class="form-group">
<label for="definition" class="col-lg-3 control-label">Definition:</label>
<div class="col-lg-3">
<div class="btn-toolbar" data-role="editor-toolbar" data-target="##definition">
<div class="btn-group">
<a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
<a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
<a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
<a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
<a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
</div>
</div>
<div id="definition"></div>
</div>
</div>
<div class="form-group">
<label for="consent" class="col-lg-3 control-label">Consent:</label>
<div class="col-lg-3">
<div class="btn-toolbar" data-role="editor-toolbar" data-target="##consent">
<div class="btn-group">
<a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
<a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
<a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
<a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
<a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
</div>
</div>
<div id="consent"></div>
</div>
</div>
JS (not really needed, but just in case...)
$(function() {
$("#definition, #consent").wysiwyg();
})
After a while of research, the answer is quite simple. Read into the source code and you'll see that it has a toolbar selector:
toolbarSelector: '[data-role=editor-toolbar]',
So you have to override that with a unique data-role like so:
$("#consent").wysiwyg({ toolbarSelector: '[data-role=editor2-toolbar]'} );
Making sure to change the data-role to match the new selector.
Was going to just comment but it ran long.
If it's anything like my WYSIWYG editor, it's because the system is set up to work with one container. Even if you add 2 items, it will do the same to both. The only way you could get around this would be to create two separate pages and house them on the same page (via seamless Iframes, possibly AJAX).
Note that I don't know for sure how this particular editor works, but it looks like the backend works very similar (ie, those data- attributes are housing the related execCommand() arguments just as mine).
Haven't tried it but did you try separating the the WYSIWYG initialization.
$(function() {
$("#definition").wysiwyg();
$("#consent").wysiwyg();
})