So here goes
I have a widget that I have created which contains an enhanced grid.
I now want this widget to have a titlePane that wraps around the enhanced grid which allows me to collapse the grid to the bottom of the page on click.
so, thinking this to be a simple task i edited the template in my widget to be the following:
<div id="wrapper">
<div data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'Over one year'">
<div data-dojo-attach-point="gridNode" id="grid"></div>
</div>
</div>
The behaviour I was expecting was a title pane wrapped around my enhanced grid but instead all i am getting is the grid appearing with no title pane.
Looking at the dom I can see the div for the title pane but no title pane is showing when loading the web page in the browser.
Any dojoers out there know what black magic is required for this to work?
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 am trying to implement a similar menu behavior as on Harvard's website: http://www.seas.harvard.edu/computer-science
where all the sections drop down no matter which link you put the mouse over.
Does anybody know what they are using for that? The closest I could find is the jQuery Superfish menu, but it only allows to open one menu section at a time.
Thank you in advance!
I've created a demo on JSFiddle which portrays what I was talking about in my comment. The particular result you are looking for is a simple modification of a normal drop down menu. Instead of having each of the drop downs be their own separate divs, you put them in a container div and display it when a drop down is needed.
So instead of:
<div id="drpDwn1"></div>
<div id="drpDwn2"></div>
<div id="drpDwn3"></div>
You'd have:
<div id="drpDwnFull">
<div id="drpDwn1"></div>
<div id="drpDwn2"></div>
<div id="drpDwn3"></div>
</div>
You would change the visibility on drpDwnFull instead of the individual items to get the full menu effect.
Then you can add highlighting as you wish. In my Demo I chose to highlight the menu associated with the menu item, as well as the individual item you are hovering over.
In my template i have a layout as such:
<div id="container">
<div resizable id="subContainer1">
<div objWrapper id="objWrapper1"></div>
</div>
<div id="subContainer2">
<div id="objWrapper2"></div>
</div>
</div>
subContainer1 calls a directive that uses jqueryUI. resizable
objWrapper1 calls a directive that loads an object to the page. That object will auto resize itself to fit the containing div.
Also elsewhere on the page I have reference to another directive that loads up buttons to resize the dom elements to preset sizes.
I have 2 problems right now.
1) When I drag the corner of subContainer1 it will resize but its child dom elements do not.
2) Once I drag the corner to resize the preset buttons will change the size of the object but no longer affect the encasing dom elements
My screen will be broke into 4 equal rectangles each with a chart in. I want the user to be able to click on a chart and the application then to zoom into a new view which is that chart as a whole page.
SO I would like the set-up:
app/charts displays all charts. Then when user selects a chart (say chart-1), the app navigates to app/charts/chart-1.
I would like the chart that is clicked to expand into view until it takes up the whole screen (the new view).
I'm open to any approach to this. CSS, javascript libraries, hacks (maybe just use one view and zoom in on the selected div?) I want be able to navigate to a full screen chart by url though...
Thanks, any help appreciated.
<div class="wrapper {selected_class}">
<div ng-click="selected_class='top-left'" class="top-left"></div>
<div ng-click="selected_class='top-right'" class="top-right"></div>
<div ng-click="selected_class='bottom-left'" class="bottom-left"></div>
<div ng-click="selected_class='bottom-right'" class="bottom-right"></div>
</div>
.top-left .top-left{ transform:scale(2); } etc
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>