I am trying to control tabs with radio buttons to change a content area for a scheduling screen. This works fine other than the radio buttons do not check.
Anyone got any ideas how to fix this?
<div>
<div>
<input id="optDaily" name="intervaltype" checked type="radio" data-target="#scheduleDaily" data-toggle="tab">
<label for="optDaily">Daily</label>
</div>
<div>
<input id="optWeekly" name="intervaltype" type="radio" data-target="#scheduleWeekly" data-toggle="tab">
<label for="optWeekly">Weekly</label>
</div>
<div>
<input id="optMonthly" name="intervaltype" type="radio" data-target="#scheduleMonthly" data-toggle="tab">
<label for="optMonthly">Monthly</label>
</div>
</div>
<div class="tab-content">
<div id="scheduleDaily" class="tab-pane active schedule-pane" >
Daily
</div>
<div id="scheduleWeekly" class="tab-pane schedule-pane" >
Weekly
</div>
<div id="scheduleMonthly" class="tab-pane schedule-pane" >
Montly
</div>
</div>
Here is the example in jsfiddle http://jsfiddle.net/nEWMq/
The radio buttons aren't getting checked because of this code:
e.preventDefault()
To fix this, remove data-toggle="tab" from the radio buttons and then add this jQuery code:
$('input[name="intervaltype"]').click(function () {
$(this).tab('show');
});
Bootstrap 4.3.1 working tabs as radio buttons
$(document).ready(function () {
$('input[name="intervaltype"]').click(function () {
$(this).tab('show');
$(this).removeClass('active');
});
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="nav nav-tabs" role="tablist">
<div>
<input id="optDaily" checked name="intervaltype" type="radio" data-target="#scheduleDaily">
<label for="optDaily">Daily</label>
</div>
<div>
<input id="optWeekly" name="intervaltype" type="radio" data-target="#scheduleWeekly">
<label for="optWeekly">Weekly</label>
</div>
<div>
<input id="optMonthly" name="intervaltype" type="radio" data-target="#scheduleMonthly">
<label for="optMonthly">Monthly</label>
</div>
</div>
<div class="tab-content">
<div id="scheduleDaily" class="tab-pane active">Daily</div>
<div id="scheduleWeekly" class="tab-pane">Weekly</div>
<div id="scheduleMonthly" class="tab-pane">Montly</div>
</div>
Try this works for me
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="container">
<div class="row">
<div class="span12">
<p class="lead">Bare minimum radio button tabs example:</p>
<div id="tab" class="btn-group" data-toggle="buttons">
<a href="#prices" class="btn btn-default active" data-toggle="tab">
<input type="radio" />Prices</a>
<a href="#features" class="btn btn-default" data-toggle="tab">
<input type="radio" />Features</a>
<a href="#requests" class="btn btn-default" data-toggle="tab">
<input type="radio" />Requests</a>
<a href="#contact" class="btn btn-default" data-toggle="tab">
<input type="radio" />Contact</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="prices">Prices content</div>
<div class="tab-pane" id="features">Features Content</div>
<div class="tab-pane" id="requests">Requests Content</div>
<div class="tab-pane" id="contact">Contact Content</div>
</div>
</div>
</div>
</div>
Related
I have tried everything but the exact same code works for the standalone application.
Here is the code for Profile component:
<app-header (sendUserdata)="getUserdata($event)" (sendToken)="getToken($event)" > </app-header>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<a (click)="onClick('myProfile')"> My Profile </a>
</li>
<li>
<a (click)="onClick('addPassword')">Add Password</a>
</li>
<li>
Show Password
</li>
<li>
<a (click)="logOut()">Logout</a>
</li>
</ul>
</div>
<div *ngIf="myProfile">
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" >
<h1>Hello, {{userData.ofa}}</h1>
<img src="{{userData.Paa}}" alt="">
<p>{{userData.U3}}</p>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="addPassword">
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" >
<div class="container">
<h1>Submit Password</h1>
<form>
<div class="form-group">
<label for="name">Application Name</label>
<input #applicationname type="text" class="form-control" id="" required >
</div>
<div class="form-group">
<label for="alterEgo">Username</label>
<input #username type="text" class="form-control" id="username" required>
</div>
<div class="form-group">
<label for="alterEgo">Password</label>
<input #password type="text" class="form-control" id="password" [value]="randomPassword">
</div>
<button type="button" class="btn btn-success" (click)="generatePassword()">Generate Random Password</button>
<button type="submit" class="btn btn-success dropbox-saver" (click)="submitData(applicationname.value,username.value,password.value)">Submit</button>
<hr>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the output if I run the exact same code as standalone application.
check screenshot of standalone app
Here is the output of the profile component where Save to Dropbox button is not showing up:
Not Working button after login
At the same time, the button is showing up on the main page, where user hasn't logged in yet.
I have tried checking without all the bootstrap classes and divisions. But, I am unable to get it working.
I'm using form-inline class that put all the controls on the same line, but I noticed that when I resize the window the button near the textbox go to the next line. I want to prevent this. Take a look at the image:
and this is the code:
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-xs-2 hideable-sidebar">
<div class="well">
<span><b>Resources</b></span>
<form class="form-inline">
<input type="text" placeholder="type text here"
class="form-control" id="resource_filter" />
<button class="clear btn btn-default btn-sm" type="button"
title="clean">
<span class="glyphicon glyphicon-repeat"></span>
</button>
</form>
</div>
</div>
</div>
</div>
You'll want to use the Bootstrap Button Addons under input groups. This way it will stay proportional during a window resize. Be sure that your input and button are using the same size:
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-xs-12 hideable-sidebar">
<div class="well">
<span><b>Resources</b></span>
<form class="form-inline">
<div class="input-group">
<input type="text" placeholder="type text here" class="form-control" id="resource_filter" />
<span class="input-group-btn">
<button class="clear btn btn-default" type="button" title="clean">
<span class="glyphicon glyphicon-repeat"></span>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
I Have included bootstrap tabs in my project.But the problem I am facing is that when I click on the tabs the content are getting changed,but the tab is not getting active.ie always the first tab is active irrespective of the click.
How can I get rid of this?
Code is given below.
<div class="row">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Trip Overview
</li>
<li role="presentation">Itinerary
</li>
<li role="presentation">Cost
</li>
<li role="presentation">Terms & Condition
</li>
<li role="presentation">Inquiry
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<span>{{model.overview}}</span>
</div>
<div role="tabpanel" class="tab-pane" id="itinerary">
<div ng-repeat="itenary in model.itenary.long">
<p>{{itenary.name}}</p>
<p>{{itenary.content}}</p>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="cost">Cost details will be uploaded soon</div>
<div role="tabpanel" class="tab-pane" id="ta">
<h3>Terms & Conditions</h3>
<div ng-repeat="term in model.tna.terms">
<ul>
<li>{{term}}</li>
</ul>
</div>
<h3>Payments</h3>
<div ng-repeat="payment in model.tna.payment">
<ul>
<li>{{payment}}</li>
</ul>
</div>
<h3>Cancellation Policy</h3>
<div ng-repeat="cancelPolicy in model.tna.payment">
<ul>
<li>{{cancelPolicy}}</li>
</ul>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="book">
<div id="contact-form" class="clearfix">
<ul id="errors" class="">
<li id="info">There were some problems with your form submission:</li>
</ul>
<p id="success">Thanks for your message! We will get back to you ASAP!</p>
<form method="post" action="/home">
<label for="name">Name: <span class="required">*</span>
</label>
<input type="text" id="name" name="name" value="" placeholder="<Your Name>" required="required" autofocus="autofocus" />
<label for="email">Email Address: <span class="required">*</span>
</label>
<input type="email" id="email" name="email" value="" placeholder="<your mail>" required="required" />
<label for="telephone">Telephone:</label>
<input type="tel" id="telephone" name="telephone" value="" />
<label for="enquiry">Enquiry:{{model.name}}</label>
<label for="message">Message: <span class="required">*</span>
</label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>
<span id="loading"></span>
<input type="submit" value="Send" id="submit-button" />
<p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
</form>
</div>
</div>
</div>
</div>
these are the imported libraries inn my project
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- JS -->
<!-- load angular and angular-route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
I'm trying to make a modal window open up when I press a link in my Navbar. I've tried to copy and paste some example code and adjust it a bit but nothing happens when I press the link. What am I missing? I'm still learning Bootstrap so bear with me :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cool Website</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/enabletooltips.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/index-styling.css">
</head>
<body>
<div class="sticky-header-navbar-container">
<div class="well">
<div class="navbar navbar-default navbar-fixed-top" id="navbar">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
<form class="navbar-form" role="search">
<div class="input-group" style="width: 100%">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term-header">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form">
<span>Login</span>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email Address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox" style="padding-right: 15px;padding-left: 10px">
<label>
<input type="checkbox" value="remember-me">
Remember Me
</label>
</div>
<button type="button" class="btn btn-success btn-bg" id="signin-btn"><span class="glyphicon glyphicon-log-in"></span></button>
</form>
</li>
<li style="padding-right: 20px">
<a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal"
data-tooltip="Only Required to Upload, Comment and Rate!">Not Registered? Click Here!</a>
</li>
</ul>
</div>
</div>
</div>
<div id="registration-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some Text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="header-container">
<div class="container" style="padding-top: 25px">
<div class="jumbotron jumbotronic">
<h1 class="h1">Cool Website</h1>
<p>Catchphrase!</p>
</div>
</div>
</div>
<div class="search-bar-container">
<div class="container">
<div class="h1" style="color: #ffffff;text-align: center;">Search Here</div>
<form role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</div>
</div>
<div class="categories-container">
<div class="container">
<div class="h1" style="color: #ffffff;text-align: center;">Or Click One of these</div>
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group" style="padding-right: 10px">
<button type="button" class="btn btn-success btn-bg" id="category-gameplay-btn">Button 1</button>
</div>
<div class="btn-group" role="group" style="padding-right: 10px">
<button type="button" class="btn btn-warning btn-bg" id="category-editor-btn">Button 2</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger btn-bg" id="category-engine-btn">Button 3</button>
</div>
</div>
</div>
</div>
<div class="footer-container">
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container" style="text-align: center">
<span>This website was made using the following tools</span>
<br>
<span>
Bootstrap | glyphicons
</span>
</div>
</div>
</div>
</body>
</html>
EDIT: Full Code Put up
Working good, You have to include bootstraps.min.js
like this :
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/enabletooltips.js"></script>
More it's better to put script a the end of the page.
I made a tab view using bootstrap for a angular template. but when i click on the tab it goes to the angular link router instead of going to the tab content.it may be because i have them as links but at the moment i really don't have any idea of how im going to solve this
<ul class="nav nav-tabs">
<li class="active">Where you heading <i class="fa"></i></li>
<li>Description<i class="fa"></i></li>
</ul>
<form id="rideForm" method="post" class="form-horizontal">
<div class="tab-content">
<div class="tab-pane active" id="info-tab">
<div class="form-group">
<label class="col-sm-2 control-label">From:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="fullName" />
</div>
<label class="col-sm-2 control-label">To:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Time:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="jobTitle" />
</div>
</div>
<div id="ridebuttongroup" class="col-sm-5 col-sm-offset-3">
<a href="#address-tab" data-toggle="tab"><button type="next" class="btn btn-default">
<span class="glyphicon glyphicon-circle-arrow-right"></span> Next </button></a>
</div>
</div>
<div class="tab-pane" id="address-tab">
<div class="form-group">
<label class="col-sm-3 control-label">Description</label>
<div class="col-sm-5">
<textarea rows="4" cols="50"></textarea>
</div>
</div>
<div id="ridebuttongroup" class="col-sm-5 col-sm-offset-3">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-plane"></span> Ride</button>
<a href="#info-tab" data-toggle="tab"><button type="next" class="btn btn-default">
<span class="glyphicon glyphicon-circle-arrow-left"></span> Previous </button></a>
</div>
</div>
</div>
<div style="margin: 15px">
</div>
</form>
please help!
Stop banging your head against the wall and just use http://angular-ui.github.io/bootstrap/
A quick work around to this issue is to add:
target="_blank"
to your links. Angular, behind the scenes, does stuff to your links which is why you're having that problem.
This is a temp. solution to the issue.