I am trying to create three buttons horizontal and equal in size.
But what I managed to do so far is three buttons full width vertically as shown below.
<section class="section">
<div class="container-fluid">
...
<h2 class="display-5">User Management</h2>
<br>
<br>
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('create_user') }}">Create New User</a>
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('change_user_password') }}">Change User Password</a>
...
</div>
and the output is:
How can I make them horizontal and taking the full width?
Bootstrap comes with a very powerful Grid system that you can use, utilizing the classes row (for rows) and col (for columns) respectively.
The col class utilizes a number system of 1-12, indicating the size of the column in width. One entire row holds a max possible value of 12. How you choose your layout is entirely up to you. You can even nest the row and col classes as you wish to get the grid that you desire. More about Bootstrap Grid here.
Example:
<div class="row">
<div class="col-4">
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('create_user') }}">Create New User</a>
</div>
<div class="col-4">
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
</div>
<div class="col-4">
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('change_user_password') }}">Change User Password</a>
</div>
</div>
Code snippet example:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-4">
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('create_user') }}">Create New User</a>
</div>
<div class="col-4">
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
</div>
<div class="col-4">
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('change_user_password') }}">Change User Password</a>
</div>
</div>
Wrap them inside a div, you can remove the btn-block and add col class to take columns automatically, something like below :
<div class="row">
<a class="btn btn-info btn-lg col" role="button" href="{{ url_for('create_user') }}">Create New User</a>
<a class="btn btn-info btn-lg col" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
<a class="btn btn-info btn-lg col" role="button" href="{{ url_for('change_user_password') }}">Change User
Password</a>
</div>
Related
Dropdown element is working fine on desktop view but not on mobile view. Click and hover events are not working. What should I do, so them will work on mobile view. I am a new learner stuck with this problem, I tried to google it but couldn't find any solution.
<div class='dropdown-table'>
<button class='dropbtn dottedOpenOrders'>︙</button>
<div class='dropdown-content'>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-default btn-edit-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/edit-dropdown.png" /> </span><span>Edit</span></a>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-danger btn-close-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/cancel-dropdown.png" /> </span> <span>Cancel </span> </a>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-default btn-play-pause-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/pause-dropdown.png" /> </span> <span>Pause/Resume </span> </a>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-warning btn-exit-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/exit-dropdown.png" /> </span> <span>Force exit </span> </a>
</div>
</div>
I have a btn-group with some buttons, each of which will lead to a different page. The btn-group will be visible on every page.
Here is the html for the btn-group,
<div class="btn-group-lg text-center" role="group" aria-label="Basic example">
<a class="btn btn-outline-primary" href="" role="button">Home</a>
<a class="btn btn-outline-primary" href="view_schedule/" role="button">Schedule</a>
<a class="btn btn-outline-primary" href="view_syllabus/" role="button">Syllabus</a>
<a class="btn btn-outline-primary" href="view_records/" role="button">Records</a>
<a class="btn btn-outline-primary" href="view_achievements/" role="button">Achievements</a>
<a class="btn btn-outline-primary" href="view_gallery/" role="button">Gallery</a>
<a class="btn btn-outline-primary" href="view_contact/" role="button">Contact</a>
<a class="btn btn-outline-primary" href="about/" role="button">About Us</a>
</div>
But whenever I press a button, it modifies the URL in the address bar.
Example:- From http://127.0.0.1:8000/shotokankaratebd/, if I press the Schedule button, it changes the URL to http://127.0.0.1:8000/shotokankaratebd/view_schedule.
After that, if I press the schedule button again, it changes it to http://127.0.0.1:8000/shotokankaratebd/view_schedule/view_schedule which is an invalid URL and I get an error.
How can I write it so that whenever a button is pressed, only the part after http://127.0.0.1:8000/shotokankaratebd/ is affected?
EDITED to include the new hrefs:
<a class="btn btn-outline-primary" href="../shotokankaratebd/" role="button">Home</a>
<a class="btn btn-outline-primary" href="../shotokankaratebd/view_schedule/" role="button">Schedule</a>
<a class="btn btn-outline-primary" href="../shotokankaratebd/view_syllabus/" role="button">Syllabus</a>
<a class="btn btn-outline-primary" href="../shotokankaratebd/view_records/" role="button">Records</a>
<a class="btn btn-outline-primary" href="../shotokankaratebd/view_achievements/" role="button">Achievements</a>
<a class="btn btn-outline-primary" href="../shotokankaratebd/view_gallery/" role="button">Gallery</a>
<a class="btn btn-outline-primary" href="../shotokankaratebd/view_contact/" role="button">Contact</a>
<a class="btn btn-outline-primary" href="../shotokankaratebd/about/" role="button">About Us</a>
You should not hard code your urls. Use django's url template tag to fetch urls for your views.
If your urls are leading to another view or another app's view, you should use django feature of using dynamic urls.
For example if you have a view view_schedule, you should give it a name in urls.py like
urlpatterns = [
...
path('shotokankaratebd/view_schedule/', views.name_of_your_view, name=view_schedule),
...
]
and whenever and whichever template if you want to access this view you can just type
template.html
<button>Schedule</button>
instead of
class="btn btn-outline-primary" href="/shotokankaratebd/view_schedule/" role="button">Schedule</a>
Hard Coding it like that.
Solved.
All I needed to do was start my hrefs with / which would reset the url back to http://127.0.0.1:8000/ after every button click.
HTML buttons are as follows:
<div class="btn-group-lg text-center" role="group" aria-label="Basic example">
<a class="btn btn-outline-primary" href="/shotokankaratebd/" role="button">Home</a>
<a class="btn btn-outline-primary" href="/shotokankaratebd/view_schedule/" role="button">Schedule</a>
<a class="btn btn-outline-primary" href="/shotokankaratebd/view_syllabus/" role="button">Syllabus</a>
<a class="btn btn-outline-primary" href="/shotokankaratebd/view_records/" role="button">Records</a>
<a class="btn btn-outline-primary" href="/shotokankaratebd/view_achievements/" role="button">Achievements</a>
<a class="btn btn-outline-primary" href="/shotokankaratebd/view_gallery/" role="button">Gallery</a>
<a class="btn btn-outline-primary" href="/shotokankaratebd/view_contact/" role="button">Contact</a>
<a class="btn btn-outline-primary" href="/shotokankaratebd/about/" role="button">About Us</a>
</div>
I've been trying to get sortable to work with a bootstrap grid of buttons. It's a responsive design, with multiple rows containing 3 buttons each. I can turn on sortable on the overall container, which lets me drag and drop the buttons, but it does it for the whole row. I want to be able to select individual buttons and drag and drop them to other rows. I would think
$("buffer0,#buffer1,#buffer2").sortable({
connectWith: "#buffer0,#buffer1,#buffer2"
})
would work, but that doesn't allow for any dragging and dropping. I've created a fiddle that shows how this works. (resize the output screen so you can see the rows)
Really appreciate any insight, been staring at this for hours and don't know where do go.
https://jsfiddle.net/7yhkp9eo/2/
You can use:
items: specifies which items inside the element should be sortable.
and
tolerance: specifies which mode to use for testing whether the item being moved is hovering over another item. Possible values.
$("#list_content").sortable({
tolerance: "pointer",
items: ".col-sm-4"
});
$("#list_content").disableSelection();
#import url('//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="list_content">
<div id="buffer0" class="row top-buffer">
<div id="row0" class="col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div class="col-sm-4">
<a link-type="c" href="#0,1" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T11</a>
</div>
<div class="col-sm-4">
<a link-type="c" href="#0,2" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T12</a>
</div>
<div class="col-sm-4">
<a link-type="c" href="#0,3" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T13</a>
</div>
</div>
</div>
<div id="buffer1" class="row top-buffer">
<div id="row1" class="col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div class="col-sm-4">
<a link-type="c" href="#0,4" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T21</a>
</div>
<div class="col-sm-4">
<a link-type="c" href="#0,5" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T22</a>
</div>
<div class="col-sm-4">
<a link-type="c" href="#0,6" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T23</a>
</div>
</div>
</div>
<div id="buffer2" class="row top-buffer">
<div id="row2" class="col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div class="col-sm-4">
<a link-type="c" href="#0,7" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T31</a>
</div>
<div class="col-sm-4">
<a link-type="c" href="#0,8" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T32</a>
</div>
<div class="col-sm-4">
<a link-type="c" href="#0,9" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T33</a>
</div>
</div>
</div>
</div>
The main idea:
Vertical buttons group list where each button fully fills parent by itself.
Problem:
split button dropdown don't do what I need. Adding .btn-block to button/button-group didn't resolve problem (dropdown moves to new line as separated button).
What I have:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group">
<button type="button" class="btn btn-info">
Button 1
</button>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
1
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 2
</button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 3
</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Problem:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group btn-block">
<button type="button" class="btn btn-block btn-info">
Button 1
</button>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
1
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 2
</button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 3
</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
What need to do, to solve problem with splitted dropdown button? Like that:
You can do it by adding btn-block to the btn group. and also to the button itself. but it will move the menu opener to a new line. so I made a little trick you can see here:
jsfiddle.net/u753bbsg/
I have wrote a jQuery to change the button colour to red when some one clicks on it. But that is only work with the first panel but its not working for the rest of the panels. In the first set of button it works but not only for everything. This is the jQuery part.
function DurationOnClick(element){
var buttonId = element.id;
var buttonName = element.name;
var buttonIds = ["1Hour", "30Min", "1Day" , "1Week", "1Month"];
var chartType = $('#chartType').val();
var idValue = $('#IdValue').val();
//after user click the option here we are changing the option black to red.
$(buttonIds).each(function(i, e) {
$('#'+e+'[name='+buttonName+']').css("color", "");
});
$('#'+buttonId+'[name='+buttonName+']').css("color", "Blue"); `
The html code is like this :
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Memory Consumption Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="30Min" onclick="return DurationOnClick(this)">30 mins</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Hour" style="color:Red" onclick="return DurationOnClick(this)">1 hour</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Day" onclick="return DurationOnClick(this)">1 day</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Week" onclick="return DurationOnClick(this)">1 week</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Month" onclick="return DurationOnClick(this)">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart3">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Load Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs" name="LoadAverage" id="30Min" onclick="return DurationOnClick(this)">30 mins</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Hour" style="color:Red" onclick="return DurationOnClick(this)">1 hour</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Day" onclick="return DurationOnClick(this)">1 day</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Week" onclick="return DurationOnClick(this)">1 week</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Month" onclick="return DurationOnClick(this)">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart2">
</div>
</div>
</div>
</div>
</div>
</div>
After removing the first panel the colour changing will happen for the next immediate chart but the charts below that one the changing colour is not happening. Any help to figure out the issue will be really appreciated.
Please use the below code. This will work perfect with your case:-
function DurationOnClick(ref) {
var buttonName = $(ref).attr("name");
$("button[name=" + buttonName + "]").each(function () {
$(this).css("color", "");
});
$(ref).css("color", "Blue");
}
As already explained the problem is you have duplicate IDs, the id-selector will select only the first element with the id so your code will always select the first set of elements.
But a more jQuery-ish solution will be use jQuery event handlers along with class(duration) to group them like
$('button.duration').click(function() {
$(this).addClass('selected').siblings('.selected').removeClass('selected');
})
.btn.btn-default.selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Memory Consumption Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="30Min">30 mins</button>
<button class="btn btn-default btn-xs duration selected" name="MemoryConsumption" data-id="1Hour">1 hour</button>
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Day">1 day</button>
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Week">1 week</button>
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Month">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart3">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Load Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="30Min">30 mins</button>
<button class="btn btn-default btn-xs duration selected" name="LoadAverage" data-id="1Hour">1 hour</button>
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Day">1 day</button>
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Week">1 week</button>
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Month">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart2">
</div>
</div>
</div>
</div>
</div>
</div>
You have duplicated ID. Your code is ok, but you did it wrong.
id attribute is considered unique.
classattribute is considered multiple.
You have put several same id, but CSS and JS are looking only for ONE, so they process the first (only) and leave.
Change id to class.
Example: class="30mins" will turn redall the "30mins" buttons.
Do it for every group you want to turn red on click.
You should not have duplicate ID in the HTML form. Consider using the first set of IDs only.
Apparently you cant have numbers as the first character of an ID or class for your css to apply. If you#re applying style to your 30min 1hour etc, you should consider renaming them. I'm not sure if this conflicts with JS as well. See this example:
<div class="char">char</div>
<div class="char1">char1</div>
<div class="1char">1char</div>
<div class="1111">1111</div>
JSFiddle