jQuery UI issues with tables in dialogs - jquery-ui

I have a jQuery UI dialog to which I applied a padding, and inside the dialog I have a long table. I then configure the dialog to be of limited height in order to have a scrollbar.
It seems that whenever a nowrap is applied to the table cells, the padding to the right of the table is covered by the scrollbar. If I remove the nowrap, it works fine.
Here is an editable example:
http://jsbin.com/okolap/4/edit

It seems that it only happens when you set the dialog's width to auto.
One workaround is to set the table's width to 100% and reset the dialog's width to a fixed length. The length needs to add a padding equal or larger than the width of the scroll bar. For example:
var newWidth = $('.Dialog').width() + 50;
$('.Dialog').width(newWidth);
See this in action: http://jsbin.com/okolap/10/.

Related

Dynamic height for custom dialog in iOS

I'm trying to create a custom dialog with a UITableView inside.
What I want to achieve is to have the lowest height possible, meaning it should be only wrapping the tableview.
BUT when the tableview has too many items (meaning its height is bigger than the screen), I want the dialog to have 20 px margin from the screen top and bottom.
So if the tableview has 2 items, the height of the dialog should be for example 20 px. But if the tableview has 200 items, the height of the dialog should take almost the entire screen height and have its content scrollable.Dialog with few items
Dialog with multiple items
Currently if the tableview has multiple items, I can only see some items and the top and bottom of the dialog disappear.
Thanks.
EDIT: I forgot to mention I intend to achieve this using the storyboard only, using constraints and changing priority in content hugging and compression.
GOT IT WORKING!
All I had to do was change the top and bottom constraints from "=" to ">=".
So now it allows the dialog to have a smaller height but not bigger than the screen. No code needed.
Thanks everybody for your help.
My answer will include several parts. They are solving a more general question of how to efficiently work with dialogs.
To create dialog use UIViewControllerTransitioningDelegate, UIPresentationController and UIViewControllerAnimatedTransitioning. It's a long way, but it will make your dialogs presentation reusable.
To determine size of the dialog with table inside of it, set peferredContentSize property of your dialog view controller. This property will be used by UIPresentationController to set dialog height. Before setting peferredContentSize you can adjust the height to the margins you like.
To calculate size of table view you can use several options. table.layoutIfNeeded() worked for me.
Update: check out the article I wrote about this approach.
You need to set the tableView height dynamically, so give it two position constraints (ie centerX, centerY), a fixed width constraint, and then a height constraint set to some arbitrary constant (0). Take an outlet to the height constraint. Whenever you update the data that backs the tableview you take the min of the calculated tableview height and the superview height and set the height constraint constant to that value, then call setNeedsLayout on the tableView's superview. This way the tableview will either be the height of its content, or if the content is too big, the height of the superview and it will scroll.
tableViewHeightConstraint.constant = min(superview?.bounds.size.height ?? 0, numberOfCells * heightPerCell + headerAndFooterSize)
superview?.setNeedsLayout()
I guess that you know how many items you have before present the dialog and I guess that you dialog is a custom view (xib)
if this premises are true, you can resolve whit this line.
let dialog = CustomDialog(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: (heighCell * elements) + (heightButtonClose) + (heighTitle))
dialog.center = self.view.center
let me know if you have doubts

Delphi only allow horizontal Drag-and-Drop on TControlBar

I have a TControlBar aligned to the bottom of my main form (same width). The height of this Control Bar is fixed.
This Control Bar contains a number of TPanels, aligned horizontally (With matching heights). These panels contain various other components. I want to be able to move and rearrange these panels horizontally side-to-side but disallow vertical movement (fix Top of Panels).
How can I achieve this. I have tried setting the Anchors->akTop property for each Panel to true. But the panels sometimes move vertically as I try and drag them side to side.
I am using RAD studio XE4
Set RowSize to the Height of the ControlBar:
Specifies the height of the control bar's rows.
And set RowSnap to False:
Specifies whether controls are snapped to the control bar's rows when docked.
Use RowSnap to specify whether controls are snapped to the control bar's rows when docked. Controls that are snapped have their Top and Height properties set automatically to correspond to the control bar's rows.

Fitting jQuery mobile dialog to height and width of page, especially during orientation change

Is it possible to fit a jQuery mobile dialog to the height and width of a page, especially during orientation change on a tablet? I've tried wrapping a div inside the dialog and setting its height and width to percentages, but that has not worked for some reason. Setting that div to a static width and height works fine, but then looks bad on orientation change.

Adding scrollbar to a Group in AX 2012 form

I need to set scrollbar in a Group as shown below since there are many more vertical fast tabs are available which are getting hide when opening any tab as you can see below . I have used tab and selected style as Fasttab. I have tried to set Scrollbar property of tab and its tabpages to yes but for no result.
Any help would be great!!!
I have resolved the issue. by setting height and width properties correctly. properties are:
Group:-
Height:column width
width :column width
Tab:-
Height:column width
width :column width
Tabpages:
Height:Auto
width :column width
That's it!!
I have perfect solution :)
Add a new Group in the from. Nothing in it.
Set HideEmpty=false.
Set Height=ColumnHeight, Width=ColumnWidth
Set forms Height=Auto, Width=Auto.
That is all.
Form can be Re-size, the scroll bar shows.

How to move the scroll of a div on keydown of listbox contents

I am having a listbox with large contents. I have used a div outside the listbox (no fixed height and width set)with a fixed width and height sothat the div is having both horizontal and vertical scroll. The list box within the div does not have any scroll. The div will not scroll down when i use key down for the listbox inside it. I want to move the scroll of the div according to the listbox key down. Can any one give a solution for this

Resources