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,
Related
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 have a panel that floats right within a container. When my data-spy affix executes, the side-panel gains the position: fixed property which removes the float: right. The panel becomes fixed at the correct height, but becomes fixed at the left in the container not the right in the container. I cannot simply state a fixed value for the left property because I am using a container fixed to 1200px, not container-fluid and the left offset changes whenever the user resizes their screen.
How can I set the panel mimic float-right while affixed near the top of the view?
<div id="navbarContainer" class="affix-top clearfix" data-spy="affix" data-offset-top="70">
<div class="navbar navbar-inverse navbar-static-top" role="navigation" id="topnavbar">
</div>
</div>
// code removed
<div class="container">
<div id="right_panel" class="panel right-panel pull-right">
<div class="panel-head">
Related Information
</div>
<div class="panel-body">A Basic Panel</div>
</div>
css
.rightpanelAffix{
position:fixed;
top:101px;
}
js
$("#navbarContainer").on("affixed.bs.affix", function () {
$("#body").addClass("bodyAffixPadding");
$("#right_panel").addClass("rightpanelAffix");
});
$("#navbarContainer").on("affixed-top.bs.affix", function () {
$("#body").removeClass("bodyAffixPadding");
$("#right_panel").removeClass("rightpanelAffix");
});
Please Show us some code. and may be you want to ask that you can't adjust your container size. Let me know if this helps.
Check this out
<div class="container">
<div class="row">
<div class="col-lg-1 col-md-6"></div></div></div>
I need to use BorderContainer inside a TabContainer in dojo. My requirement is to have 3 different pane inside each of the tab which I will create. So for that I am trying to use BorderContainer inside TabContainer but it seems to be not working. Here is what I am trying.
A,B and C are the tabs which i am trying to create.Inside which I am using ContentPane for each of them and then BorderContainer to specify left,center and right region for that particular tab.
But it is not giving me any output. Please advise what i am doing wrong here.
<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="splitter:true, region:'top'">
<div data-dojo-type="dijit/layout/ContentPane" title="A" selected="true" data-dojo-props="splitter:true">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="guuers:false">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'left'">Left pane of Tab A</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'center'">Center pane of Tab A</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'right'">Right pane of Tab A</div>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="B" data-dojo-props="splitter:true">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="guuers:false">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'left'">Left pane of Tab B</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'center'">Center pane of Tab B</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'right'">Right pane of Tab B</div>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="C" selected="true" data-dojo-props="splitter:true">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="guuers:false">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'left'">Left pane of Tab C</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'center'">Center pane of Tab C</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true,region:'right'">Right pane of Tab C</div>
</div>
</div>
</div>
Your declarative markup is correct, but since I can't see the rest of your code I would guess that you are not calling require on TabContainer, BorderContainer and ContentPane. Dojo needs you to bring those in before you can use them declaratively like you are doing. So you would need this in your javascript:
require([
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane"
]);
Here is a pen that shows your code works, so I would check to see if you are pulling in those modules with require.
http://codepen.io/kyledodge/pen/MwpMZm
The other thing to check is if your dojoConfig is set to parseOnLoad:
dojoConfig = {
parseOnLoad: true
};
If not, you'll either need to set that, or require dojo/parser and call parser.parse(). Parser is key to using the data-dojo-type attribute like you are doing. Here is some info that may be helpful:
http://dojotoolkit.org/reference-guide/1.10/dojo/parser.html
I don't exactly have an answer but I think I can pin down exactly why nothing shows up: The border container doesn't seem to "fill" the containing object. I'm trying to put a border container inside another border container, and its child nodes are present but seem to end up with zero height. Apparently you have to explicitly set the border container's dimensions.
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 */});
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;
}