I have a dijit.layout.contentPane defined as :
<div dojoAttachPoint="X_containerInternal" dojoType="dijit.layout.BorderContainer" splitter="true" region="center" gutters="true" >
<div dojoAttachPoint="X_objectDetail" dojoType="dijit.layout.ContentPane" region="left" splitter="true"
style="width:50%;">
</div>
<div dojoAttachPoint="X_documentDetail" dojoType="dijit.layout.ContentPane" region="center" splitter="true">
</div>
</div>
When the loading starts I have added a load Icon and when the data is placed in X_documentDetail(dojoattachpoint) I want to hide the load Icon but I am not getting event which is called when the loading is complete which can be specified in the attachevent.
Please guide.
Thanks in Advance
Maybe you can try:
dojo.connect(_container_, "onLoad", function(){ /* your script */});
Related
I am getting issue while display another component on click event, here is my code:
<div (click)="showThis = true"></div>
<div class="" [ngClass]="{'hide': showThis}"></div>
<div class="" [ngClass]="{'show': showThis}">
<another-screen></another-screen>
</div>
its displaying both, first should display without any click, if click event then this hide first and another component will display
means hide and show class will apply
any help
Thanks
Why you don't use hidden:
<div (click)="showThis = true"></div>
<div class="" [hidden]="!showThis"></div>
<div class="" [hidden]="showThis">
<another-screen></another-screen>
</div>
*ngIf removes the html element from DOM but [hidden] is use for display none or block html element same as hide and show
Why not use *ngIf
<div (click)="showThis = true"></div>
<div *ngIf="!showThis "></div>
<div *ngIf="showThis ">
<another-screen></another-screen>
</div>
Here is the scenario, I have multiple tiles on home page. when a user logins in for the first time some of them need to be disabled. Same i am trying to test using selenium.
To disable the div i am using ng-class by which i am applying .disableDiv class on the div which has below css
.disableDiv {
pointer-events: none;
opacity: 0.4; }
When i target it using .isEnabled() but it is showing true even if the disable class is applied on it.
Please suggest how should i target the disabled elements.
below as you see isNewUser is ng-class which applies .disableDiv on the element which makes is disabled for the end user.
Thanks in advance
HTML
<div class="col-md-6 col-sm-12 tile-box-1" id="div-importcontent" ng-class="isNewUser">
<div class="tile-box-2">
<div class="col-md-2 col-sm-2 col-xs-3 tile-box icon-box">
<!-- icon -->
<a class="d-icon-download icon" ui-sref="importcontent" id="a-importcontent"></a>
</div>
<div class="col-md-10 col-sm-9 col-xs-8 tile-box desc-box">
<h4 class="heading" ui-sref="importcontent" id="h4-importcontent">Import content</h4>
<!-- <a class="d-icon-info_circle icon-info"></a> -->
<span class="desc" ui-sref="importcontent" id="span-importcontent">Import installed applications reporting content into BMC Remedy Smart Reporting
</span>
</div>
</div>
</div>
I am a dojo newb so I am probably making a simple error somewhere. I am trying to get a borderContainer set up without liveSplitters but even though I set it to false the splitters are still there. The gutters:false property is reflected properly Please help me figure out what I am doing wrong.
Thanks
<body class="claro">
<div id="appLayout"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design: 'headline', gutters: false, liveSplitters: false ">
<div class="centerPanel" data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region: 'center'">
<div>
<h4>Group 1 Content</h4>
<p>para 1</p>
</div>
<div>
<h4>h4 para 2</h4>
</div>
<div>
<h4>h4 para 3</h4>
</div>
</div>
<div class="edgePanel" data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region: 'top'">Header content (top)</div>
<div id="leftCol" class="edgePanel"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region: 'left', splitter: true">Sidebar
content (left)</div>
</div>
Remove the splitter attribute from the content pane.
<div id="leftCol" class="edgePanel"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region: 'left'>Sidebar
content (left)</div>
The liveSplitters property describes the behavior of the splitters, NOT whether they exist.
// liveSplitters: [const] Boolean
// Specifies whether splitters resize as you drag (true)
// or only upon mouseup (false)
liveSplitters: true,
I know that we can add left and right buttons in a header in Jquery Mobile App.
But can we any more buttons or controls in the header section itself?
I think I have a better solution,
<header data-role ="header" data-theme="b">
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</header>
Screenshot;
with regard to this info:
you can find it here:
http://www.metaltoad.com/sites/default/files/Responsive-Widths_0.png
you can use this code:
<style type="text/css">
#media all{
.my-header-grid.ui-grid-b .ui-block-a { width: 30%; }
.my-header-grid.ui-grid-b .ui-block-b { width: 40%; }
.my-header-grid.ui-grid-b .ui-block-c { width: 30%; }
}
}
</style>
<div class="my-header-grid ui-grid-b" data-theme="a">
<div class="ui-block-a ui-bar-a" data-theme="a">
<div align="left" style="padding-left:5px;padding-top:3px;height:33px;height:40px;">
Back
Edit
</div>
</div>
<div class="ui-block-b ui-bar-a">
<div align="center" style="padding-top:3px;height:33px;text-align:center;height:40px;">
<div style="padding-top:7px;">
<article role="heading" aria-level="1">expand </article>
</div>
</div>
</div>
<div class="ui-block-c ui-bar-a">
<div align="right" style="padding-top:3px;height:33px;height:40px;">
Add
Refresh
</div>
</div>
</div><!-- /grid-b -->
if by any chance your programming with c# mvc razor engine don't forget to write the css media tag with 2 # like so ##media because the razor engine treats 2 # as one.
you see and can play with all of the designs shown here in this link:
http://jsfiddle.net/yakirmanor/BAat8/
iv added some links but i recommend youll read this:
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/
the simple implantation is:
<header data-role ="header" data-theme="a">
<a data-icon="back" href="/" rel="external">Back</a>
<h1 class="ui-title" role="heading">Staff</h1>
<a class="ui-btn-right" data-icon="back" href="#" rel="external">Refresh</a>
</header>
or this:
<div data-role="header" data-theme="b">
<a data-icon="back" href="/" rel="external">Back</a>
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</div>
or this:
<div data-role="header" data-theme="e">
<div class="ui-btn-left" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</div>
hope iv helped.
It might be easier to create a custom navbar instead of modifying the header toolbar, Here si the docs: http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-navbar.html
This might help:
<div class="ui-btn-right">
<!-- Home Button -->
<a href="index.html" data-role="button"
data-icon="refresh" data-iconpos="notext" data-direction="reverse" data-corners="true"
data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Refresh">
</a>
<!-- Home Button -->
<a href="index.html" data-role="button"
data-icon="home" data-iconpos="notext" data-direction="reverse" data-corners="true"
data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Home">
</a>
</div>
This gives me those nice rounded buttons, two side by side on the right side.
Just like on the mobile docs.
Works in 1.1.1, haven't tried the latest RC
I was able to achieve this by the following code:
<div data-role ="header" data-theme="b">
Prev
<div data-role="controlgroup" data-type="horizontal" style="margin-left:75px;margin-top:5px;" >
<a href="index.html" data-role="button" data-icon="arrow-l" >P.Week</a>
N.Week
</div>
Next
</div>
No, there is a hard limit of 2 as far as I have found. The best I was able to come up with was to get another unstyled link to appear.
There are however, navbars - On one of my projects, I needed a number of buttons in the header area, I placed a navbar directly below it, and was reasonable pleased with the results.
They are explained in detail here:
http://jquerymobile.com/test/docs/toolbars/docs-navbar.html
How to add vertical scrollbar to dojox.grid.DataGrid ?
<div id="system_status" >
<div dojoType="dojo.data.ItemFileReadStore" jsId="system_flags" data="window.store_data_system_flags"> </div>
<div id="grid" dojoType="dojox.grid.DataGrid" store="system_flags" structure="window.layout_system_flags" queryOptions="{deep:true}" query="{}" clientSort="true" rowsPerPage="10"> </div>
</div>
Just set CSS "height" style for div with id "system_status" and if the grid will need more space than scrollbar will appear automatically.
<div id="system_status" style="height:200px" >
<div dojoType="dojo.data.ItemFileReadStore" jsId="system_flags" data="window.store_data_system_flags"> </div>
<div id="grid" dojoType="dojox.grid.DataGrid" store="system_flags" structure="window.layout_system_flags" queryOptions="{deep:true}" query="{}" clientSort="true" rowsPerPage="10"> </div>
</div>
dojo-grid-styling
I found I could add this style to override the dojo style that might cut off anything at the bottom of the grid:
.dojoxGridContent {
overflow: auto;
}