I have a Div Which Shows on Click of Table Cell of another(TableDiv) Div.I need to set the Boundraies (Limits) depend on the TableDiv Width and Height.My Draggable is out side of TableDiv.
<div class="TableDiv">
<table>
</table>
</div>
<div id="draggingDiv">
</div>
My Jquery Code as below
$("#draggingDiv").draggable({reset:true});
Thanks In Advance
Its clearly an issue with css positioning.
It would be great if u share the css styling of your divs.
But according to me adding this to your style sheet would solve the problem
position:absolute;
width : 100%;
height : 100%;
% Sizing fixes the div to 100% of its parent div.
Same thing could be applicable to draggable element too.
Related
I am new to angular material. From angular material doc i can see it can be positioned 'start' or 'end'.
<div style="border:solid 1px red;">
<mat-sidenav-container>
<mat-sidenav class="sidenav"
position="end" <!-- want to position top or bottom here-->
[opened]="sidenavOption.open"
[mode]="sidenavOption.mode">
Sidenav content
</mat-sidenav>
<ng-content></ng-content>
</mat-sidenav-container>
</div>
I would like to position 'top' or 'bottom'
Can anyone help me how to do this?
Thanks
AFAIK the sidenav as the name suggests can only be present on the right (end) or left (start) side of your page. Even though the material design specifications allow a bottom drawer (here).
As stated here there is no other property than position to specify the position other than left or right.
It seems that you would either need to make your own implementation of such a drawer -But for that you can extend from the material design classes and build upon them- or you could use a MatBottomSheet, which is almost the same, but can only be used as a kind of bottom drawer.
I need a table for list of records where table header is fixed and scrollable body inside a div.
Div which is non scrollable but expands its height to certain length according to certain number of records and if table has more than that records the DIV need to be fixed position.
My main concern is to avoid user to scroll the page. Instead, I want him to scroll table which is inside the Div, but if the list has less number of records div outline border looking awkward.
I am working out this table in MVC View, but couldn't get the expected result. Any sample code is appreciated?
.FixedHeightDiv
{
float:right;
height: 250px;
width:250px;
padding:3px;
background:#f00;
}
.Content
{
height:224px;
overflow:auto;
background:#fff;
}
<div class="FixedHeightDiv">
<h2>Title</h2>
<div class="Content">
your content
your content
your content
your content
your content
your content
your content
your content
your content
your content
your content
</div>
https://jsfiddle.net/PyramidTek/hrn6fwb9/
I am using the age old trick to make a div scrollable like below:
<div style="height: 100px; overflow: scroll;">
Messages within div.
Messages within div.
Messages within div.
Messages within div.
</div>
But the scroll bar is never shown on the iPad.
Does anybody have an idea how to add a scroll bar or at least some sort of visual indication that the div is scrollable for the iPad?
I've a CSS style for my footer in a jquery mobile app:
[data-role=footer]{
bottom:0px;
position: relative !important;
top: auto !important;
width:100%;
}
Now I want that the footer is always at the bottom of the page, including the case that the content is higher then the page so I have to scroll.
Look and feel should be similar to a normal website, opened in safari on iOS.
Is there a way to do that?
In jquery-mobile to create a fixed footer just do:
<div data-role="footer" data-position="fixed">
your footer data
</div>
I'm trying to set the icons to the right side rather than the left. I've tried data-iconpos="right" which works fine on the buttons but no affect here.
Thanks
What I have done is to override the style.
Put this after the mobile css is loaded
<style>
.ui-btn-icon-left .ui-icon {
left: auto !important;
right: 10px !important;
}
</style>
Or you can edit the JQM CSS directly, OR you can create your own custom CSS.
These are the only three ways I have found so far, but love the JQM folks to do something about this.
I added a specific rule for collapsible elements, so their icons are always on the left.
.ui-collapsible-set .ui-btn-icon-left .ui-icon {
left:auto;
right:15px;
}
This affects all the collapsible content headers without setting all of the left icons to right. :-)