I have a form which is in many tabs like tab1, tab2, tab3. It just bunch of inputs form. I want to submit all the form content as one. But the problem is my second tab is starting from where the first form stops. So I have huge black space at top of second tab. I have attached the JSfiddle link below. Let me know if you have any questions.
<div class="col-sm-12">
<h1>
My Heading
</h1>
<div class="panel panel-default">
<ul class="nav nav-tabs">
<li class="active">Info 1</li>
<li class="">Info 2</li>
</ul>
<div class="panel-body no-padding">
<div class="tab-content">
<form action="ACTION URL" method="PUT" id="idforthis" class="smart-form" novalidate="novalidate">
<div id="info1" class="tab-pane fade active in">
<fieldset>
<div class="col col-sm-4">
<section>
<label class="input">Name
<input type="text" name="name" value="">
</label>
</section>
<section>
<label class="input">Age
<input type="text" name="" value="">
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">Sex
<input type="text" name="address1" value="">
</label>
</section>
<section>
<label class="input">Location
<input type="text" name="address2" value="">
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">City
<input type="text" name="city" value="">
</label>
</section>
<section>
<label class="input">State
<input type="text" name="state" value="">
</label>
</section>
</div>
</fieldset>
</div>
<div id="info2" class="tab-pane fade">
<fieldset>
<div class="col col-sm-4">
<section>
<label class="input">Input 1 tab 2
<input type="text"/>
</label>
</section>
<section>
<label class="input">Input 2 tab 2
<input type="text"/>
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">Input 3 tab 2
<input type="text"/>
</label>
</section>
<section>
<label class="input">Input 3 tab 2
<input type="text"/>
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">Input 4 tab 2
<input type="text"/>
</label>
</section>
<section>
<label class="input">Last Input
<input type="text"/>
</label>
</section>
</div>
</fieldset>
</div>
<footer>
<button type="submit" class="btn btn-primary">Submit</button>
</footer>
</form>
</div>
</div>
</div>
JSFiddle for Bootstrap tab form
Here the problem is with the css. In bootstrap the css for tab is written as
.tab-content > .tab-pane {
display: none;
}
.tab-content > .active {
display: block;
}
here .tab-pane should be direct child (In your case it is form)
Inorder to solve you issue You should change ur css in bootstrap or you have to write in your custom.css like below :
.tab-content .tab-pane {
display: none;
}
.tab-content .active {
display: block;
}
The issue is caused by your use of fade and in on the tab-panes.
If you remove those and also reposition your form tag so that it is not an element inside tab-content then I think this is the result you are looking for.
<div class="panel panel-default">
<ul class="nav nav-tabs">
<li class="active">Info 1</li>
<li class="">Info 2</li>
</ul>
<div class="panel-body no-padding">
<form action="ACTION URL" method="PUT" id="idforthis" class="smart-form" novalidate="novalidate">
<div class="tab-content">
<div id="info1" class="tab-pane active">
<fieldset>
<div class="col col-sm-4">
<section>
<label class="input">Name
<input type="text" name="name" value="">
</label>
</section>
<section>
<label class="input">Age
<input type="text" name="" value="">
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">Sex
<input type="text" name="address1" value="">
</label>
</section>
<section>
<label class="input">Location
<input type="text" name="address2" value="">
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">City
<input type="text" name="city" value="">
</label>
</section>
<section>
<label class="input">State
<input type="text" name="state" value="">
</label>
</section>
</div>
</fieldset>
</div>
<div id="info2" class="tab-pane">
<fieldset>
<div class="col col-sm-4">
<section>
<label class="input">Input 1 tab 2
<input type="text"/>
</label>
</section>
<section>
<label class="input">Input 2 tab 2
<input type="text"/>
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">Input 3 tab 2
<input type="text"/>
</label>
</section>
<section>
<label class="input">Input 3 tab 2
<input type="text"/>
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">Input 4 tab 2
<input type="text"/>
</label>
</section>
<section>
<label class="input">Last Input
<input type="text"/>
</label>
</section>
</div>
</fieldset>
</div>
<footer>
<button type="submit" class="btn btn-primary">Submit</button>
</footer>
</div>
</form>
</div>
</div>
Updated JSFiddle
The content of tab1 is actually in tab2, it's just invisible - as you probably know from your question. On tab1, the content of tab2 is there too - meaning, you can see the space for it at the bottom.
Are you using the Javascript library needed for this to work?
https://getbootstrap.com/docs/3.3/components/
Using navs for tab panels requires JavaScript tabs plugin For tabs
with tabbable areas, you must use the tabs JavaScript plugin. The
markup will also require additional role and ARIA attributes – see the
plugin's example markup for further details.
and that links to: https://getbootstrap.com/docs/3.3/javascript/#tabs
Are you customizing any CSS or following Bootstrap to the T to test this?
Related
In the example below, I'm trying to show a specific div only when i check the radio button "yes".
It's ok for one div but when I try to do this for two separate panes, checking the second radio button also expands the first field.
How can I fold/unfold each container separately?
https://jsfiddle.net/vsf7mph8/3/
$('.row .otherRowinput').hide();
$('[type=radio]').on('change', function () {
if($('.form-radio input:nth-child(1)').val() == $(this).val() ||$('.form-radio input:nth-child(2)').val() == $(this).val())
$('.otherRowinput').toggle('fast');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="one">question A</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="one" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="one">
<i class="helper"></i>no
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control">
</textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="two">question B</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="two" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="two">
<i class="helper"></i>two
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control" required></textarea>
</div>
</div>
</div>
Your mistake is that $('.otherRowinput').toggle('fast'); applies to all text fields. However, you only want to apply it to the nearest text field.
For this, don't use the $(selector) function which applies to all objects in the DOM, but traverse the DOM starting from the checkbox that was modified. Starting from the currently checked box, traverse the DOM upwards until you find a common parent of the checkbox and the textarea, then traverse it downwards to the text area and toggle that.
You find the parent that includes both the checkbox and the text field with $(this).closest(selector). Then, starting from that parent object, select the text area that is a child of that element using find(selector). In total:
$(this).closest(".row").find(".otherRowinput").toggle('fast');
Below is your updated example.
$('.row .otherRowinput').hide();
$('[type=radio]').on('change', function () {
if($('.form-radio input:nth-child(1)').val() == $(this).val() ||
$('.form-radio input:nth-child(2)').val() == $(this).val()){
$(this).closest(".row").find(".otherRowinput").toggle('fast');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="one">question A</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="one" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="one">
<i class="helper"></i>no
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control">
</textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="two">question B</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="two" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="two">
<i class="helper"></i>two
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control" required></textarea>
</div>
</div>
</div>
I have a form of a prescription. I want to print out that prescription form while submit and also want a proper format in that printout page.
form html
<form role="form" class="registration-form" id="registration_form_id">
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Patient Information</h3>
</div>
<div class="form-top-right">
<i class="fa fa-user"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label for="form-first-name">Name</label>
<input type="text" name="form-first-name" placeholder="name" class="form-first-name form-control require" id="name">
</div>
<div class="form-group">
<label for="form-last-name">Age</label>
<input type="number" name="form-last-name" placeholder="Age" class="form-last-name form-control require" id="age" >
</div>
<div class="form-group">
<label for="form-last-name">Mobile Number</label>
<input type="number" name="form-last-name" placeholder="Mobile Number" class="form-last-name form-control require" id="mobile_number" >
</div>
<div class="form-group">
<label for="form-last-name">Religion</label>
<input type="text" name="form-last-name" placeholder="Religion" class="form-last-name form-control require" id="religion" >
</div>
<div class="form-group">
<label for="form-last-name">Occupation</label>
<input type="text" name="form-last-name" placeholder="Occupation" class="form-last-name form-control require" id="occupation" required>
</div>
<div class="form-group">
<h4>Gender</h4>
<div class="row">
<div class="col-md-4">
Male<input class="col-md-4" type="radio" name="gender" value="1">
</div>
<div class="col-md-4">
Female<input class="col-md-4" type="radio" name="gender" value="2">
</div>
<div class="col-md-4">
Other<input class="col-md-4" type="radio" name="gender" value="3">
</div>
</div>
</div>
<div class="form-group">
<h4>Marital status</h4>
<div class="row">
<div class="col-md-4">
Married<input type="radio" class="col-md-4" name="marital_status" value="1">
</div>
<div class="col-md-4">
Single<input type="radio" name="marital_status" class="col-md-4" value="1">
</div>
</div>
</div>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="form-about-yourself">Allergic history</label>
<textarea name="allergic_history" placeholder="Allergic history" class="form-about-yourself form-control " id="allergic_history" ></textarea>
</div>
<div class="form-group">
<label for="form-about-yourself">Personal history</label>
<textarea name="personal_history" placeholder="Personal history" class="form-about-yourself form-control " id="personal_history" ></textarea>
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn" id="prescription_form_submition">Submit!</button>
</fieldset>
printout code in js
var divToPrint = document.getElementById('registration_form_id');
newWin= window.open("");
newWin.document.write('<html><style>#media print{body {font-size:16px;} #patient_doctor_info{border-bottom:1px solid #ccc;overflow:hidden;padding:20px 0 10px 0;} #patient_doctor_info span{font-size:18px;} #patient_info{float:left;} #doctor_info{float:right;} #patient_prescription_info{padding:20px 0;overflow:hidden;} #patient_old_prescription{padding-right:5%;border-bottom:1px solid #000;} #patient_new_prescription{overflow:hidden;padding:0 20px;} .new_prescription{font-size : 20px}}</style><body onload="window.print()"><div id="patient_doctor_info"><div id="patient_info"><p><lable>Name :</lable><span><b>'+name+'</b></span></p><p><lable>Mobile Number :</lable><span><b>'+mobile_no+'</b></span></p><p><lable>Age :</lable><span><b>'+age+'</b></span></p><p><lable>Gender :</lable><span><b>'+sex+'</b></span></p></div><div id="patient_prescription_info"><div id="patient_old_prescription"><p><lable>Allergy :</lable><span><b>'+allergic_history+'</b></span></p><p><lable>Social History :</lable><span><b>'+personal_history+'</b></span></p></div></div></body></html>');
newWin.print();
newWin.close();
the print pagelooks like the below image
But I want like below image
So my main questions are.....
how to printout specific div or form value of a webpage using javascript.
How to apply css in that print page?
I have googling this issue several times but still not getting proper solution.
Anybody help please ?
I know this question has been asked and I've tried a few different methods but can't seem to get this to work. I'm trying to insert a div to extend a form based on a checkbox being ticked. Nothing seems to work at the moment. It's probably something stupid, I'd appreciate the assistance:
https://jsfiddle.net/4ydybrdd/#&togetherjs=qG3ypyIQsa
html:
<form method="post" autocomplete="off">
<div class="row resetpword">
<div class="container-fluid addblog"style="margin-
top:-40px;margin-bottom:20px;"><h2>Registration</h2></div>
<div class="container-fluid" style="margin-left:37px;">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off"
name="firstname" />
</div>
<div class="container-fluid" style="margin-left:35px;">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off"
name="lastname" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid" style="margin-left:10px;">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off"
name="email" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"
name="password"/>
</div>
</div>
<div class="container-fluid resetpword countrydropdown"
style="margin-top:0;margin-left:-15px;">
<label>
Country of origin<span class="req">*</span>
</label>
<select>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
</select>
</div>
<div class="container-fluid resetpword" style="margin-top:0;">
<label>
Are you a blogger?<span class="req">*</span>
</label>
<input type="checkbox" name="check1" id="blogger"/>
</div>
<div class="addblog"><p>sausage</p></div>
<button type="submit" class="resetb button button-block"
name="register">Register</button>
</form>
js:
jQuery("#blogger").click(function() {
if($(this).is(":checked")) {
jQuery(".addblog").show(300);
}
else {
jQuery(".addblog").hide(300);;
}
});
Post the js code after document.ready and don't forget to add jquery link
Updated fiddle
/*!
* can yo u solve my issue? :) I don't understand why it won't wor
*/
$(document).ready(function(){
jQuery("#blogger").change(function() {
if($(this).is(":checked")) {
jQuery(".addblog").show(300);
}
else {
jQuery(".addblog").hide(300);;
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" autocomplete="off">
<div class="row resetpword">
<div class="container-fluid addblog"style="margin-top:-40px;margin-bottom:20px;"><h2>Registration</h2></div>
<div class="container-fluid" style="margin-left:37px;">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" name="firstname" />
</div>
<div class="container-fluid" style="margin-left:35px;">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" name="lastname" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid" style="margin-left:10px;">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off" name="email" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off" name="password"/>
</div>
</div>
<div class="container-fluid resetpword countrydropdown" style="margin-top:0;margin-left:-15px;">
<label>
Country of origin<span class="req">*</span>
</label>
<select>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
</select>
</div>
<div class="container-fluid resetpword" style="margin-top:0;">
<label>
Are you a blogger?<span class="req">*</span>
</label>
<input type="checkbox" name="check1" id="blogger"/>
</div>
<div class="addblog"><p>sausage</p></div>
<button type="submit" class="resetb button button-block" name="register">Register</button>
</form>
looking at your example it seems that your were missing the jquery library as well as some html changes
you have user .addblog class name in two divs.so when you click on check box both divs get show and hide.so remove any one class or use different class name for new div to be inserted..
This is the code. Basically it adds a sign up form to the page:
var currentTime = new Date($.now())
$(panel).addClass('panel-logged-out')
//this -> $('.am-signup').html('<div class="am-info alert-box secondary">Please sign-in to your CLO account.</div><div class="am-popup" style="top: 596px; left: 0px;"> <div class="am-popup-header"> <div class="am-popup-title"></div></div><div class="am-popup-content"><div id="ajax-link" style="display: block;"><div class="am-layout-two-coll"> <div class="am-layout-two-coll-top"></div><div class="am-coll-left"> <div class="am-coll-content"> <div class="am-form am-login-form"> <form name="login" method="post" action="/amember/login"> <fieldset> <legend> Member Login </legend> <div class="_row" id="recaptcha-_row" style="display: none;" data-recaptcha-theme="red"> <div class="element-title" style="display:none;"></div><div class="element am-element-recaptcha" id="recaptcha-element"> </div></div><div class="_row"> <div class="element-title"> <label class="element-title" for="login"> E-Mail Address </label> </div><div class="element"> <input type="text" id="login" name="amember_login" size="15" value="" autofocus="autofocus"> </div></div><div class="_row"> <div class="element-title"> <label class="element-title" for="pass"> Password </label> </div><div class="element"> <input type="password" id="pass" name="amember_pass" size="15"> </div></div><div class="_row"> <div class="element-title"> <label class="element-title" for="remember"> Remember my password? </label> </div><div class="element"> <input type="checkbox" name="remember_login" value="1"> </div></div><div class="_row"> <div class="element"> <input class="button" type="submit" value="Login"> </div></div></fieldset> <input type="hidden" name="login_attempt_id" value="' + currentTime + '"><input type="hidden" name="amember_redirect_url" value="/amember/signup"> </form> </div></div></div><div class="am-coll-right"> <div class="am-coll-content"> <div class="am-form am-sendpass-form"> <form name="sendpass" method="post" action="/amember/sendpass"> <fieldset> <legend> Lost password?</legend> <div class="_row"> <div class="element-title"> <label for="sendpass"> Enter your E-Mail Address </label> </div><div class="element"> <input type="text" name="login" id="sendpass" size="15"> </div></div><div class="_row"> <div class="element"> <input class="button" type="submit" value="Get Password"> </div></div></fieldset> </form> </div></div></div><div class="am-layout-two-coll-bottom"></div></div></div></div></div>')
For some reason it makes the page scroll to the form, and the problem disappears if I comment the code out. What could be the problem?
This is the live site: http://www.chineselearnonline.com/amember/signup/fullcourse
EDIT:
Here's the formatted version of the commented code:
Not sure if it has something to do with it, though.
<div class="am-info alert-box secondary">Please sign-in to your CLO account.</div>
<div class="am-popup" style="top: 596px; left: 0px;">
<div class="am-popup-header">
<div class="am-popup-title"></div>
</div>
<div class="am-popup-content">
<div id="ajax-link" style="display: block;">
<div class="am-layout-two-coll">
<div class="am-layout-two-coll-top"></div>
<div class="am-coll-left">
<div class="am-coll-content">
<div class="am-form am-login-form">
<form name="login" method="post" action="/amember/login">
<fieldset>
<legend> Member Login </legend>
<div class="_row" id="recaptcha-_row" style="display: none;" data-recaptcha-theme="red">
<div class="element-title" style="display:none;"></div>
<div class="element am-element-recaptcha" id="recaptcha-element"> </div>
</div>
<div class="_row">
<div class="element-title">
<label class="element-title" for="login"> E-Mail Address </label>
</div>
<div class="element">
<input type="text" id="login" name="amember_login" size="15" value="" autofocus="autofocus"> </div>
</div>
<div class="_row">
<div class="element-title">
<label class="element-title" for="pass"> Password </label>
</div>
<div class="element">
<input type="password" id="pass" name="amember_pass" size="15"> </div>
</div>
<div class="_row">
<div class="element-title">
<label class="element-title" for="remember"> Remember my password? </label>
</div>
<div class="element">
<input type="checkbox" name="remember_login" value="1"> </div>
</div>
<div class="_row">
<div class="element">
<input class="button" type="submit" value="Login"> </div>
</div>
</fieldset>
<input type="hidden" name="login_attempt_id" value="' + currentTime + '">
<input type="hidden" name="amember_redirect_url" value="/amember/signup"> </form>
</div>
</div>
</div>
<div class="am-coll-right">
<div class="am-coll-content">
<div class="am-form am-sendpass-form">
<form name="sendpass" method="post" action="/amember/sendpass">
<fieldset>
<legend> Lost password?</legend>
<div class="_row">
<div class="element-title">
<label for="sendpass"> Enter your E-Mail Address </label>
</div>
<div class="element">
<input type="text" name="login" id="sendpass" size="15"> </div>
</div>
<div class="_row">
<div class="element">
<input class="button" type="submit" value="Get Password"> </div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="am-layout-two-coll-bottom"></div>
</div>
</div>
</div>
</div>
Autofocus?
If you put autofocus in the username input field, the browser makes autofocus inmediately
<input .... autofocus="autofocus">
Remove it and it works.
below is my code for my radio selection:
<div id="box" class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" id="ph">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
<div class="radio">
<label>
<input type="radio" id="anynum">Any number
</label>
<label>
<input type="radio" id="issuenum" >Issue number
</label>
</div>
<button class="btn btn-success" onclick="">Apply</button>
</div>
</div>
</div>
How do we have to do so that we can select only one option from the two?
Currently I can select both option.
Names should be same for radio buttons -
<div id="box" class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" id="ph">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
<div class="radio">
<label>
<input type="radio" name="anynum" id="anynum">Any number
</label>
<label>
<input type="radio" name="anynum" id="issuenum">Issue number
</label>
</div>
<button class="btn btn-success" onclick="">Apply</button>
</div>
</div>
Add the same name attribute to both the radio button
Edited:
<input type="radio" name="number">Any number
<input type="radio" name="number">Any other number
assign same name for both of the radio buttons
<label>
<input type="radio" name="name" id="anynum">Any number
<label>
<input type="radio" name="name" id="issuenum" >Issue number
When using radio button you should name them same for eg. in your case put
name="anynum" which will prevent you from selecting both the buttons
add name attribute to input tag and both your radio buttons should have same name value to make them a group like below
<div id="box" class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" id="ph">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
<div class="radio">
<label>
<input type="radio" id="anynum" name="group1">Any number
</label>
<label>
<input type="radio" id="issuenum" name="group1">Issue number
</label>
</div>
<button class="btn btn-success" onclick="">Apply</button>
</div>
</div>
</div>
When you clicks on a radio-button, it becomes checked,
and all other radio-buttons with equal name become unchecked
<div id="box" class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" id="ph">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
<div class="radio">
<div class="btn-group">
<label>
<input type="radio" id="anynum" name="any">Any number
</label>
<label>
<input type="radio" id="issuenum" name="any">Issue number
</label>
</div>
</div>
<button class="btn btn-success" onclick="">Apply</button>
</div>
</div>
</div>