I have a panel with 2 tabs and different content. However, when I do a col-md-8 in tab 1, that's carryingover into tab 2, I want tab 2 to start fresh. Here's my code:
<div class="col-md-12">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">Quick</li>
<li>Advanced</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1default">
<div class="col-md-8 col-md-offset-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." id="searchTerm" name="searchTerm" value='<?php echo $value; ?>' required>
<span class="input-group-btn">
<button class="btn btn-default" type="submit" name="action"><span class="glyphicon glyphicon-search"></span> Search</button>
</span>
</div><!-- /input-group -->
</div>
</div>
<div class="tab-pane fade" id="tab2default">
<div class="col-md-8 col-md-offset-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." id="searchTerm" name="searchTerm" value='<?php echo $value; ?>' required>
<span class="input-group-btn">
<button class="btn btn-default" type="submit" name="action"><span class="glyphicon glyphicon-search"></span> Search</button>
</span>
</div><!-- /input-group -->
</div>
</div>
</div>
</div>
</div>
</div>
I am not seeing anything unexpected here: http://bootsnipp.com/snippets/902Ep
Could you take a screenshot of the problem area?
Related
I have a bootstrap datetimepicker in my form. But when i select datetime, input box size keeps changing. After input it, i can't change the datetime with datetimepicker. I think, it's because datatble.min.js conflict with datetimepicker.js. But, but i still haven't solved it. Any help would be appreciated.
Before
Before add datetimepicker
Add
Add Date
Add Time
After
Input box size changed
Modal
<div id="modal_form" class="modal fade" role="dialog" aria-hidden="true" aria labelledby="formModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="formModalLabel"></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="form" role="form" action="<?= base_url("catalog/insert") ?>" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label class="col-md-3 control-label">Start Date</label>
<div class="col-md-9">
<div class="input-group date form_datetime form_datetime bs-datetime">
<input type="text" size="16" class="form-control" name="start">
<span class=" input-group-addon">
<button class="btn default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">End Date</label>
<div class="col-md-9">
<div class="input-group date form_datetime form_datetime bs-datetime">
<input type="text" size="16" class="form-control" name="end">
<span class="input-group-addon">
<button class="btn default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Descirption</label>
<div class="col-md-9">
<textarea class="form-control" rows="3" name="desc" id="desc" val=""></textarea>
<span class="help-block"></span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn grey-salsa btn-outline" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn green btn-primary" data-dismiss="modal" type="submit" id="btnsave">Save</button>
</div>
</div>
</div>
</div>
I suggest you use some special libraries which are made for this. https://www.daterangepicker.com/
https://flatlogic.com/blog/best-javascript-datepicker-libraries/
On Click of edit, panel-body obviously will get opened at the same time i want to hide panel-heading
<div class="panel panel-default">
<div class="panel-heading row" id="first">
<div class="col-md-4">First Name</div>
<div class="col-md-4"><?php echo $row->first_name; ?></div>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<div class="col-md-4 profile-edit"> <i class="fa fa-pencil"></i> Edit</div>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div class="col-md-7 col-md-offset-2 text-center">
<label class="col-md-4">First Name</label>
<div class="col-md-8">
<input type="hidden" name="id" value="<?php echo $row->id; ?>" />
<input type ="text" name="first_name" id="first_name" class="form-control" value="<?php echo $row->first_name; ?>"/></br>
<input type="submit" value="Save" class="btn btn-success" style="width:70px;">
<button type="button" data-target="#collapseOne" data-toggle="collapse" class="btn btn-warning cancel-name">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
The easiest method would be to use jquery!
$(document).ready(function(){
$(".profile-edit").on("click", function(){
$(".panel-heading").hide();
});
});
This is just off the top of the head though, so may take some finesse.
I am trying to set up a modal with tabs in it. This is for login/signup. However, instead of just substituting the the sign up form when it is clicked, it just stacks it below the login form. Bootply link: http://www.bootply.com/5ssZsWHIzv
Any help would be much appreciated!
Your col-md-6 class is in a wrong place, you should nest the two column outside of the tab content div. I've modified the code.
Bootply: http://www.bootply.com/fE04YpZxgN
<button class="btn btn-primary btn-sm" href="#signup" data-toggle="modal" data-target=".bs-modal-sm" style="margin-top: 10px">Sign In/Register
</button>
<div class="modal fade bs-modal-sm" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content clearfix">
<br>
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active">Sign In</li>
<li class="">Register</li>
</ul>
</div>
<div class="modal-body">
<div class="col-md-6">
<div id="myTabContent row" class="tab-content">
<div role="tabpanel" class="tab-pane fade active in" id="signinTab">
<form class="form-horizontal" id="loginForm">
<fieldset>
<!-- Sign In Form -->
<!-- Text input-->
<div id="loginErrors">
</div>
<div class="control-group">
<label class="control-label" for="loginEmail">Email:</label>
<div class="controls">
<input id="loginEmail" name="email" type="text" class="form-control" placeholder="username#example.com">
</div>
</div>
<!-- Password input-->
<div class="control-group">
<label class="control-label" for="passwordinput">Password:</label>
<div class="controls">
<input id="passwordinput" name="passwordinput" class="form-control" type="password" placeholder="********">
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
<div class="btn-toolbar">
<button id="signin" name="signin" class="btn btn-success">Sign In
</button>
<button type="button" id="closeModal" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div role="tabpanel" class="tab-pane fade" id="signup">
<form class="form-horizontal" id="signUpForm">
<fieldset>
<!-- Sign Up Form -->
<div id="signUpErrors">
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Email">Email:</label>
<div class="controls">
<input id="Email" name="Email" class="form-control" type="text" placeholder="example#example.com">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="userid">First Name:</label>
<div class="controls">
<input id="firstName" name="firstName" class="form-control" type="text" placeholder="John">
</div>
</div>
<div class="control-group">
<label class="control-label" for="userid">Last Name:</label>
<div class="controls">
<input id="lastName" name="lastName" class="form-control" type="text" placeholder="Smith">
</div>
</div>
<!-- Password input-->
<div class="control-group">
<label class="control-label" for="password">Password:</label>
<div class="controls">
<input id="password" name="password" class="form-control" type="password" placeholder="********">
<em>Must have atleast one number</em>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="reenterpassword">Re-Enter
Password:</label>
<div class="controls">
<input id="reenterpassword" class="form-control" name="reenterpassword" type="password" placeholder="********">
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="confirmsignup"></label>
<div class="controls">
<div class="btn-toolbar">
<button id="confirmsignup" name="confirmsignup" class="btn btn-success">Sign Up
</button>
<button type="button" id="closeModal" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="col-md-6 pull-right">
<a class="btn btn-block btn-social btn-facebook">
<span class="fa fa-facebook"></span> Sign in with Facebook
</a>
<a class="btn btn-block btn-social btn-foursquare">
<span class="fa fa-foursquare"></span> Sign in with Foursquare
</a>
<a class="btn btn-block btn-social btn-openid">
<span class="fa fa-openid"></span> Sign in with OpenID
</a>
<a class="btn btn-block btn-social btn-google">
<span class="fa fa-google"></span> Sign in with Google
</a>
<a class="btn btn-block btn-social btn-google">
<span class="fa fa-google"></span> Sign in with Google
</a>
</div>
</div>
</div>
</div>
</div>
I'm using angular-strap aside with Bootstrap3. My aside html template is given below -
<div class="aside" tabindex="-1" role="dialog">
<div class="aside-dialog">
<div class="aside-content">
<div class="aside-header">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="aside-title">Settings</h4>
</div>
<div class="aside-body" ng-controller="SettingsCtrl">
<form name="createCustomerForm" role="form">
<div class="form-group">
<label for="settings_email">Email</label>
<input class="form-control" id="settings_email" name="settings_email" type="text">
</div>
<div class="form-group">
<label for="language">Language: </label>
<button id="language" type="button" class="btn btn-default" data-html="1"
data-animation="am-flip-x" ng-options="country.name for country in countries track by country.id"
data-placeholder="Select country..."
ng-model="selectedLang" ng-change="onLanguageSelected(country)"
bs-select>
Action <span class="caret"></span>
</button>
</div>
</form>
</div>
<div class="aside-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
</div>
</div>
</div>
</div>
This works so far-
But if I change the code -
<div class="aside" tabindex="-1" role="dialog">
<div class="aside-dialog">
<div class="aside-content">
<div class="aside-header">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="aside-title">Settings</h4>
</div>
<div class="aside-body" ng-controller="SettingsCtrl">
<form name="createCustomerForm" role="form">
<div class="form-group">
<label for="settings_email">Email</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" id="settings_email" name="settings_email" type="text">
</div>
</div>
<div class="form-group">
<label for="language">Language: </label>
<button id="language" type="button" class="btn btn-default" data-html="1"
data-animation="am-flip-x" ng-options="country.name for country in countries track by country.id"
data-placeholder="Select country..."
ng-model="selectedLang" ng-change="onLanguageSelected(country)"
bs-select>
Action <span class="caret"></span>
</button>
</div>
</form>
</div>
<div class="aside-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
</div>
</div>
</div>
</div>
Then it captures the whole window -
How can I make it to remain same size?
You can just add a max-width tag on your content class in aside template that you are loading.
Assume
I have created a popup using bootstrap modal. Here is how it looks like
I want to make the input and input-group elements to be of same width and start at the same position like mentioned in this question. I have tried using form-group as mentioned in its answer but it doesn't work. I am new to bootstrap and JavaScript.
HTML code
<form class="form-horizontal">
<div class="modal fade" id="apstMoleculeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Enter Information</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label col-xs-3">Name</label>
<div class="controls col-xs-9">
<input type="text" placeholder="Enter Name">
<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Place</label>
<div class="controls col-xs-9">
<input type="text" placeholder="Enter Place">
<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Cost</label>
<div class="controls col-xs-9 input-group">
<span class="input-group-addon">$</span>
<input type="text" placeholder="0.00">
<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info" ></span>
</div>
</div>
</div> <!-- modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</form>
DEMO: https://jsbin.com/xewevu/1/
Form in wrong location, not using the correct classes on the input and you need to write custom css or use even more wrappers and the grid system, which is really overkill IMO.
The beauty of this approach is that if you decided to use .col-sm instead of xs, then the .help won't stack.
HTML:
<div class="modal fade" id="apstMoleculeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Enter Information</h4>
</div>
<form class="form-horizontal">
<div class="modal-body">
<div class="form-group">
<label class="control-label col-xs-3">Name</label>
<div class="controls col-xs-9">
<span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
<input type="text" class="form-control" placeholder="Enter Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Place</label>
<div class="controls col-xs-9">
<span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
<input type="text" class="form-control" placeholder="Enter Place">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Cost</label>
<div class="controls col-xs-9">
<span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="0.00">
</span>
</div>
</div>
</div>
</div>
<!-- modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
CSS
#apstMoleculeModal .form-group {
padding-right:20px;
position:relative;
}
#apstMoleculeModal .help {
position:absolute;
right:-8px;
top:12px;
}
You're not quite using the classes for col-*-* right, and your inputs are also missing classes. Take a look at this Bootply:
Bootply
Here to see what I mean.
Here's the code (Removed all Modals so I could directly edit it)
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-3">Name</label>
<div class="col-xs-2">
<input class="form-control input-sm" placeholder="Enter Name" type="text">
</div>
<div class="col-xs-1">
<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Place</label>
<div class="col-xs-2">
<input class="form-control input-sm" placeholder="Enter Place" type="text">
</div>
<div class="col-xs-1">
<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Cost</label>
<div class="col-xs-2">
<div class="input-group">
<span class="input-group-addon">$</span>
<input class="form-control input-sm" placeholder="0.00" type="text">
</div>
</div>
<div class="col-xs-1">
<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
</div>
</div>
</form>
Please Note:
You may have to change the size of the col-xs-* to fit in the modal correctly.