I would like to create a clickable icon in which once i click on it i will be able to change the size of a div to make it full size for the browser. This is what i have for html and wanted to know what possible ways to handle this functionality.
<div>
<a (click)="onResize($event)" class="icon-resize"></a>
</div>
the html that i would like to expand is:
<div id="editview">
<iframe id="editFrame"></ifram>
</div>
public onResize(event:any) {
event.target.innerWidth;
}
If you want screen full Windows with ifram you can use anmation with angular.
try Watch :
https://coursetro.com/posts/code/63/Angular-4-Animation-Tutorial
with animtation triger you can apply css width:100% for full screen
Related
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.
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 am using the SlidesJS JQuery plugin to display a sliding banner along the top of a webpage.
However, I am having troubles adding image captions that overlay on the images. As per the website above I create a new p with the class caption and enter my caption in that, but from what I can tell the plugin is thinking that this caption div is another slide and showing just the caption text after each of the images.
You can view the page here.
You might want to check the example SlidesJS with caption. A look into your html code and see right away that you are using one div block for all the images(slides). On the example code on the link, they split the images(slides) per div so that when you need to add a caption, you simply add a child inside div.
Their example has each slide within it's own and then the caption inside another div like so:
<div class="slide">
<img src="/images/myimage"/>
<div class="caption"><p>this image is awesome</p></div>
</div>
Without actually trying it, I think you may be missing the slide as well as the child caption classed div's
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>
I have the following HTML/CSS:
#scrollpanel{height:100px;overflow-x:hidden;overflow-y:scroll;width:200px}
<div id="scrollpanel">
<div class="listing ref_1">...</div>
<div class="listing ref_2">...</div>
<div class="listing ref_3">...</div>
...
</div>
As you can see, the scrollpanel is a scrollwindow defined to have a height of 100px and width of 200px.
How can I programmatically scroll the scrollpanel scrollbar/window to make a particular DIV focused/viewable, even if that DIV is not not currently viewable?
For example, say I have 10 DIVs (ref_1 to ref_10). Only 3 of the ref_ DIV can be viewable at a time based on the height of scrollpanel window. Now let's say I want to have the scrollbar auto scrolled to DIV ref_7, which is currently not viewable. How do I programmicatly have the scrollwindow scroll to and focus on ref_7?
Use the jQuery ScrollTo plugin, it's as simple as:
$('#scrollpanel').scrollTo('.ref_7');
You can scroll an element into view by using element.scrollIntoView().
I would take a look this plugin.
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Depending on what you need there may be a simpler solution without using a plug-in if you just want to scroll.