I'm new to ASP programming and web development.
I'm using Twitter Bootstrap 3 on a new project.
Using the above html code:
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="options" id="option1">
<i class="fa fa-user"></i>.Para mim
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" onclick="paraEmpresa()">
<i class="fa fa-briefcase"></i>.Para minha empresa
</label>
</div>
I got a two buttons to work like radio, like these:
The question is: how can I make the same using ASP.net elements?
Note: I don't know the terms to do the proper search. RADIO BUTTONS are rounded, but I can't figure how radio button REAL buttons are called. Appreciate the help.
I think this is what you need
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default active">
<asp:RadioButton id="option1" runat="server" GroupName="options"></asp:RadioButton>
<i class="fa fa-user"></i>.Para mim
</label>
<label class="btn btn-default">
<asp:RadioButton id="option2" runat="server" GroupName="options" ></asp:RadioButton>
<i class="fa fa-briefcase"></i>.Para minha empresa
</label>
</div>
Related
I have a btn-group which I'd like to separate while maintaining the same group. Currently, although initially the group displays as expected, once I select the button from the other side ('Exclude'), I can't deselect it - the two halves seem to be behaving as two groups.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://bootswatch.com/3/cerulean/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9 btn-toolbar" role="toolbar">
<div class="btn-group" data-toggle="buttons" role="group">
<label class="btn btn-warning">
<input type="radio" class="reason" name="reason" id="off" value="None" autocomplete="off"> Exclude
</label>
</div>
<div class="btn-group" data-toggle="buttons" role="group">
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="war" value="War" autocomplete="off"> War
</label>
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="peace" value="Peace" autocomplete="off"> Peace
</label>
<label class="btn btn-default active">
<input type="radio" class="reason" name="reason" id="both" value="Both" autocomplete="off" checked> Both
</label>
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="total" value="Total" autocomplete="off"> Total
</label>
</div>
</div>
JSFiddle
I don't think you can separate the divs like that. I think the easiest solution is just to add a bit of margin on the "special" button:
<link href="https://bootswatch.com/3/cerulean/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div class="col-md-9 btn-toolbar" role="toolbar">
<div class="btn-group" data-toggle="buttons" role="group">
<label class="btn btn-warning" style="margin-right: 10pt;">
<input type="radio" class="reason" name="reason" id="off" value="None" autocomplete="off">
Exclude
</label>
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="used" value="War" autocomplete="off">
War
</label>
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="off" value="Peace" autocomplete="off">
Peace
</label>
<label class="btn btn-default active">
<input type="radio" class="reason" name="reason" id="both" value="Both" autocomplete="off" checked>
Both
</label>
<label class="btn btn-default">
<input type="radio" class="reason" name="reason" id="total" value="Total" autocomplete="off" >
Total
</label>
</div>
</div>
The issue here is that bootstrap applies the styling to the buttons based on the active class, which is applied to the label via Javascript. So the radio buttons are actually selected and unselected correctly, it's just hidden by the styling.
Here's two ways of working around this:
Using HTML & CSS:
Combine the buttons into a single button-group with an id of custom-group and add the following css.
#custom-group label:first-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
margin-right: 10px;
}
#custom-group label:nth-of-type(2) {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
Similar to the answer by kabanus, this will make the single button group look like two.
Using Javascript
Leave the HTML as is and add the following javascript:
var labels = document.querySelectorAll('label');
labels.forEach(function(label) {
label.addEventListener('click',function() {
labels.forEach(function(l) {
l.classList.remove('active');
});
label.classList.add('active');
});
})
This will 'manually' remove the active class from all the buttons and just add it to the one you just clicked. Make sure to tweak the selector for the labels so it doesn't affect other code on your page.
Here's a fiddle: https://jsfiddle.net/22et5z3h/4/
So I have 2 buttons but one of them is in a form and is displayed on a new line. Can I align the two buttons in a line without moving the reply button inside the form?
<button class="btn btn-primary btn-xs" data-toggle="collapse"><span class="glyphicon glyphicon-message-forward"></span> Reply</button>
<form action="" method="post">
<input type="hidden" name="comment_id" value="">
<button name="delete" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Delete</button>
</form>
you can add pull-left to the top button to float that button and the inline content in the form will wrap beside it.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button class="pull-left btn btn-primary btn-xs" data-toggle="collapse"><span class="glyphicon glyphicon-message-forward"></span> Reply</button>
<form action="" method="post">
<input type="hidden" name="comment_id" value="">
<button name="delete" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Delete</button>
</form>
Use display:inline in reply button and display: inline-block; in form.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<button class="btn btn-primary btn-xs" data-toggle="collapse" style="display: inline;">
<span class="glyphicon glyphicon-message-forward"></span> Reply</button>
<form action="" method="post" style="display: inline-block;">
<input type="hidden" name="comment_id" value="">
<button name="delete" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Delete</button>
</form>
I am using a Bootstrap Template (INSPINIA), and integrating it with PHP.
All of the sample data structures use buttons, but to make these interact with the server I need to change them to a submit and wrap them in a form.
Can I best retain the original bootstrap styling of a button, but gain the functionality of a form submit without having to amend bootstraps own CSS?
Original Bootstrap code:
<div class="input-group">
<input type="text" placeholder="Add new task. " class="input input-sm form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
</span>
</div>
What I have ended up with:
<div class="input-group">
<form action="index.php" method="post">
<span class="input-group-btn">
<input type="text" placeholder="Add new task. " name="ToDo" class="input input-sm form-control">
<input type="submit" class="btn btn-sm btn-white" value="Add Task" name="addToDo" />
</span>
</form>
</div>
The above code doesn't look the same and shows some odd behaviour on smaller devices.
You can just change the type of the button to submit, and you're good to go:
<div class="input-group">
<input type="text" placeholder="Add new task. " class="input input-sm form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
</span>
</div>
You have to add the form tag outside input-group to keep the styling:
<form action="index.php" method="post">
<div class="input-group">
<input type="text" placeholder="Add new task. " class="input input-sm form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
</span>
</div>
</form>
I'm attempting to have a glyphicon inside of the input field but for some reason it's outside of text box.
<!-- Panel -->
<div class="panel panel-default hidden-xs">
<div class="row">
<div class="col-sm-5 col-sm-offset-1">
<form>
<p><strong>Enter your number and we'll text you a link</strong></p>
<label class="sr-only">Phone Number</label>
<input class="form-control phone-txt" type="text" placeholder="Phone Number">
<button class="btn btn-submit" type="submit">
<span class="glyphicon glyphicon-arrow-right"></span>
</button>
</form>
</div>
<div class="col-sm-5">
<p><strong>Or visit an app store to download now!</strong></p>
<a class="btn btn-default btn-lg" href="#">iOS</a>
<a class="btn btn-default btn-lg" href="#">Android</a>
</div>
</div>
</div><!-- End panel -->
It looks like you have that glyphicon attached to the button. You might try something like this...
<input type="text" class="form-control phone-txt" placeholder="Phone Number" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-arrow-right"></span></span>
I'm using Bootstrap 3 and I want to make two buttons work as Radio Buttons, but I can't figure out how. Here goes my code
<div class="btn-group" >
<div class="btn-group">
<button type="button" class="btn btn-default">
PERSONAL
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
COMPANY
</button>
</div>
</div>
When I select PERSONAL, the other one is deselected (as it should), but the problem is:
None of them are active when the form is started
I can deselect both clicking out of the form
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
And initialize with js after:
Enable buttons via JavaScript:
$('.btn').button()
You can make one of it active adding "active" class to label - "btn btn-primary active" and "checked" to input radio.
I think that there is a better solution nowadays, according to the Bootstrap docs:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>