I am trying to create a simple portlet with map using extjs 4 and leaflet.
The problem is that map does not appear in my portlet element entirely.
It loads some wrong tiles(256x256) that are out of my portlet. This wrong tiles are on left side higher and right side lower.
Is there any tricks to fix it?
Here on screenshot how it look likes.
Maybe this can help to find out?
I think it happens because of wrong left and top attributes in img class:
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9904/5121/" style="height: 256px; width: 256px; left: -79px; top: -251px;">
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9905/5123/" style="height: 256px; width: 256px; left: 177px; top: 261px;">
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9904/5122/" style="height: 256px; width: 256px; left: -79px; top: 5px;">
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9903/5121/" style="height: 256px; width: 256px; left: -335px; top: -251px;">
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9902/5121/" style="height: 256px; width: 256px; left: -591px; top: -251px;">
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9902/5120/" style="height: 256px; width: 256px; left: -591px; top: -507px;">
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9901/5120/" style="height: 256px; width: 256px; left: -847px; top: -507px;">
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9901/5119/" style="height: 256px; width: 256px; left: -847px; top: -763px;">
You'll need to call L.Map's invalidateSize method after your panel is fully rendered:
Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically, also animating pan by default.
http://leafletjs.com/reference.html#map-invalidatesize
I'm no ExtJS specialist but i took a quick glance at the API and it seems to me you can do that by listening for the afterRender event whichs is fired on Ext.panel.Panel:
Fires after the component rendering is finished.
http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.panel.Panel-event-afterrender
EDIT: Found this example where they initialize a Google Map in a afterRender function of Ext.panel.Panel. This is done for the same reason: At that point the panel's size can be determined which is a necessity for correctly initializing the map instance:
http://docs.sencha.com/extjs/4.0.7/#!/example/window/gmap.html
EDIT 2: Since OP said none off the above is a solution i modified the google example to use Leaflet and created a testcase on Plunker:
http://embed.plnkr.co/Fo9nOYH3KUHRqw4Soq6F/
Method invalidateSize() solve my problem. I put it on map resize event.
Related
My problem is in finding all Dev Data from DOM using XPATH in selenium webdriver so that count number of elements.
Data Resides in Dev tag and have 20 documents. When I do F12 it is showing only 6 items in dev at a time and when I try to find elements using XPATH it is fetching only 6 documents.If I do scroll in UI DOM gets updated and shows new items which are visible in UI now.
So is there any way to get all data (20 Documents) at once from DOM? Scrolling in UI each time and then getting data will be tricky and not feasible.
Below is DOM:
<div id="datatable1481094646361" class="webix_view webix_dtable job_table" style="border: 0px solid red; position: relative; width: 1380px; height: 240px;" view_id="optlist-completed">
<div class="webix_ss_header" style="height: 47px;">
<div class="webix_ss_body">
<div class="webix_ss_left" style="width: 0px; height: 193px;">
<div class="webix_ss_center" style="width: 1363px; height: 193px;">
<div class="webix_ss_center_scroll" style="width: 1363px; height: 193px;">
<div class="webix_column webix_first" style="width: 80px; left: 0px; top: 0px;" column="0">
<div class="webix_column " style="width: 322px; left: 80px; top: 0px;" column="1">
<div class="webix_cell">Opt_S_Rel_034</div>
<div class="webix_cell">Opt_S_Rel_033</div>
<div class="webix_cell">Opt_S_Rel_032</div>
<div class="webix_cell">Opt_S_Rel_031</div>
<div class="webix_cell">Opt_S_Rel_030</div>
<div class="webix_cell">Opt_S_Rel_029</div>
</div>
<div class="webix_column " style="width: 321px; left: 402px; top: 0px;" column="2">
<div class="webix_column " style="width: 100px; left: 723px; top: 0px;" column="3">
<div class="webix_column " style="width: 180px; left: 823px; top: 0px;" column="4">
<div class="webix_column " style="width: 180px; left: 1003px; top: 0px;" column="5">
<div class="webix_column webix_last" style="width: 180px; left: 1183px; top: 0px;" column="6">
</div>
</div>
<div class="webix_ss_right" style="width: 0px; height: 193px;">
</div>
And In actual similar to Opt_S_Rel_034 there are more than 20 rows available in Application UI.
Using: XPATH= //div[#view_id='optlist-completed']//div[#column=1]
to get all test which is returning only 6 document
If I do scroll in UI DOM gets updated and shows new items which are visible in UI now
The DOM is probably getting updated by JavaScript, which means the documents doesn't exist in the DOM until the update (triggered by the scroll down) and that why you can't see them with F12 and selenium catch only 6. If the documents do not exist in the DOM, Selenium can't fetch them.
I need some help with header icons. I add icons near logo, and i want to make them with link, but they are not working.I can click on logo, but I can't click on them.
Here is the part of code:
<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
<img class="logo" style="margin-bottom:10px;" src="https://www.irankiuparduotuve.lt/img/irankiu-parduotuve.png" alt="{$shop_name|escape:'htmlall':'UTF-8'}" />
</a>
<a href="https://www.irankiuparduotuve.lt/info/kaip-pirkti/#4">
<img style="margin-bottom:10px; position: absolute; top: 13%; left: 23%;" src="https://www.irankiuparduotuve.lt/img/saugu.png" alt="Saugu pirkti!" />
</a>
<a href="https://www.irankiuparduotuve.lt/info/kaip-pirkti/#7">
<img style="margin-bottom:10px; position: absolute; top: 13%; left: 31%;" src="https://www.irankiuparduotuve.lt/img/pristatymas.png" alt="Pristatymas visoje Lietuvoje!" />
</a>
And this is how it looks like on website
it's probably cause by poorly written CSS rules. Your logos are positioned using position:absolute;,which is causing all the trouble. The anchor element <a> is positioned statically, meanwhile the image inside is position:absolute;. Therefore, the anchor element doesnt have any height or width and is unclickble.
What you can do is edit the CSS rules for anchor and image tags:
<a href="https://www.irankiuparduotuve.lt/info/kaip-pirkti/#7" style="
z-index: 11; margin-bottom: 10px;
position: absolute; top: 13%;
left: 31%; display: inline-block;">
<img style="/* margin-bottom:10px; */ /* position: absolute; */
/* top: 13%; */ /* left: 31%; */
/* display: inline-block; */"
src="https://www.irankiuparduotuve.lt/img/pristatymas.png">
</a>
Sorry for poor formatting. Basically you need to apply yout positionin rules to <a> element, not the <img>
Sėkmės!
Maybe I'm missing something obvious here, but so far I've found nothing that makes any sense with this. I have a scrollable div with a canvas inside of it. In FF and IE all works as expected: Using drag scrolling with the mouse, the div scrolls normally. In WebKit, however, things are flipped. If I scroll up, the content moves down, if I scroll down, it moves up. If I scroll with my mousewheel, everything moves in the right direction. It's only using mousedown on the scroll bar that's screwed up. NOTE: I am using a 3rd party library to generate the contents of the canvas, which is where all the inline styles are coming from.
My code is as follows:
#Palette {
height: 420px;
overflow: auto;
}
<div id="Palette" style="position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); cursor: move;">
<canvas width="268" height="420" tabindex="0" style="position: absolute; top: 0px; left: 0px; z-index: 2; -webkit-user-select: none; cursor: move;">
This text is displayed if your browser does not support the Canvas HTML element.</canvas>
<div style="position: absolute; overflow: auto; width: 268px; height: 420px; z-index: 1;">
<div style="position: absolute; width: 1px; height: 1px;"></div>
</div>
<div style="position: absolute; overflow: auto; width: 268px; height: 420px; z-index: 1;">
<div style="position: absolute; width: 1px; height: 700px;"></div>
</div>
</div>
This is apparently an issue with WebKit 36. It is solved in 37.
I am looking to center a div that is absolutely positioned inside of an overflow div.
Here is my HTML. Fiddle
<header class="contain960">
<div class="brand_logo"></div>
<nav>
<ul>
<li class="active">Boats</li>
<li>Cars</li>
<li>Powersports</li>
<li>RV's</li>
<li>Consignment</li>
</ul>
</nav>
</header>
<div class="site_line top"></div>
<div class="site_line custom"></div>
<div class="site_line bottom"></div>
And the CSS.
section {
position: relative;
max-width: 1280px;
min-width: 960px;
width: 100%;
overflow: hidden;
}
.site_line {
position: absolute;
width: 1280px;
height: 1px
//Gradient Fill
//Center the DIV;
}
.site_line.top{
top: 0px;
}
.site_line.bottom{
bottom: 0px;
}
The .site_line element should always remain centered in the div even as the section gets smaller than 1280px wide and not be pushed to the left. I've done this before with background images and the background-position property. but can't for the life of me figure it out how to do it with out javascript.
Any help would be fantastic!
Don't use position: absolute;!
Instead use margin: auto;:
.site_line {
margin: auto;
width: 1280px;
height: 1px
//Gradient Fill
}
Why is colorbox not auto-adjusting the width? Instead it is showing a
horizontal scrollbar.
This is the div that is shown inside the model.
<div style="width:900px">
<div style="float:left;width:640px;height:640px;text-
align:center;background-color:#666;">
<img src="xyz.gif" alt="#" />
</div>
<div style="float:left;background-color:#eee;min-width:260px">
Show buttons here that must show
</div>
</div>
How can I make sure that my colorbox model auto-expands to show 900px div
and no scrollbar?
The div is 708px witdth. Where is it getting this value from?
Another problem:
The height is sometimes 34px, sometimes 600px+ even if I click the same link.
This is wrapping divs from firebug:
<div id="colorbox" class="" style="padding-bottom: 42px; padding-right: 42px; display: block; position: absolute; width: 708px; height: 542px; top: 0px; left: 337px;">
<div id="cboxWrapper" style="height: 584px; width: 750px;">
<div id="cboxMiddleLeft" style="float: left; height: 542px;"></div>
<div id="cboxContent" style="float: left; width: 708px; height: 542px;">
<div id="cboxLoadedContent" style="display: block; width: 708px; overflow: auto; height: 522px;">
Somehow the width of the parent divs are getting calculated.
You're specifying a width of 640px.... change that to min-width and then it would be allowed to grow.
By default, the plugin sizes itself to the dimensions of the digital asset you are displaying with it. But this can be overriden.
Consult the plug-in doc-o and pay special attention to the Dimensions section (height, width, etc.) and consider specifying a value of 100%.
ColoBox docs