I am trying to implement a simple interface where I've got a series of buttons (checkboxes) which are part of a group.
I would like to split the groups so I can only have 3 per row max.
<div class="container">
<div class="control-group">
<p class="pull-left"><label class="control-label" for="Languages">Lingue</label></p>
<div class="controls">
<div class="btn-group btn-group-horizontal" data-toggle="buttons-checkbox">
<input type="checkbox" value="1" id="Languages_0" name="Languages" checked />
<label class="btn btn-info btn-small active" for="Languages_0">Italiano</label>
<input type="checkbox" value="2" id="Languages_1" name="Languages" checked />
<label class="btn btn-info btn-small active" for="Languages_1">Francese</label>
<input type="checkbox" value="3" id="Languages_2" name="Languages" checked />
<label class="btn btn-info btn-small active" for="Languages_2">Inglese</label>
<input type="checkbox" value="4" id="Languages_3" name="Languages" />
<label class="btn btn-info btn-small " for="Languages_3">Spagnolo</label>
<input type="checkbox" value="5" id="Languages_4" name="Languages" />
<label class="btn btn-info btn-small " for="Languages_4">Tedesco</label>
<input type="checkbox" value="6" id="Languages_5" name="Languages" />
<label class="btn btn-info btn-small " for="Languages_5">Portoghese</label>
<input type="checkbox" value="7" id="Languages_6" name="Languages" />
<label class="btn btn-info btn-small " for="Languages_6">Bulgaro</label>
<input type="checkbox" value="8" id="Languages_7" name="Languages" />
<label class="btn btn-info btn-small " for="Languages_7">Lettone</label>
</div>
</div>
</div>
</div>
I've tried to put span3 everywhere but it seems to work only in IE.
You can see the fiddle here.
You need to break up each group of three checkboxes/labels and put them in their own div with the class name controls.
<div class="container">
<div class="control-group">
<p class="pull-left">
<label class="control-label" for="Languages">Lingue</label>
</p>
<div class="controls">
<div class="btn-group btn-group-horizontal" data-toggle="buttons-checkbox">
<input type="checkbox" value="1" id="Languages_0" name="Languages" checked
/>
<label class="btn btn-info btn-small active" for="Languages_0">Italiano</label>
<input type="checkbox" value="2" id="Languages_1" name="Languages"
checked />
<label class="btn btn-info btn-small active" for="Languages_1">Francese</label>
<input type="checkbox" value="3" id="Languages_2" name="Languages"
checked />
<label class="btn btn-info btn-small active" for="Languages_2">Inglese</label>/></div>
</div>
<div class="controls">
<div class="btn-group btn-group-horizontal" data-toggle="buttons-checkbox">
<input type="checkbox" value="4" id="Languages_3" name="Languages" />
<label class="btn btn-info btn-small " for="Languages_3">Spagnolo</label>
<input type="checkbox" value="5" id="Languages_4" name="Languages"
/>
<label class="btn btn-info btn-small " for="Languages_4">Tedesco</label>
<input type="checkbox" value="6" id="Languages_5" name="Languages"
/>
<label class="btn btn-info btn-small " for="Languages_5">Portoghese</label>
</div>
</div>
<div class="controls">
<div class="btn-group btn-group-horizontal" data-toggle="buttons-checkbox">
<input type="checkbox" value="7" id="Languages_6" name="Languages" />
<label class="btn btn-info btn-small " for="Languages_6">Bulgaro</label>
<input type="checkbox" value="8" id="Languages_7" name="Languages"
/>
<label class="btn btn-info btn-small " for="Languages_7">Lettone</label>
</div>
</div>
</div>
</div>
Here's a working example on jsFiddle.
Related
I want to redirect to the online payment page or wallet payment page by selecting the radio button and then clicking Buy Now Button. the form will also submit when I click the buy now button.
<form name="game-form" action="submit" method="POST">
#csrf
<div class="timeline-wrapper">
<ul class="StepProgress">
<li class="StepProgress-item is-done">
<div class="bold time">STEP 1</div>
<div class="bold"><h5>Account Login</h5></div>
<div class="form-group account-type">
<select class="form-control " style="width: 100%">
<option>Default select</option>
<option value="">Gmail</option>
<option value="">Facebook</option>
</select>
<label for="exampleInputEmail1">Email Address / Facebook Number</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email/number">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</li>
<li class="StepProgress-item is-done">
<div class="bold time">Step 2</div>
<div class="bold">
<h5>Select Recharge</h5>
</div>
<div class="form-group recharge-type">
#foreach ($games as $row)
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Weekly <sup>BDT {{$row['g1']}}</sup> </label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio2">Monthly <sup>BDT {{$row['g2']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio3">100 Diamond <sup>BDT {{$row['g3']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio4" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio4">200 Diamond <sup>BDT {{$row['g4']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio5" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio5">310 Diamond <sup>BDT {{$row['g5']}}</sup> </label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio6" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio6">520 Diamond <sup>BDT {{$row['g6']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio7" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio7">620 Diamond <sup>BDT {{$row['g7']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio8" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio8">830 Diamond <sup>BDT {{$row['g8']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio9" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio9">1060 Diamond <sup>BDT {{$row['g9']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio10" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio10">2180 Diamond <sup>BDT {{$row['g10']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio11" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio11">5600 Diamond <sup>BDT {{$row['g11']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio12" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio12">$0.99 Aidrop <sup>BDT {{$row['g12']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio13" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio13">$1.99 Airdrop <sup>BDT {{$row['g13']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio14" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio14">$2.99 Airdrop <sup>BDT {{$row['g14']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio15" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio15">Level Up Pass <sup>BDT {{$row['g15']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio16" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio16">Bundle Pass <sup>BDT {{$row['g16']}}</sup></label>
</div>
#endforeach
</div>
</div>
</li>
<li class="StepProgress-item is-done">
<div class="bold time">Step 3</div>
<div class="bold">
<h5>Payment Methods</h5>
</div>
<div class="form-group payment-type">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<i class="fas fa-wallet fa-3x"></i>
<label class="form-check-label" for="inlineRadio1">GAMERSHOBBD</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<i class="fas fa-money-check-alt fa-3x"></i>
<label class="form-check-label" for="inlineRadio2">OtherPayment</label>
</div>
</div>
</li>
</ul>
</div>
<div class="buy-btn">
<button id="top-account-submit" type="submit" class="btn btn-primary btn-lg">Buy Now</button>
</div>
</form>
This is an order page, where people will fillup the form then select the product then select the payment type.
This page will take data to the database then show those data to the next page, which will be wallet payment or online payment. I am new to Laravel. it will very helpful if anyone can give the solution.
You can do with inline js as :
<select class="form-control " style="width: 100%" onchange="this.form.submit()">
...
</select>
Or with JQuery :
$('form select').on('change', function(){
$(this).closest('form').submit();
});
I'm trying to Payment Remaining add a new line, but Payment Remaining not come to the new line.
I want to add the last text in a new line Payment Remaining
#authorization-wizard-start-work .btn-group label.active {
color: #0094ff;
}
#authorization-wizard-start-work .btn-group label.active {
color: #0094ff;
}
<main class="col-4 text-right pt-3">
<div class="dropdown">
<i class="fal fa-sliders-h mr-2"></i> Filters
<div class="dropdown-menu p-3 listing-filter">
<div class="text-center">
<div class="btn-group btn-group-toggle">
<label class="btn btn-white btn-sm btn-xs">
<input type="checkbox" class="custom-control-input" name="filter-auth-status" value="0">
Payment New
</label>
<label class="btn btn-white btn-sm btn-xs">
<input type="checkbox" class="custom-control-input" name="filter-auth-status" value="100">
Payment In Progress
</label>
<label class="btn btn-white btn-sm btn-xs">
<input type="checkbox" class="custom-control-input" name="filter-auth-status" value="99999">
Payment Deleted
</label>
<label class="btn btn-white btn-sm btn-xs">
<input type="checkbox" class="custom-control-input" name="filter-auth-status" value="900">
Payment Authorized
</label>
<label class="btn btn-white btn-sm btn-xs">
<input type="checkbox" class="custom-control-input" name="filter-auth-status" value="200">
Payment Submission
</label>
<label class="btn btn-white btn-sm btn-xs">
<input type="checkbox" class="custom-control-input" name="filter-auth-status" value="300">
Payment Remaining
</label>
</div>
</div>
</div>
</div>
</main>
simply use br tag before Payment Remaining label tag
There are a few issues with your code. You shouldn't be putting the input inside the label and to get each input label pair to have combined CSS, you should child them to a shared class.
See this simple example:
#authorization-wizard-start-work .btn-group label.active {
color: #0094ff;
}
#authorization-wizard-start-work .btn-group label.active {
color: #0094ff;
}
.field {
display: inline-block;
}
.field:last-child {
display: block;
}
<div class="btn-group btn-group-toggle">
<div class="field">
<label class="btn btn-white btn-sm btn-xs"> Payment 1</label>
<input type="checkbox" class="custom-control-input" name="filter-auth-status" value="0">
</div>
<div class="field">
<label class="btn btn-white btn-sm btn-xs"> Payment 2</label>
<input type="checkbox" class="custom-control-input" name="filter-auth-status" value="0">
</div>
<div class="field">
<label class="btn btn-white btn-sm btn-xs"> Payment 3</label>
<input type="checkbox" class="custom-control-input" name="filter-auth-status" value="0">
</div>
<div class="field">
<label class="btn btn-white btn-sm btn-xs"> Payment last</label>
<input type="checkbox" class="custom-control-input" name="filter-auth-status" value="0">
</div>
</div>
How do I separate two radio button groups ? Each line have to be checked separately, see in the example below :
<div id="group1" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input id="emViewMacsButton" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton" name="options" type="radio">Settings
</label>
</div>
<div id="group2" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input id="emViewMacsButton2" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton2" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton2" name="options" type="radio">Settings
</label>
</div>
https://jsfiddle.net/vzn6x7z6/
Thanks
You need to separate your groups with <fieldset> , and also you need to wrap it in <form>, and finally to work as you want you need to change name for second group from name="option" to name="optionOne" or something.
updated jsFiddle
<form>
<fieldset>
<div id="group1" class="btn-group" data-toggle="buttons">
<input id="emViewMacsButton" name="options" type="radio">
<label class="btn btn-primary">MAC</label>
<input id="emViewTagsButton" name="options" type="radio">
<label class="btn btn-primary">Tags</label>
<input id="emViewSettingsButton" name="options" type="radio">
<label class="btn btn-primary">Settings</label>
</div>
</fieldset>
<fieldset>
<div id="group2" class="btn-group" data-toggle="buttons">
<input id="emViewMacsButton2" name="options1" type="radio">
<label class="btn btn-primary">MAC</label>
<input id="emViewTagsButton2" name="options1" type="radio">
<label class="btn btn-primary">Tags</label>
<input id="emViewSettingsButton2" name="options1" type="radio">
<label class="btn btn-primary">Settings</label>
</div>
</fieldset>
</form>
Also match for attribute of label with input ID, and move input outside of label. Everything is updated in code above except for attributes.
Put them in 2 separate fieldsets instead of a div and it should work:
<fieldset>
<label class="btn btn-primary">
<input id="emViewMacsButton" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton" name="options" type="radio">Settings
</label>
</fieldset>
<fieldset>
<label class="btn btn-primary">
<input id="emViewMacsButton2" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton2" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton2" name="options" type="radio">Settings
</label>
</fieldset>
I'm trying to make these radio buttons clickable in the browser. I found an example at this link here but the same implementation isn't working in my browser, nor here in the snippet. The change color when moused over, and get darker again when depress, but they don't retain that information or display a check mark like they do in the example I found.
What's missing here?
.btn span.glyphicon {
opacity: 0;
}
.btn.active span.glyphicon {
opacity: 1;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="well well-sm text-center">
<h3>Radio</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success" for="option1" active">
<input type="radio" name="options" id="option1" autocomplete="off" chacked>
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-primary" for="option2">
<input type="radio" name="options" id="option2" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-info" for="option3">
<input type="radio" name="options" id="option3" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-default" for="option4">
<input type="radio" name="options" id="option4" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-warning" for="option5">
<input type="radio" name="options" id="option5" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-danger" for="option6">
<input type="radio" name="options" id="option6" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>
</div>
</div>
you didnt have the bootstrap js file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
.btn span.glyphicon {
opacity: 0;
}
.btn.active span.glyphicon {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1 class="text-center">Checkbox/Radio - CSS Only</h1>
</div>
<div class="container">
<div class="well well-sm text-center">
<h3>Checkbox</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success active">
<input type="checkbox" autocomplete="off" checked />
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-info">
<input type="checkbox" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-default">
<input type="checkbox" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-warning">
<input type="checkbox" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-danger">
<input type="checkbox" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>
</div>
</div>
<div class="container">
<div class="well well-sm text-center">
<h3>Radio</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success active">
<input type="radio" name="options" id="option2" autocomplete="off" chacked/>
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option1" autocomplete="off"/>
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-info">
<input type="radio" name="options" id="option2" autocomplete="off"/>
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off"/>
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-warning">
<input type="radio" name="options" id="option2" autocomplete="off"/>
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-danger">
<input type="radio" name="options" id="option2" autocomplete="off"/>
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>
</div>
</div>
Its a class of btn-group which requires the javascript to be imported as well. It is basically this with style.
I have a set of buttons that form a selection as part of my form.
The code is below:
<div class="form-group">
<div>
<h4>Extras</h4>
</div>
<div class="radio-inline">
<input type="button" class="btn btn-default inline" name="extra" value="Garden" >
<input type="button" class="btn btn-default inline" name="extra" value="Balcony">
<input type="button" class="btn btn-default inline" name="extra" value="Parking">
</div>
</div>
However, I want to make the options not mutually exclusive i.e. you can select both 'Garden' and 'Balcony' - and I'd like to retain the button styling.
Can anyone help with this?
EDIT: Ok - got something weird going on now - Got this code.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" name="garden" checked=""> Garden
</label>
<label class="btn btn-default">
<input type="checkbox"> Balcony
</label>
<label class="btn btn-default">
<input type="checkbox"> Parking
</label>
</div>
When I use bootply the multiple selection user feature works great - when I add it to my page - its not working - does anyone have any idea why it may be? Below is the whole page
<div class="container">
<div class="row">
<div class="col-md-12"><h2>This is the header</h2></div>
</div>
<div class="row">
<div class="col-md-8">
<h2>Hello world!</h2>
<form d="multiform" role="form" action="listing.php" method="post" enctype="multipart/form-data">
<div><h4>Listing Type</h4></div>
<div class="radio">
<input type="button" class="btn btn-default" value="For Sale" >
<input type="button" class="btn btn-default inline" name="list_type" value="For Rent">
<input type="button" class="btn btn-default inline" name="list_type" value="Flat Share">
</div>
<div class="form-group">
<label for="text">Title</label>
<input class= "form-control" type="text" name="text">
</div>
<div class="form-group">
<label for="desc">Description</label>
<textarea class= "form-control" name="desc" rows="5"></textarea>
</div>
<!nested columns in the first one!>
<div class="col-md-6">
<div class="form-group">
<label for="total_beds">Total Bedrooms</label>
<select class="form-control" name="total_beds">
<option>Total Bedrooms</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="pets">Pets</label>
<select class="form-control" name="pets">
<option>Pets OK?</option>
<option>Yes</option>
<option>No</option>
</select>
</div>
<p>This is another p</p>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="postcode">Postcode (for Maps)</label>
<input type="text" class="form-control" name="postcode" placeholder="Post Code">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<div><h4>Extras</h4>
<div class="checkbox">
<input type="button" class="btn btn-default inline" name="extra" value="Garden" >
<input type="button" class="btn btn-default inline" name="extra" value="Balcony">
<input type="button" class="btn btn-default inline" name="extra" value="Parking">
</div>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" name="garden" checked=""> Garden
</label>
<label class="btn btn-default">
<input type="checkbox"> Balcony
</label>
<label class="btn btn-default">
<input type="checkbox"> Parking
</label>
</div>
</div>
</form>
</div>
<div class="col-md-4">Hello world Right! </div>
</div><! closes container!>
See the JavaScript buttons section of the Bootstrap documentation, and look at checkbox buttons:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked> Option 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 3
</label>
</div>