I have angular app with p-dialog component from PrimeNG 4.2.2
The dialog shows dynamical content (there is a table inside). If the table doesn't feet on full screen it should show scrollbar so the user will be able to see elements from the footer of the dialog.
The issue is that the dialog gets responsive only after resizing of the browser window. After dialog initialization the dialog doesn't feet into the screen, interface elements from the footer are not visible. It gets into the normal state only after resize.
I use the following declaration:
<p-dialog *ngIf="displayDialog" [(visible)]="displayDialog"
[responsive]="true" [modal]="true"
width="800" minWidth="850">
</p-dialog>
Q: Does someone know how to make dialog responsive after it appears on the screen? Or maybe it is a bug? Is there any workaround?
Currently, I'm thinking of generating resize event manually after dialog initialization.
I found a workaround using CSS:
I wrapped content of the dialog element into a div with a specific style:
<p-dialog ...>
<div class="ui-grid ui-grid-responsive ui-fluid"
style="overflow-y: auto; max-height: calc(100vh - 250px);">
...content
</div>
</p-dialog>
It doesn't look ideal, but works fine.
Another option was to trigger resize event:
window.dispatchEvent(new Event('resize'));
It worked as well, but required some delayed call which is not nice.
Related
I'm using the AngularJS range slider directive from prajwalkman. The slider works fine while it is visible, but when it is embedded in a hidden options screen using ng-show, the DOM manipulation bits dont work due to the use of "offsetWidth". I am using these sliders in a panel that is by default hidden at screen launch, but still want to initialize the sliders so the pointers are at the correct positions and the colored selection bar is visible when the user toggles the panel.
wholeBar = element.children()[0].offsetWidth;
When the element is hidden offsetWidth is 0 and the calculations dont work correctly. I think what I need to do is show the panel, then run the DOM update code but I havent been able to figure out how to schedule it to run after the current apply/digest cycle completes.
I created a fiddle that is vastly simplified to show what I mean - when the DIV is shown the code works because offsetWidth is not 0, but when it is hidden the selection bar doesn't expand to 50%.
As comments mentioned, a simple solution would be to use a class to just move the slider out of view, effectively 'hiding' it.
Updated fiddle
I accomplished this by making the hide/show button toggle a var
<button ng-init="move=false" ng-click="move=!move">Show/Hide DIV</button>
creating a class to move the element off the screen
.move {
transform: translate(-9999px, 0);
}
and using ng-class to apply the class when we toggle the button
<div ng-class="{move: move}" my-component>
<h3>This is my hidden DIV</h3>
<div style="height:20px; width:100%; background-color:red; zindex=0; ">
<div style="height:35px; width:15px; background-color:blue; zindex=1; position:absolute"></div>
</div>
</div>
I have a simple jQuery drop-down and it works with no problems. The issue I am having is on my responsive design it still keeps the hover effect which isn't working correctly on mobile. Is there anyway to cancel the hover once the hamburger icon .menu is clicked? The idea is to keep the .subNav hidden on mobile and once the user clicks the .topNav li a the .sabNav slides down. I couldn't attach the responsive design in the fiddle but you can probably get a good idea of what it's doing.
http://jsfiddle.net/9L3cE/1/
This question is bigger than just what you're trying to accomplish. The real problem is determining this: What is mobile? In your case, you're using small screen size as a proxy for touch screen capability.
This might be an ok solution for now, but it's not a great long term solution. What if a tiny netbook comes to your site, and based on the responsive breakpoints you've set, it gets the "mobile" view based on its screen size, but it's a device without any actual touch capability?
Anyway, if you're using screen size as a proxy for touch capability, you can just go into your javacript and set a flag on the event that you want to use based on the window width you've determined as your "mobile" (touch) breakpoint. E.g. for a breakpoint at 600px:
var menuEvent = ($(window).width() < 600) ? 'hover' : 'click';
Then, when you want to bind your UI events, you would use:
$(element).bind(menuEvent, function() { ... });
I recommend that you should determine whether the device has hover or no. If it has hover, then generate your html so the result will be:
<body class="with-hover">
<!-- HTML Structure -->
</body>
If it does not have a hover, you should have:
<body class="without-hover">
<!-- HTML Structure -->
</body>
Now, define your hover event to be applicable specifically for the case when hover if possible:
$("body.width-hover").on("hover", yourSelector, function() {/*Hover code here*/});
Also, define your click event
$("body.without-hover").on("click", yourSelector, function() {/*Click event here*/});
I have created a button using the <button></button> tags. I applied .resizable() jQuery and it looks fine. But when I inspect element the button, it occupies the whole div with its margin-right though the margin-right is set to 0px. I've looked in the css and overrode some parts to fix it but I didn't succeed. What's causing it?
It is very similar to this: http://jsfiddle.net/nagwW/13/
If you inspect element the button, it occupies the whole row but how could I just limit the width with respect to its real width?
If you are using jQuery UI resizable function then you have to place the button element inside the element being resized, because jQuery UI's default functionality adds a div with class name "ui-resizable-handle". The clickable resize handle that you see.
<div id="resizable" class="ui-widget-content">
<button>Resizable</button>
</div>
See this JS Fiddle that I changed from jQuery UI:
http://jsfiddle.net/truthreveller/mX7Ej/3/
jsFiddle for this question
I am currently using bootstrap modal, which is a jQuery plugin to create a popup box. (If anyone wants to check out the very short documentation, here is a link to it - it's very short, so only takes a minute).
Unfortunately, I am having a couple problems:
I need to be able to define the size of the modal pop-up box. I tried the following, but it does not display correctly:
<div class="modal" id="myModal" style="width: 800px; height: 900px;">
I need to be able to hide the modal by default. Currently, it displays as soon as the page loads. I tried the following, but it does not seem to hide correctly:
$(document).ready(function() { $('#myModal').modal("hide"); });
Any idea how I might be able to resolve these issues?
Answer 1: Try defining the modal CSS class and set the width and height.
Answer 2: when calling the modal function, pass in an option object with th property "show" as false.
$("#myModal").modal({show: false});
Answer 3: you can handle the "shown" event and wire it up to make an AJAX call to web page and set the result as the inner HTML of the div.
Try the following in the source. Worked for me.
$('#ModalForm').dialog(
{
modal : true ,
autoOpen : false ,
height : 300,
width : 400,
. . . .
try this
<div class="modal" id="myModal" style="width:800px;height:900px;display:none;">
To answer the second question the documentation says you can add an option like $('#myModal').modal({'show':false}) so that on initialization it should not be shown.
Third question's answer is use an iframe or load the html using ajax. To stop people from submitting you could use javascript for that or place a clear div to prevent anyone from actually using it. The first method assumes you are loading the form from the same domain.
Try this to force the dimensions to the what you want $('#myModal').modal({'show':false).height('600px').width('500px');
You can supply the .hide class to the container of the modal to hide it, which is the default bootstrap method of hiding modals. As to the size, you can again supply your own class with your custom width and height to the container and it should take up on it, the way you're adding it inline now works fine as well, just make sure to add it to the main container.
So all in all your modal container should look like this:
<div class="modal hide fade custom-size" id="myModal"> ... </div>
Note: Added the .fade class to add the transition fade/slide effects, you can remove it if you like if you don't want those effects.
And as for the modal poping up as soon as you load your page all you have to do to remove that behavior is not call the modal at all as you are now, that way the modal will only popup when you click on action or "Launch Modal" button.
Here is a cleaned up fiddle, you had some non-valid styles like float:center (i wish that one existed): http://jsfiddle.net/zkzuM/2/, full page demo: http://jsfiddle.net/zkzuM/2/show/
#myModal{
height:200px;
width:100px;
}
try adding something like this to the css
your javascript
$('#myModal').modal({'show':false});
Take a look at the fiddle and its result.
.modal-body class has a max-height of 400px.
If you want a static height as 900px you should set height and max-height of .modal-body.
Otherwise that close button and its bar might float over the box.
#myModal .modal-body {
height: 775px;
max-height: 800px;
}
It's 775px for a 900px high #myModal because of margins and paddings of the box model.
It's always 125px shorter. If you want to make it dynamic you can write something like:
$('#myModal .modal-body').height($('#myModal').height()-125);
You do it right but have take a look the bootstrap CSS if it use the max-width min-width and comment it out.
If it does not work in JS you can do it by putting hide class in modal wrapper.
I am trying to implement jQuery UI tabs in my web app.
I am using ajax functionality so that the tabs are in the main "layout" of the page and each tab contains a different web page.
I want to wrap the content of the tab in aborder, but that the navigation panel of the tab won't be in the border.
I tried putting a border on the main div of the content, but I see only the top border and the rest don't appear.
Any ideas?
http://jsfiddle.net/GW5M2/
vs
http://jsfiddle.net/GW5M2/1/
As Gregg's demo showed, you need a clearing element at the end of the list of floating elements. Make sure the clearing element is not (accidentally) floating (i.e. use float: none). So, you would do something like:
<div>
<div style="float:right">foo</div>
<div style="float:right">bar</div>
<div style="clear:both; float:none"></div>
</div>