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>
Related
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>
I have a view and there is a button in this page. When I click that button I can get a parameter (#say_note.ID). But I want to get this parameter in javascript without click button.
My View :
#foreach (Note say_note in Model)
{
<div class="col-lg-12" data-note-id="#say_note.ID">
<div class="card h-100">
<div class="card-body">
<h4 class="card-title">
<a href="/Home/ByNote/#say_note.ID">
#say_note.Tittle
</a>
</h4>
<h6 class="text-right">
<h7>#say_note.Owner.Username</h7><i class="fas fa-user"></i><br />
<h7> #say_note.ModifiedOn.ToString("dd.MM.yyyy")</h7><i class="far fa-clock"></i>
</h6>
<p class="card-text">
#say_note.Text
</p>
</div>
<div class="card-footer">
<p>
<button data-toggle="collapse" data-target="#collapse_CommentPopup" data-note-id="#say_note.ID" class="btn btn-sm btn-outline-secondary float-md-right">
<i class="fas fa-comment-alt"></i> Yorumlar
</button>
<button class="btn btn-sm btn-outline-secondary float-sm-left" type="button" data-liked-button="false" data-note-id="#say_note.ID">
<span class="far fa-star like-star"></span> <span class="like-count"> #say_note.LikeCount</span>
</button>
<div class="text-right dateAndName float-sm-rigth">
<a class="bottomNav" onclick="history.go(-1); return false;" href="#"> Geri </a><br />
</div>
</p>
</div>
</div>
</div>
}
</div>
My Javascript:
$("#collapse_CommentPopup").collapse("toggle")
$("#collapse_CommentPopup_bodyPopup").load("/Comment/ShowNoteComments/" + #say_note.ID);
});
collapse_CommentPopup my collapse modal and I fill data this collapse with javascript
I solved my own question , maybe someone can use it other time
MyButton :
<button data-toggle="collapse" id="CommentButton" data-target="#collapse_CommentPopup" data-note-id="#say_note.ID" class="btn btn-sm btn-outline-secondary float-md-right">
<i class="fas fa-comment-alt"></i> Yorumlar
</button>
My Javascript:
$(function () {
$("#collapse_CommentPopup").collapse("toggle") //ModelCommentPopup isimli nesne show olduğunda (popup event'i yakaladık)
var NoteId = $("#CommentButton").data("note-id");
$("#collapse_CommentPopup_bodyPopup").load("/Comment/ShowNoteComments/" + NoteId); //ShowNoteComments metodunu çalıştır ve dönen partialı popup'ın bodysine yükle
});
When I type in my textarea once has dected more than 4 characters it enables the preview tab.
If I click on my editor buttons example the button-bold it shows text like **strong text** but even though there is more than 4 characters preview tab does not enabled.
Currently It only enabled when keyup
Question: How can I make sure if I click on a editor button it will
dected how many characters and if greater than 4 will enable tab.
CodePen Example Demo
$('#tab-preview').hide();
$("#textarea_message").on('keyup', function(e){
if ($(this).val().length >= "4") {
$('#tab-preview').show();
}
if ($(this).val().length < "4") {
$('#tab-preview').hide();
}
});
HTML
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<form id="form-ask">
<div class="form-group">
<button type="button" id="button-bold" class="btn btn-default" title="Bold"><i class="fa fa-bold" aria-hidden="true"></i></button>
<button type="button" id="button-italic" class="btn btn-default" title="Italic"><i class="fa fa-italic" aria-hidden="true"></i></button>
<button type="button" id="button-quote" class="btn btn-default" title="Quote"><i class="fa fa-quote-left" aria-hidden="true"></i></button>
<button type="button" id="button-code" class="btn btn-default" title="Code"><i class="fa fa-quote-left" aria-hidden="true"></i></button>
<button type="button" id="button-insert-image" data-toggle="modal" data-target="#insert-image" class="btn btn-default" title="Insert Image URL"><i class="fa fa-code" aria-hidden="true"></i>
</button>
<button type="button" id="button-upload" class="btn btn-default" title="Add Attachment: This can be image or file "><i class="fa fa-file" aria-hidden="true"></i>
Attach File</button>
</div>
<div class="panel ask panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a data-target="#ask" id="tab-ask" data-toggle="tab"><i class="fa fa-code" aria-hidden="true"></i> Ask Question</a></li>
<li><a data-target="#preview" id="tab-preview" data-toggle="tab"><i class="fa fa-eye" aria-hidden="true"></i> Preview</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="ask">
<div class="form-group">
<textarea id="textarea_message" class="form-control"></textarea>
</div>
</div>
<div class="tab-pane fade" id="preview">
<div class="preview-message"></div>
</div>
</div>
</div>
</div>
<p class="text-muted">Preview Button will be enabled once your question has reached
4 character or more.</p>
</form>
</div>
</div>
</div>
One solution would be to add a 'trigger' for the keyup event on your buttons
$('#button-bold').on('click', function(e) {
markdown_syntax(this.id, "**", "**", 'strong text');
$("#textarea_message").trigger('keyup');
});
Can anyone explain why the snippet of code below does not actually cause the "#wrapper" to shift? It's driving me insane...Nothing happens when I click on the info icon.
<div class="panel panel-primary">
<div class="panel-heading">{{item.entree}}</div>
<div id="wrapper">
<i class="fa fa-info-circle fa-2x info myButton"></i>
<img class="img-responsive" src="/media/{{item.primary_image}}" alt="{{item.entree}}">
<p class="menu_desc price-widget">{{item.description}}</p>
</div>
<div class="panel-body">{{item.side}}</div>
<div class="center" style="width: 85%; margin-bottom: 7px;">
<div class="input-group col-md-6 col-md-offset-4 col-xs-6 col-xs-offset-4">
<span class="input-group-btn">
<span class="input-group-btn">
<button type="button" class="btn qtyminus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'>
<i class="fa fa-minus fa-2x"></i>
</button>
</span>
</span>
<input class="form-control cart-qty" id="{{item.meal_type}}" type="text" name="{{item.meal_type}}" min="0" max="21" value="{{sub.pork}}">
<span class="input-group-btn">
<button type="button" class="btn qtyplus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'>
<i class="fa fa-plus fa-2x"></i>
</button>
</span>
</div>
</div>
</div>
<script>
$(".myButton").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: "right" };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#wrapper').toggle(effect, options, duration);
});
</script>
You forgot to add a class in button
<button class="myButton">
$(".myButton").click(function() {
console.log("123")
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = {
direction: "right"
};
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#wrapper').toggle(effect, options, duration);
$('#wrapper').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-primary">
<div class="panel-heading">{{item.entree}}</div>
<div id="wrapper">
hide
<i class="fa fa-info-circle fa-2x info myButton"></i>
<img class="img-responsive" src="/media/{{item.primary_image}}" alt="{{item.entree}}">
<p class="menu_desc price-widget">{{item.description}}</p>
</div>
<div class="panel-body">{{item.side}}</div>
<div class="center" style="width: 85%; margin-bottom: 7px;">
<div class="input-group col-md-6 col-md-offset-4 col-xs-6 col-xs-offset-4">
<span class="input-group-btn">
<span class="input-group-btn">
<button type="button" class="btn qtyminus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'>
<i class="fa fa-minus fa-2x"></i>
</button>
</span>
</span>
<input class="form-control cart-qty" id="{{item.meal_type}}" type="text" name="{{item.meal_type}}" min="0" max="21" value="{{sub.pork}}">
<span class="input-group-btn">
<button class="myButton" type="button" class="btn qtyplus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'>
test<i class="fa fa-plus fa-2x"></i>
</button>
</span>
</div>
</div>
</div>
You can see the front end of knowledge:https://github.com/AutumnsWind
Have a look at the snippet below.
I included jQuery and jQueryUI, resized the i-tag and included the text "Image", so you can click on it. Seems to be working!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div class="panel panel-primary">
<div class="panel-heading">{{item.entree}}</div>
<div id="wrapper">
<i class="fa fa-info-circle fa-2x info myButton" style="width:20px; height:20px">Image</i>
<img class="img-responsive myButton" src="/media/{{item.primary_image}}" alt="{{item.entree}}">
<p class="menu_desc price-widget">{{item.description}}</p>
</div>
<div class="panel-body">{{item.side}}</div>
<div class="center" style="width: 85%; margin-bottom: 7px;">
<div class="input-group col-md-6 col-md-offset-4 col-xs-6 col-xs-offset-4">
<span class="input-group-btn">
<span class="input-group-btn">
<button type="button" class="btn qtyminus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'>
<i class="fa fa-minus fa-2x"></i>
</button>
</span>
</span>
<input class="form-control cart-qty" id="{{item.meal_type}}" type="text" name="{{item.meal_type}}" min="0" max="21" value="{{sub.pork}}">
<span class="input-group-btn">
<button type="button" class="btn qtyplus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'>
<i class="fa fa-plus fa-2x"></i>
</button>
</span>
</div>
</div>
</div>
<script>
$(".myButton").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: "right" };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('.center').toggle(effect, options, duration);
});
</script>
Okay i have the following list:
<ul class="list-group gutter list-group-lg list-group-sp" ui-sortable="" ng-model="academyModules">
<li class="list-group-item module" style="padding-top: 15px; padding-bottom: 0px;" ng-repeat="module in academyModules" draggable="true">
<div class="clear" ng-if="module.module.module_type_id != null">
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg" ng-class="module.module_type.color || module.module.module_type.color"
style="padding: 2px 10px; min-width: 90px;">{{module.module_type.name || module.module.module_type.name}}
</button>
<span class="text text-muted">Modul</span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" ng-really-message="Er du sikker du vil slette modulet?" ng-really-click="deleteModule($index, module);">
<i class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeModule(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-plus"></i> Skift modul
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
<div class="clear" ng-if="module.module.module_type_id == null">
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg bg-grey"
style="padding: 2px 10px; min-width: 90px;">Kursus
</button>
<span class="text text-muted">Modul</span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" title="" ng-really-message="Er du sikker du vil slette kurset?" ng-really-click="deleteCourse($index, module);"><i
class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeCourse(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-edit"></i> Ret kursus
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
</li>
</ul>
This produces a list that looks something like this:
Now this works fine when there are few items however when the list is big enough and there scroll the drag and drop messes up. when i pick up an item on the middle of the page it always scrolls to the bottom and it is hard to get it to the top again!
Has anyone tried this before or know a way to fix it?