I'm using ArcGIS API for Javascript
ArcGIS Javascript
The formatting for the TabContainer is incorrect. However, after I do an "Inspect Element", the formatting corrects itself
Here's the code I use to create TabContainer:
<div id="tab_plot_info" dojoType="dijit/layout/TabContainer" onClick="tabclick" style="width: 100%;"
doLayout="false">
<div id="ploinfoTab" dojoType="dijit/layout/ContentPane" title="Plot Information" selected="true"></div>
<div id="devcodeTab" dojoType="dijit/layout/ContentPane" title="Development Code"></div>
<div id="devcodeprojectTab" dojoType="dijit/layout/ContentPane" title="Development Project"></div>
<div id="onwaniTab" dojoType="dijit/layout/ContentPane" title="Onwnai Address"></div>
<div id="communityfacilityTab" dojoType="dijit/layout/ContentPane" title="Community Facility"></div>
</div>
map.infoWindow.on("show", function () {
registry.byId("tab_plot_info").resize();
});
map.infoWindow.resize(415, 200);
map.infoWindow.setContent(registry.byId("tab_plot_info").domNode);
map.infoWindow.setTitle("Identify Results")
So what's going here and how do I fix the TabContainer formatting? Thanks!
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 used bootstrap 3 and blueimp-gallery in a web html5. My problem is a carousel-gallery dont show images and receive a error in a console "Uncaught TypeError: Cannot read property 'style' of undefined" when i use a blueimp-gallery-carousel in a modal div, but if i enter in a developer tools for chrome, this error disappears, and the images show in carousel-gallery.
The code.
<!-- Portfolio Modals -->
<!-- Use the modals below to showcase details about your portfolio projects! -->
<!-- Portfolio Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Vinilos</h2>
<div id="links">
1
2
3
</div>
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<p>Vinilos para rotulacion, decorativos, efecto espejo, fibra de carbono, refractivos, hologramas y farolas</p>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar Producto</button>
</div>
</div>
</div>
</div>
</div>
</div>
and my javascript
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
<script>
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true,
}
);
</script>
and the link web problem
http://www.colombiawaterprint.com/web/index3.html
How i Solve this error?
I believe your problem is that your blueimp gallery is initially hidden as it is in a Bootstrap Modal. As such, when you first initialize the gallery it can't find the gallery. I think all you need to do is wait for the Bootstrap modal to be shown and then initialize the gallery.
Bootstrap triggers an event that you can listen for for this very purpose - http://getbootstrap.com/javascript/#modals-events - You probably want the shown.bs.modal event.
You would use it something like this. (assuming jQuery is loaded)
$('#portfolioModal1').on('shown.bs.modal', function (e) {
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true,
}
);
})
Bear in mind this is untested code and may not 'just work'. But hopefully you get the idea. You also may want to do a test to see if you've already initialized the gallery, as it stands this would re-initialize it every time the shown.bs.modal event was fired.
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 am using materialize css for my app, and I using materialize v0.97.0
When I try to use slider it always shows grey background, I have also initialised the slider().
Here's my markup
HTML
<div class="row">
<div class="col s12">
<div class="slider">
<ul class="slides">
<li>
<img src="../images/bg3.jpg" alt="slider image"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
</div>
JS
$(document).ready(function () {
// Plugin initialization
$('.slider').slider();
})
I have also tried various solutions, but nothing worked
Your code is alright assuming that you initialize javascript correctly. Open the page, where your slider is, right click on the grey block and choose view image. If it does not show the image it is supposed to show, then problem is with your image source. Try using source image from the web.
If it shows the image when clicking - view image, the problem is with the initialization of the javascript. Check if your webpage loads correct javascript file.
In JS I wrote following code and it worked.
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
You need to actually set the transition times in the javascript to make it work
Put this after the jQuery plugin import
<script type="text/javascript">
$(document).ready(function() {
$('.slider').slider({
full_width: false,
interval: 5000,
transition: 800,
});
});
</script>
Any error in your JavaScript will prevent to let the slider shows , so check your console when you refresh the page and solve them and you will be fine :)
My best guess is that the source of your tag is pointing to a wrong path.
Just tried your code with a working image path and it worked like a charm.
Please, check if your source path is pointing to the right place. For testing purposes you should try changing your source to the following:
src="https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<div class="slider">
<ul class="slides">
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/1">
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/2">
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
Simply Use this class transparent
<ul class="slides transparent" style="height: 400px;">
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.