I'm using Bootstrap to display a list of people from an SQL server in an accordion (expandable list).
My problem is that there is an increasing amount of whitespace between consecutive entries in the accordion, which I can't get rid of.
Its easiest to see it in action: http://ec2-54-200-151-237.us-west-2.compute.amazonaws.com/#
When the whitespace is clicked the tab above is opened, which is some clue to what is going wrong - however I am quite new to html and javascript.
Here is the javascript that creates the new panel:
function create_panel(first_name, last_name, idx){
var $template = $(".template");
var $newPanel = $template.clone();
$newPanel.find(".collapse").removeClass("in");
$newPanel.find(".accordion-toggle").attr("href", "#" + String(idx))
.text(last_name+" "+first_name);
$newPanel.find(".panel-collapse").attr("id", idx).addClass("collapse").removeClass("in");
return $newPanel;
}
And the html panel group element:
<div class="panel-group" id="accordion1">
<div class="panel panel-default template" style="display:none">
<div class="panel-heading accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapse20" style="width:100%;">
<a class="panel-title">
Mr. Template <span class="label label-danger" style="float:right">Urgent</span>
</a>
</div>
<div id="collapse20" class="panel-collapse collapse">
<div class="panel-body">
<div class="btn-group">
<button type="button" class="btn"><i class="glyphicon glyphicon-flag"></i></button>
<button type="button" class="btn"><i class="glyphicon glyphicon-earphone"></i></button>
<button type="button" class="btn"><i class="glyphicon glyphicon-ok"></i></button>
</div>
</div>
</div>
</div>
</div>
If anyone can help me see where the problem is, I'd be extremely grateful.
Thanks in advance
I solved this just after posting.
The fact that the extra whitespace was compounding tipped me off:
The javascript was referring to the last created item .template every time it made a new entry - hence the compounding. I added id=template to the panel element and changed the javascript refererence to #template, and the accordion now looks normal.
Related
First of all, I've seen this Close Bootstrap Modal but of some reason it's not working for me.
I have a page, where one modal is called from like this
<button type="button" #onclick="#(()=>modal.Show<LandingPageHelpPopUp>())" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Click here to get help</button>
That page's code look like this
<div class="modal-dialog" id="myModal" style="margin-left:-200px;margin-bottom:-550px;position:absolute;">
<div class="modal-content" style="background-color:gray;">
<div class="modal-body" style="color:black;">
<p>Here you can observe the controlling of the curtains by others. If the queue is empty, and you'll like the control, hit this button.</p>
<div class="modal-footer" style="float:right;border:none;margin-bottom:-25px;">
<label class="custom-close" #onclick="#(()=>modal.Show<LandingPageHelpPopUp2>())">Next page</label>
<button class="next-button" style="margin-left:-3px;"><i class="fa fa-angle-right"></i></button>
</div>
</div>
</div>
</div>
<img src="css/arrow-help.png" class="arrow-help">
From here, I'd like to see another modal. To do that, I guess I have close the first one first, in order to not create a double layer of modals - if that makes sense. That's where I have used the linked thread in the beginning, but somehow it doesn't work.
The second modal's code look like this
<div class="modal-dialog" id="myModal2" style="margin-left:-200px;margin-bottom:-550px;position:absolute;">
<div class="modal-content" style="background-color:gray;">
<div class="modal-body" style="color:black;">
<p>If other users is in the queue, click here to get in line.</p>
<div class="modal-footer" style="float:right;border:none;margin-bottom:-25px;">
<label #onclick="#(()=>modal.Show<LandingPageHelpPopUp>())">Previous page</label>
<button class="next-button" style="margin-left:-3px;margin-top:-2px;"><i class="fa fa-angle-right"></i></button>
</div>
</div>
</div>
</div>
<img src="css/arrow-help2.png" class="arrow-help2">
In my index.html I've these two scripts, that is meant to toggle the modals. That is if one modals is open, when the other one is shown, it should close.
<script>
$(function () {
$(".custom-close").on('click', function () {
$('#myModal').modal('hide');
});
});
</script>
<script>
$(function () {
$(".custom-close2").on('click', function () {
$('#myModal2').modal('hide');
});
});
</script>
Here's some screenshots, showing that the previous modal does not get closed, so it's just creating multiple layers of modals on top of each other. Here, Here, And here
Sorry for all the unnecessary code (styling, bad naming etc)
Doe any of you know why the previous modal is not getting closed, whenever the next is getting shown?
I have an Umbraco setup. And when I edit in the CMS I would like for the "Preview" button to disappear whenever there is not a text-editor present in the DOM.
Angular file in localtion Umbraco/Views/content/edit.html
<form novalidate name="contentForm"
ng-controller="Umbraco.Editors.Content.EditController"
ng-show="loaded"
ng-submit="save()"
val-form-manager>
<umb-panel umb-tabs ng-class="{'editor-breadcrumb': ancestors && ancestors.length > 0}">
<umb-header tabs="content.tabs">
<div class="span7">
<umb-content-name placeholder="#placeholders_entername"
ng-model="content.name" />
</div>
<div class="span5">
<div class="btn-toolbar pull-right umb-btn-toolbar">
<div class="btn-group" ng-animate="'fade'" ng-show="formStatus">
<p class="btn btn-link umb-status-label">{{formStatus}}</p>
</div>
<umb-options-menu ng-show="currentNode"
current-node="currentNode"
current-section="{{currentSection}}">
</umb-options-menu>
</div>
</div>
</umb-header>
<umb-tab-view>
<umb-tab id="tab{{tab.id}}" rel="{{tab.id}}" ng-repeat="tab in content.tabs">
<div class="umb-pane">
<umb-property property="property"
ng-repeat="property in tab.properties">
<umb-editor model="property"></umb-editor>
</umb-property>
<div class="umb-tab-buttons" detect-fold ng-class="{'umb-dimmed': busy}">
<div class="btn-group" ng-show="listViewPath">
<a class="btn" href="#{{listViewPath}}">
<localize key="buttons_returnToList">Return to list</localize>
</a>
</div>
<div class="btn-group" ng-show="!isNew">
<a class="btn" ng-click="preview(content)">
<localize key="buttons_showPage">Preview page</localize>
</a>
</div>
<div class="btn-group dropup" ng-if="defaultButton">
<!-- primary button -->
<a class="btn btn-success" href="#" ng-click="performAction(defaultButton)" prevent-default>
<localize key="{{defaultButton.labelKey}}">{{defaultButton.labelKey}}</localize>
</a>
<a class="btn btn-success dropdown-toggle" data-toggle="dropdown" ng-if="subButtons.length > 0">
<span class="caret"></span>
</a>
Return to list
<!-- sub buttons -->
<ul class="dropdown-menu bottom-up" role="menu" aria-labelledby="dLabel" ng-if="subButtons.length > 0">
<li ng-repeat="btn in subButtons">
<a href="#" ng-click="performAction(btn)" prevent-default>
<localize key="{{btn.labelKey}}">{{btn.labelKey}}</localize>
</a>
</li>
</ul>
</div>
</div>
</div>
</umb-tab>
</umb-tab-view>
<ul class="umb-panel-footer-nav nav nav-pills" ng-if="ancestors && ancestors.length > 0">
<li ng-repeat="ancestor in ancestors">
{{ancestor.name}}
</li>
<li></li>
</ul>
</umb-panel>
</form>
I am not certain this is the correct file - but it seems to be the place where the Preview button is created.
The question now is. Can I somehow determine with angular if the text editor is active and then if it is, show the Preview button next to the Save and publish?
I would suggest the following
1) Determine what properties are accessible on the object that is passed through to the <umb-editor> directive.
Digging into the code I can see things like it has a .view property. You could inspect this at runtime in the browser console to see what additional properties are available
2) You can write a rule on the button to show if the collection of fields contains one with a certain property you might have identified
something like this...
Hope this helps
I found a second solution I might as well add here. I used the Umbraco Plugin Backoffice Tweaking.
Here I added this to my Config\BackofficeTweaking.config file
<?xml version="1.0" encoding="utf-8"?>
<Config>
<Rules>
<Rule Type="HideButtons" Enabled="true" Names="preview" Users="" UserTypes="" ContentTypes="Omraader,Grund,Udstykning,Indstillinger,Niveau,Oversigt_Mappe,Oversigt,Information_Mappe,Information,Afstande_Mappe,Afstande" Description="" />
</Rules>
<Scripts>
<Script Name="example"></Script>
</Scripts>
</Config>
Here you can also make some scripting or do many other things. The plugin also has a visual editor for Umbraco. Pretty easy to use.
I just starting in a project where we're using thymeleaf and I'm new to the technology.
It's a simple modal to confirm an object to be deleted. So they want me to add the name of the item we're deleting on the message instead of a generic message like: "Are you sure you want to delete?"
They want: "Are you you want to delete Item_Name?"
So I need to pass this name as parameter.
That's the code I have the display the modal:
<button id="btnDelete" value="delete" type="button" class="btn-link" data-toggle="modal" data-object-id="12345" data-object-name="NNN" th:attr="data-object-id=''+${assignment.assignmentId}+'', data-object-name='/nonInstructionalWorkload/deleteAssignment?asssignmentId='+${assignment.assignmentId}+'', data-target='#deleteAssignmentModal'">
And that's the code I have on the modal html:
<form role="form" th:action="#{/deleteAssignment}"
name="assignmentDeleteForm" id="assignmentDeleteForm" method="post">
<div class="modal-header">
<h4 class="modal-title" id="deleteWorkItemabel">Confirm Assignment Delete</h4>
</div>
<div class="modal-body">
<div class="form-group">
<p>Assignment will be deleted, are you sure you want to proceed?</p>
<input type="hidden" id="deleteId" name="deleteId" value="nnnn"/>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="btnDelConfirm" class="btn btn-primary">
Yes
</button>
<button type="button" id="btnDelCancel" class="btn btn-default" data-dismiss="modal">
No
</button>
</div>
</form>
At this point is where I need to add more information on the confirmation message about the assignment item being deleted.
Already tried some approached to get the parameters but didn't work so I'm looking for more option.
Thank you!
Thymeleaf is just template engine that takes your templeate and generate static html out of it. So passing dynamic values to your modal is a javascript work (unless you generate separate modal for each item, but this would be silly).
Using thymeleaf you have to generate a data- attribute containing desired item's name inside the button which opens modal, and that's all. You've already did such thing within th:attr:
th:attr="data-object-id=''+${assignment.assignmentId}+'', data-object-name='/nonInstructionalWorkload/deleteAssignment?asssignmentId='+${assignment.assignmentId}+'', data-target='#deleteAssignmentModal'"
The code above will generate attributes data-object-id,data-object-name and data-target inside the button. I assume that data-object-name is the one you want to use (however it looks more like an URL).
Now you can customize your modal's content using javascript. I can see, that you are using bootstrap as your frontend library, so you should take a look at this example, to have an idea how to accomplish that.
Javascript code below should work fine for you:
$('#deleteAssignmentModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var objectName = button.data('object-name') // Extract info from data-object-name attribute
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-body p').text('Do you want to delete ' + objectName + '?')
})
The sample project on GitHub you can clone and test it. Full video under the readme.
https://github.com/ibrahimkarayel/todoBoot/blob/master/src/main/resources/templates/home.html
<div class="modal modal-delete" th:id="modal-delete+${task.id }">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
<h3 id="delModalLabel">Delete Confirmation</h3>
</div>
<div class="modal-body">
<p class="error-text"><strong>Are you sure you want to
delete this task ?</strong></p>
</div>
<div class="modal-footer">
<button class="btn " data-dismiss="modal" aria-hidden="true">
Cancel
</button>
<a th:href="#{/task/delete/{id}(id=${task.id})}">
<span class="btn btn-danger" value="delete">Delete</span></a>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--end delete modal-->
<script>
$('#modal-delete').on('show.bs.modal', function (e) {
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
$('#modal-deleteHiddenId').val($(this).find('.btn-ok').attr('href'));
});
</script>
Hello folks this is the plugin http://mgcrea.github.io/angular-strap/##collapses
I am trying to use this plugin in my app but isn't doing what I want, I want to use it more dynamically, as you can see in the example on the web page, you can have only one panel open at the time, and I want to give to the users the option to have open as many panels as they want, and this is my html:
<div class="panel-group" ng-model="panels.activePanel" bs-collapse>
<div class="panel panel-default"
ng-repeat="sport in sports" ng-show="sport.leagues.length">
<div class="panel-heading"
bs-collapse-toggle
ng-click="addSportToLines(sport)">
<h4 class="panel-title">
<a>
{{::sport.name }}
</a>
<span class="pull-right badge">{{::sport.leagues.length }}</span>
</h4>
</div>
<div class="panel-collapse" bs-collapse-target>
<div class="panel panel-default">
<div class="list-group">
<a href="javascript:void(0);"
class="list-group-item panel-padding"
ng-repeat="league in sport.leagues"
ng-class="{active: league.active}"
ng-click="addLeagueToLines(league)">{{:: league.name }}</a>
</div>
</div>
is there a way to do it or I need to use another tool ?
If you look at the source code for the angular-strap collapse control here, you will notice this function inside the controller:
self.$setActive = $scope.$setActive = function(value) {
if(!self.$options.disallowToggle) {
self.$targets.$active = self.$targets.$active === value ? -1 : value;
} else {
self.$targets.$active = value;
}
self.$viewChangeListeners.forEach(function(fn) {
fn();
});
};
As you can see $targets.$active is a single value, meaning that the directive only accommodates one panel open at a time. To alter the functionality of the directive, you would have to fork it and make the necessary changes.
I would look at my answer to your similar question as a better approach. You do not need a library/plugin to get the result you are looking for. See: https://stackoverflow.com/a/27611923/277697
Hoping someone might be able to help me with something I am experimenting with in MVC 4 using bootstrap.
I have a strongly-typed index view which displays items in a table along with edit and delete action icons in each line.
#model IEnumerable<Models.EquipmentClass>
....
#foreach (var item in Model)
{
<tbody>
<tr>
<td>
#item.ClassId
</td>
<td>
#item.ClassName
</td>
<td>
<a href=#Url.Action("Edit", "EquipmentClass", new { id = item.ClassId })>
<i class="icon-edit"></i>
</a>
<a href=#Url.Action("Delete", "EquipmentClass", new { id = item.ClassId })>
<i class="icon-trash"></i>
</a>
</td>
</tr>
</tbody>
} <!-- foreach -->
The EquipmentClass controller returns the Edit view for the selected item based on the id. All great and as expected at this point
public ViewResult Edit(int id)
{
return View(equipmentclassRepository.Find(id));
}
What I would like to know is how to open the edit form in a bootstrap modal dialog.
I could try and substitute the edit action in the table with the following and then have a modal div at the bottom of the view but how do I pass in the ID of the selected item and which html helper should I use in the modal section?
<!-- replaced table action -->
<a class="btn pull-right" data-toggle="modal" href="#myModal" >Details</a>
....
<!-- modal div -->
<div class="modal hide fade in" id="myModal" )>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
#Html.Partial("Edit")
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
I'd greatly appreciate any advice, many thanks
I think that I have a solution to your problem. To make your MVC application work as you want it to you should make some changes to the code you provided:
1. Add a div representing a modal for editing an item at the bottom of your layout page:
<div id="editModalContainerID" class="modal hide fade" data-url='#Url.Action("Edit", "EquipmentClass")'>
<div id="editModalBodyID"></div>
</div>
Notice that this modal is strictly connected to the controller action responsible for editing an EquipmentClass item.
2. Add a jQuery function to your custom javaScript:
function showModal(modalContainerId, modalBodyId, id) {
var url = $(modalContainerId).data('url');
$.get(url, { id: id }, function (data) {
$(modalBodyId).html(data);
$(modalContainerId).modal('show');
});
}
As you can see this function takes id as one of its parameters. In general its purpose is to replace the empty modal body with what we will put in a separate partial view and than display whole container as a modal page.
3. Put your modal div in a separate partial view, and call it Edit (has to be the same as your controller action name). You will have to change your Edit partial name to sth else, for example EditBody.
The Edit partial view should now look sth like this:
#model EquipmentClass
<!-- modal div -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
#Html.Partial("EditBody", Model)
</div>
<div class="modal-footer">
Close
Save changes
</div>
4. Change the controller action so that it returns the partial view created in the previous step:
public PartialViewResult Edit(int id)
{
return PartialView(equipmentclassRepository.Find(id));
}
5. Change the edit 'a' anchor so that it calls created jQuery function:
#model IEnumerable<Models.EquipmentClass>
....
#foreach (var item in Model)
{
<tbody>
<tr>
<td>
#item.ClassId
</td>
<td>
#item.ClassName
</td>
<td>
<a data-toggle="modal" onclick="showModal('#editModalContainerID', '#editModalBodyID', #item.ClassId)">
<i class="icon-edit"></i>
</a>
<a href=#Url.Action("Delete", "EquipmentClass", new { id = item.ClassId })>
<i class="icon-trash"></i>
</a>
</td>
</tr>
</tbody>
} <!-- foreach -->
This way each time an 'a' anchor with edit icon is clicked the showModal function (with related id being passed) is fired and a bootstrap modal with related data is displayed.
I'm sure there is a better way to do it, but this way worked for me just fine :)
Hope this helps you a bit :)
Przemo answer worked for me, however do note that I only managed to get it to work when I changed the first block of code from
<div id="editModalContainerID" class="modal hide fade" data-url='#Url.Action("Edit", "EquipmentClass")'>
<div id="editModalBodyID"></div>
</div>
to
<div id="editModalContainerID" class="modal fade" data-url='#Url.Action("Edit", "EquipmentClass")'>
<div id="editModalBodyID"></div>
</div>
Notice that I removed the "fade" class from editModalContainerID. Otherwise the partial view does not load. Hope this helps anyone else with the same issue.