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
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 build a beautiful form for selecting multiple files for upload in Bootstrap. The problem is that when I add a second file, the default text inside the button stops from updating. What am I missing?
<div class="control-group" id="fields">
<div class="controls">
<div class="entry input-group uploads">
<label class="file-upload btn">
Choose file from computer...<input name="fields[]" type="file" />
</label>
<span class="input-group-btn">
<button class="btn btn-upload-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
What should happen: when I click the plus button and choose a second file, the second title should also update, and not only the first one. The complete work is here: Fiddle
I'm trying to create a language bar with the jQuery bootstrap plugin, but it seems there is no option to append any action to anchor tags in drop down menu at all. They are just un-clickable.
Initialization of plugin:
<div class="bfh-selectbox bfh-languages" data-language="pl_PL" data-available="en_US,pl_PL" data-flags="true" data-blank="false">
<input type="hidden" value="">
<a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
<span class="bfh-selectbox-option input-medium" data-option=""></span>
<b class="caret"></b>
</a>
<div class="bfh-selectbox-options">
<div role="listbox">
<ul role="option">
<li>
<a href="/index.php?lang=pl_PL" data-option="pl_PL">
<i class="glyphicon bfh-flag-PL"></i>
</a>
</li>
<li>
<a href="/index.php?lang=en_US" data-option="en_US">
<i class="glyphicon bfh-flag-US"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
Commenting or uncommenting doesn't make any difference.
Another possibly related issue:
When I'm stretching out my web page, with the container overflowing the language bar completely, it becomes completely un-clickable. I don't want to change this plugin on something else in case someone will offer.
The address of the website is here.
So I have two radio buttons here, and I'm trying to link them up. Due to the fact that they are in two different forms, they don't seem to work as I expected. The forms are required in Bootstrap in order to display the correct style I desire. Here's a snippet of my code:
<ul class="list-group">
<li class="list-group-item list-heading">Notification Display Options</li>
<li class="list-group-item">
<form class="form-inline" role="form">
<div class="radio">
<label>
<input type="radio" id="noti_display_time" name="noti_display"> <span trans="shownotificationfor">Shows for</span>
<div class="form-group">
<input id="show_noti_time" type="number" class="form-control" max="60" min="1" data-requires="noti_display_time">
</div> <span trans="seconds">seconds</span>
</label>
</div>
</form>
</li>
<li class="list-group-item">
<form class="form-inline" role="form">
<div class="radio">
<label>
<input type="radio" name="noti_display">Close manually
</label>
</div>
</form>
</li>
</ul>
http://jsfiddle.net/DerekL/4YfB9/show (Do not view it inside the jsFiddle preview window since the style changes as the window size changes)
Is there a solution to this without messing up the style? Thanks.
JavaScript will be my last resort, if there is no workaround.
Just wrap one form around the <ul>. Using 2 forms just to manage style doesn't make much sense.
<form>
<ul/>
</form>
DEMO
I have the following code (full source of page):
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<span class="brand" href="#">Test</span>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="{% active request "^/$" %}">Home</li>
<li class="{% active request "^/about$" %}">About</li>
</ul>
<form class="navbar-search pull-right">
<input type="text" class="search-query" placeholder="Search...">
</form>
<div class="navbar-form pull-right">
Log in
Sign up
</div>
</div>
</div>
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>
</div>
When loaded as a desktop, I get this:
Note that the "Log in" and "Sign up" buttons are BEFORE the search bar.
However, when I resize the browser, and the navbar responds I get this:
Now, the "Log in" and "Sign up" buttons are AFTER the search bar. This is because they are pull-right elements.
I've tried wrapping the buttons and search bar in a float: right parent div. This causes them to stay in the right order, but results in them being weirdly off to the side. This is undesirable. Does anyone have a solution that causes their order not to be reversed?
The problem is that the floats on navbar-form and navbar-search are set to none once the nav-collapse logic kicks in. Instead of relying on floats, play around with display: inline-block. The following seems to work reasonably (you should create your own classes instead of applying styles inline):
<div class="pull-right">
<!-- .btn's already have display: inline-block so don't need to apply it manually -->
<!-- margin-left: 15px is applied so that the buttons align with the
search field -->
<a style="margin-left: 15px;" href="#" class="btn">Log in</a>
Sign up
<form class="navbar-form" style="display:inline-block">
<input type="text" class="search-query" placeholder="Search...">
</form>
</div>
Navbar's no longer use .pull-left or .pull-right, but rather .navbar-left and .navbar-right. This avoids issues with specificity due to chaining classes and enables easier styling.
See http://blog.getbootstrap.com/2013/08/13/bootstrap-3-rc2/