Is it possible to have multiple modals attached to seperate buttons on the same page? I am having problems that when I click one of the buttons both modals are popping up. These modal have forms in them, that is why I have them set to not closable.
MAIN HTML CODE:
<table class="ui violet compact celled table">
.
.
.
<tfoot class="full-width">
<tr>
<th colspan="5">
<div class="ui right floated small primary labeled icon billboard button">
<i class="plus icon"></i> Add Slide
</div>
<div class="ui right floated small primary labeled icon button">
<i class="minus icon"></i> Delete Slide(s)
</div>
</th>
</tr>
</tfoot>
</table>
<table class="ui violet compact celled table">
.
.
.
<tfoot class="full-width">
<tr>
<th colspan="4">
<div class="ui right floated small primary labeled icon campaign button">
<i class="plus icon"></i> Add Slide
</div>
<div class="ui right floated small primary labeled icon button">
<i class="minus icon"></i> Delete Slide(s)
</div>
</th>
</tr>
</tfoot>
</table>
MODAL HTML:
<div class="ui standard billboard modal" style="margin-top: -197.5px; display: block !important;">
.
.
.
</div>
<div class="ui standard campaign modal" style="margin-top: -197.5px; display: block !important;">
.
.
.
</div>
MODAL JS:
$('.billboard.modal')
.modal({
closable : false
})
.modal('attach events', '.billboard.button', 'show')
;
$('.campaign.modal')
.modal({
closable : false
})
.modal('attach events', '.campaign.button', 'show')
;
I believe I found an answer. In the class for the modal I just added 'transition hidden' and that seems to solve the problem.
Related
In bootstrap with the grid system elements are automatically arranged side by side but is there a way to stack elements one on top of another?
I'm trying to create a photo gallery where i'm displaying 4 images,hiding them and triggering each photo with an assigned button.
But because these images are first arranged side by side,every time I show one image and hide the other the frame is being shifted.
Example:
So if the first image starts at point A the last image ends at point D.
Here is the code that I am using
<script src="jquery/jquery-3.2.1.js"></script>
<script>
$("#gallerytrigger_1").on('click',function(){
$("#gallery_1").toggle();
$("#gallery_2").hide();
$("#gallery_3").hide();
$("#gallery_4").hide();
});
$("#gallerytrigger_2").on('click',function(){
$("#gallery_4").hide();
$("#gallery_3").hide();
$("#gallery_2").toggle();
$("#gallery_1").hide();
});
$("#gallerytrigger_3").on('click',function(){
$("#gallery_4").hide();
$("#gallery_3").toggle();
$("#gallery_2").hide();
$("#gallery_1").hide();
});
$("#gallerytrigger_4").on('click',function(){
$("#gallery_4").toggle();
$("#gallery_3").hide();
$("#gallery_2").hide();
$("#gallery_1").hide();
});
</script
#foreach($gallerys as $gallery)
<div class="col-sm-2">
<br>
<div id="gallery_{{$loop->iteration}}" style="display:none;">
<p style="text-align: center;"><img style="width: 100%;border-radius:
6px;" src="/gallery/{{ $gallery->imagelocation }}"></p>
</div>
</div>
#endforeach
#foreach($gallerys as $gallery)
<div class="col-xs-2">
<br>
<div id="gallerytrigger_{{$loop->iteration}}">
<hr>
<img style="width: 200%;border-radius: 6px;margin-left: -12px;margin-
top: -100px;" src="/gallery/{{ $gallery->imagelocation }}">
</div>
</div>
#endforeach
Try this code
<script src="jquery/jquery-3.2.1.js"></script>
<script>
$(".galleryTrigger").click(function(){
var id = $(this).data('id');
$(".gallery").hide();
$("#gallery_"+id).show();
});
</script>
#foreach($gallerys as $gallery)
<div class="col-sm-2">
<br>
<div id="gallery_{{$loop->iteration}}" style="display:none;" class="gallery">
<p style="text-align: center;"><img style="width: 100%;border-radius:
6px;" src="/gallery/{{ $gallery->imagelocation }}"></p>
</div>
</div>
#endforeach
#foreach($gallerys as $gallery)
<div class="col-xs-2">
<br>
<div id="gallerytrigger_{{$loop->iteration}}" data-id="{{$loop->iteration}}" class="galleryTrigger">
<hr>
<img style="width: 200%;border-radius: 6px;margin-left: -12px;margin-
top: -100px;" src="/gallery/{{ $gallery->imagelocation }}">
</div>
</div>
#endforeach
I have an angular 5 application with the library Kendo UI.
In this application I have a Kendo UI Grid and I want to customize it with some borders.
This is my grid:
I have blue border-left when the row are on hover or when they are expanded.
But in want to have a little space between the two blue lines of two different row when the two are expanded.
So, in fact, I want to put the grey border on the bottom over the blue border on left or add a little white space a the bottom or top of the blue border.
This is the code of my grid :
<kendo-grid
id="myGrid"
#grid
[kendoGridBinding]="listOfSolution"
[resizable]="false"
[pageSize]="10"
[pageable]="true"
[sortable]="true"
[sort]="sortByNbTransit"
[filterable]="false"
[groupable]="false"
[reorderable]="false"
[selectable]="false"
[scrollable]="'none'"
[rowClass]="rowCallback()"
(detailCollapse)="onCollapse($event)"
(detailExpand)="onExpand($event)"
(sortChange)="onSort($event)"
style="border: none;">
<kendo-grid-column [width]="90" field="serviceName" title="SERVICE" [style]="{'min-width':'90px','margin-left':'18px !important'}" [sortable]="false">
<ng-template kendoGridCellTemplate let-dataItem>
<span>{{ dataItem.routingDetails[0].service.name}}</span>
</ng-template>
</kendo-grid-column>
<kendo-grid-column width="110px" field="vesselName" title="VESSEL" [style]="{'min-width':'110px'}" [sortable]="false"></kendo-grid-column>
<ng-template [kendoGridDetailTemplateShowIf]="displayOrHideDetails" kendoGridDetailTemplate let-dataItem class="expandDetails">
<div style="width: 100%; display: table;margin-top:15px;margin-bottom: 10px;">
<div *ngFor="let data of dataItem.routingDetails" style="display: table-row">
<div class="detailsCell" style="min-width: 90px">
<span class="detailText">{{ data.service.name }}</span>
</div>
<div class="detailsCell" style="min-width: 110px;">
<span class="detailText">{{ data.vessel.name }}</span>
</div>
</div>
</div>
</ng-template>
</kendo-grid>
Do you know how I could do that ?
I have a data table in my AngularJS application which has many columns where the responsiveness doesn't work anymore. I am currently scrolling the whole way through the data table, which doesn't look good.
I am trying to find a way to freeze some columns on the right side of the data table so that the scroll will be only for the columns on the left. The data tables contain buttons on the right side, so if the buttons are frozen it would be more helpful.
HTML:
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<div class="row">
<div class="col-md-12">
<div class="widget widget-table action-table" style="overflow:auto">
<!-- /widget-header -->
<div class="widget-content table-container" ng-controller="getTalentController">
<table ng-table="talentsList" show-filter="true" class="table table-striped table-bordered" style="font-size: smaller;text-align:center">
<tr ng-repeat="talent in data">
<td data-title="'#'" style="width:5px">{{ $index+1 }}</td>
<td data-title="'Employee ID'" sortable="'employeeNo'" filter="{ 'employeeNo': 'text' }" style="width:50px">
{{talent.employeeNo}}
</td>
<td data-title="'Name'" sortable="'fullName'" filter="{ 'fullName': 'text' }">
{{talent.fullName}}
</td>
<td data-title="'From'" sortable="'inDate'" filter="{ 'inDate': 'text' }">
{{talent.inDate}}
</td>
<td data-title="'Till'" sortable="'outTill'" filter="{ 'outTill': 'text' }">
{{talent.outTill}}
</td>
<td data-title="'Account'" sortable="'account'" filter="{ 'account': 'text' }">
{{talent.account}}
</td>
<td data-title="'State'" sortable="'state'" filter="{ 'state': 'text' }" ng-class="{greenStyle : talent.state == 'Available', blueStyle : talent.state == 'Billed', redStyle: talent.state == 'Blocked'}">
<div style="border:solid">{{talent.state}}</div>
</td>
<td data-title="'Remarks'" ng-click="showRemarks[$index]=!showRemarks[$index]" style="width:70px">
<span ng-hide="showRemarks[$index]" class="ellipses" style="width:inherit">{{talent.remark}} </span>
<span ng-show="showRemarks[$index]"> {{talent.remark}} </span>
</td>
<td data-title="'Resume'">
<a ng-click="downloadResume(talent.id)" class="btn btn-default" data-placement="top" data-toggle="tooltip" data-original-title="resume"><svg class="glyph translucent floppy-disk"><use xlink:href="#translucent-floppy-disk"></use></svg></a>
</td>
<td data-title="'Reserve'">
<a ui-sref="reservation.edit({id: talent.id})" class="btn btn-default" data-placement="top" data-toggle="tooltip" data-original-title="save"><svg class='glyph stroked hand-cursor'><use xlink:href='#stroked-hand-cursor' /></svg></a>
</td>
</tr>
</table>
</div>
<!-- /widget-content -->
</div>
<!-- /widget -->
</div>
<!-- /span12 -->
</div>
<!-- /row -->
</div>
I would like to freeze the columns on the right side carrying title 'State','Remarks','Resume',and 'Reserve'.
How can I achieve this. I guess the controller code wont be required for this problem. Currently I am creating scroll bar for the table by applying style="overflow:auto" for the outer div.
CSS : https://hastebin.com/wibahuyoxa.cs
Example here: https://jsfiddle.net/vdLk2wzk/. click in the CLICK HERE button to see the situation in action. The dropdown menu should show above everything.
<div class="col-md-12">
<div class="panel-group" id="accordionGroups">
<div class="panel panel-default">
<div class="panel-heading accordion-toggle" data-toggle="collapse" data-target="#XX">
<span class="panel-subtitle">TITLE</span>
</div>
<div id="XX" class="panel-collapse collapse in">
<div class="panel-body">
<div class="col-md-12">
<div class="table-responsi">
<table class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="btn-group">
<span class="btn btn-default btn-xs dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">CLICK HERE<i class="fa fa-caret-down left-padding-low1"></i></span>
<ul class="dropdown-menu">
<li>XXXXX</li>
<li>YYYYY</li>
<li>ZZZZZ</li>
<li>PPPPP</li>
</ul>
</div>
</td>
<td>BIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTE</td>
<td>TEXT</td>
<td>TEXT</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Bootstrap applies overflow-x:hidden on .table-responsive, and once you have an overflow it will actually cut it in both direction to guarantee that the scrollbar is accessible. You could of course remove the overflow whatsoever like so:
.table-responsive {
overflow:visible !important;
}
But it will break the responsive design so with this table layout you are out of luck. On the other hand this table layout is terrible to use on mobile anyway, so I would suggest using one of the following instead: https://css-tricks.com/responsive-data-table-roundup/
Yes, Even i was having the same problem but using the jquery it got fixed, please have a look into the below snippet.
i have found this# http://ustutorials.com/blog/popup-overlay-not-working-in-ipad/
so based on you id change accordingly its working for me.
jquery mouse enter and mouse leave, you can try like this, for me its working fine
//Function to display/hide scroll on mouseenter/mouseleave
$(‘.slds-button–icon-border-filled’).each(function() {
$(this).on(‘mouseenter’,function() {
$(this).find(‘.slds-scrollable–x’).css(‘overflow-x’, ‘visible’);
$(this).find(‘.slds-scrollable–x’).css(‘overflow-y’, ‘visible’);
//alert(“hello-mousenter”);
});
$(this).on(‘mouseleave’,function() {
// alert(“hello”);
$(this).find(‘.slds-scrollable–x’).css(‘overflow-x’, ‘auto’);
$(this).find(‘.slds-scrollable–x’).css(‘overflow-y’, ‘hidden’);
});
});
I am trying to display a page that contains a header with 3 list items, a sidebar with links on the left and the actual body. I would like the sidebar and the body to be rendered side by side under the header. However, they are rendered one after another on the page.
Any suggestions on how this can be done?
I've used the following code and style to achieve this, but it doesn't seem to be working.
<div>
<h1 class="control-label admin-header" style="vertical-align:top;padding-left:20px">Administration</h1>
<ul class="nav nav-pills admin-header" style="float:right">
<li class="active admin-header">test</li>
<li class="admin-header">xyz</li>
<li class="admin-header">abc</li>
</ul>
</div>
<div>
<div class="span3 admin-header">
<div class="well sidebar-nav admin-header">#RenderSection("Sidebar", false)</div>
</div>
<div class="content span12 admin-header">#RenderBody()
</div>
</div>
.admin-header
{
display: inline;
}
Fiddle
Not sure whether I understood, but for side by side display, you can use
<table>
<tr>
<td class="active admin-header">test</td>
<td class="admin-header">xyz</td>
<td class="admin-header">abc</td>
</tr>
</table>