I have tried searching for a solution everywhere but could not find it. Hence posting a request here.
We have a website built on php code-ignition MVC framework, but the issue is with HTML rendering over various devices imo. a certain section on the bottom of the a rendered page disappears on iphone, it renders fine on ipad and normal browser. I have saved the page as HTML and am able to successfully reproduce it via chrome for devices (from developer tools), by switching over various devices.
The designer who helped create these templates are not accessible anymore, so I am not able to get any further help. I suspect it to be a CSS issue. The website uses twitter-bootstrap.
Screenshots:
Normal Browser & Iphone redering comparison:
(the div in question is marked by the arrow)
I have looked into the view source and the div in question appears on both versions in the HTML source:
<div class="button-holders button-overlay" id="button_holder">
<div class="col-sm-3 col-xs-3 noway" id="noway" style="display: block;">
<a id="noway1" style="cursor:pointer;text-decoration: none;"> <img src="./Coupon Crank_files/button.png" width="70" height="70"></a>
<a id="noway1" style="cursor:pointer;text-decoration: none;" onclick="rotate_crank_coupon_load('1', '0')"> NO WAY</a>
</div><!--noway-->
<div class="col-sm-3 col-xs-3 nah" id="nah" style="display: block;">
<a id="nah1" style="cursor:pointer;text-decoration: none;"> <img src="./Coupon Crank_files/nah.png" width="70" height="70"></a>
<a id="nah1" style="cursor:pointer;text-decoration: none;" onclick="rotate_crank_coupon_load('2', '0')"> NAH</a>
</div><!--noway-->
<div class="col-sm-3 col-xs-3 sure" id="sure" style="display: block;">
<a id="sure1" style="cursor:pointer;text-decoration: none;"> <img src="./Coupon Crank_files/sure.png" width="70" height="70"></a>
<a id="sure1" style="cursor:pointer;text-decoration: none;" onclick="rotate_crank_coupon_load('3', '0')"> SURE</a>
</div><!--noway-->
<div class="col-sm-3 col-xs-3 ohyeh" id="ohyeh" style="display: block;">
<a id="ohyeh1" style="cursor:pointer;text-decoration: none;"> <img src="./Coupon Crank_files/heart.png"></a>
<a id="ohyeh1" style="cursor:pointer;text-decoration: none;" onclick="rotate_crank_coupon_load('4', '0')"> OH YES</a>
</div><!--noway-->
<div class="report_abouse_style" id="report_abouse" style="display: block;">
<a class="badge badge_edit" id="report_abouse1" style="cursor:pointer;text-decoration: none;"> Report Abuse</a>
</div>
Could it be something that can be fixed via modifying the CSS?
I am attaching the html files to reproduce the issue locally: http://filenurse.com/download/c5d96491585893ee917842a6f11f8166.html
Any help in the right direction would be greatly appreciated.
Thanks in advance,
AD
Related
So i was making a project tribute page and as i started to write the css i was first checking it with firefox device toolbar, but when i opened the same code on chrome the image that i had given a img-fluid class was taking up its original full width (1065px)
The div #content is inside a div with .container-fluid
this is how it looks on chrome
this is how it looks on firefox
<div id="content" class="container">
<div id="Home" class="container mx-auto">
<div id="title">
<p>a tribute to</p>
<h1>Joan Didion</h1>
<p id="date">1934 - 2021</p>
</div>
<div id="head-img">
<figure>
<img src="images/didion-edit.webp" alt="image of joan didion" class="img-fluid">
<figcaption>Joan Didion by Mary Lloyd Estrin.</figcaption>
</figure>
</div>
<div id="description">
<figure>
<blockquote><p>I write entirely to find out what I’m thinking, what I’m looking at, what I see and what it means. What I want and what I fear.</p></blockquote>
<figcaption>Why I Write</figcaption>
</figure>
</div>
</div>
edit: okay so i started to add elements to a new file to see when the error would start to occur and it happened when I pasted the section that follows #Home which is #Bio.
I will edit the code so you can see the following section because i still dont know why it's causing the issue
/*I'll take away the css because none of it proved to be an issue*/
<div class="container-fluid">
<!-- there's a nav div here but it doesnt cause issues-->
<div class="container-fluid" id="content">
<div id="Home" class="container mx-auto">
<div id="title">
<p>a tribute to</p>
<h1>Joan Didion</h1>
<p id="date">1934 - 2021</p>
</div>
<div id="head-img">
<figure>
<img src="images/didion-edit.png" alt="image of joan didion" class="img-fluid">
<figcaption>Joan Didion by Mary Lloyd Estrin.</figcaption>
</figure>
</div>
<div id="description">
<figure>
<blockquote><p>I write entirely to find out what I’m thinking, what I’m looking at, what I see and what it means. What I want and what I fear.</p></blockquote>
<figcaption>Why I Write</figcaption>
</figure>
</div>
</div>
<!--the #Bio has three .achivement elements but even if its just one and the figure element the issue occurs-->
<div id="Bio" class="container">
<div id="summary">
<h1>Her life</h1>
<div class="achivement">
<ul>
<li>The iconic writer got her start when she won Vogue's "Prix de Paris" contest and got a job opportunity in the magazine's
New York office as price for one month. Once there, she got a permanent position after writing a seminal article on self-respect on the fly after the reporter that was supposed to make the assignment failed to deliver a complete article. She worked at the famed magazine for years after that.</li>
</ul>
<blockquote cite="https://www.nytimes.com/1976/12/05/archives/why-i-write-why-i-write.html">
<p>
" Had I been blessed with even limited access to my own mind there would have been no reason to write. I write entirely to find out what I'm thinking, what I'm looking at, whot I see and what it means."
</p><cite>-- Joan Didion on her "Why I Write" article for the New York Times</cite>
</blockquote>
</div>
<figure>
<img src="images/tradlands-flickr.jpg" alt="joan didion in later years">
<figcaption>Didion by Irving Penn.</figcaption>
</figure>
</div>
</div>
</div>
</div>
Try adding the rule in your css file:
<style>
figure .img-fluid {
width: 100%;
}
</style>
I'm pretty sure it will work for you.
So after taking off and adding elements one-by-one I realized that an image on the section that followed the #Home div didn't have .img-fluid
I don't know why that wasn't an issue on firefox but I've tested the code on both browsers and it's working properly.
I am trying to measure engagement (capture text input, send value into GTM data layer etc.) when a visitor clicks on dropdown and type into the text box (see screenshot).
The problem is, there is no submit button. Search and display is performed automatically. Wondering, is even possible to push entry text into GTM Data layer?
Form screenshot
Here is the part of the script
<div class="dropdown-menu open" style="max-height: 481.5px; overflow: hidden; min-height: 151px;">
<div class="bs-searchbox"><input type="text" class="form-control" autocomplete="off"></div>
<ul class="dropdown-menu inner" role="menu" style="max-height: 420.5px; overflow-y: auto; min-height: 90px;">
<li data-original-index="1" class="">
<a tabindex="0" class="indent-1 location-name" style="" data-tokens="null">
<span class="text">All Destinations</span><span class="fa fa-checkmark check-mark"></span>
</a>
</li>
<li data-original-index="2" class=""><a tabindex="0" class="indent-1 location-name js-state-AL" style="" data-tokens="null"><span class="text">Alabama</span><span class="fa fa-checkmark check-mark"></span></a></li>
.
.
.
.
.
</ul>
</div>
You can do this via custom HTML tag. In the tag you write a custom listener for the keydown browser event. It's slightly complicated but described very well in the link below by simo ahava.
https://www.simoahava.com/analytics/track-autocomplete-search-google-tag-manager/
Hope that helps.
I have written selenium code for smoke test on my MSCRM aplication. I am unable to click Ribbon Button . Action can be performed by simple click or double click.The Below two Code i have written for Button
WebElement Email = driver.findElement(By.xpath("//span[text()='Email Handling']"));
Actions action2 = new Actions(driver);
action2.moveToElement(Email).doubleClick().perform();
OR
// driver.findElement(By.xpath(".//*[#id='incident|NoRelationship|Form|fmc.incident.form.Button.EmailHandling-Medium']/span[2]")).click();
Below is HTML structure of page
<html webdriver="true">
<head>
<body scroll="no">
<noscript> <div style="padding:10px;background-color:#C9C7BA;"> <span class="warningHeader">Important:</span> <hr size="1" color="#000000"> <span class="warningDescription"> Microsoft Dynamics CRM makes <i>extensive</i> use of your Web browser's client-side abilities. You either have one of these features turned off or your security settings are set so high that they prevent these features from being used. To enable these features, change your browser settings to allow the Microsoft Dynamics CRM site to run JavaScript. Learn more. </span> </div> </noscript>
<!--[if MSCRMClient]> <script type="text/javascript"> var MS_CRM_CLIENT_OUTLOOK_INSTALLED=true; </script> <![endif]-->
<span id="crmEventManager"/>
<div id="crmHistoryManager" style="display:none;" count="1"/>
<div id="crmRecentlyViewed"/>
<div id="crmLookupMru"/>
<div id="crmTopBar" class="ms-crm-TopBarContainer ms-crm-TopBarContainerForm" style="visibility: visible; background-position: 719px 0px;">
<div id="crmRibbonManager" currentribbonelement="ribbonContainer0" style="">
<div id="ribbonContainer0" class="loaded" style="display: inline;">
<div id="Mscrm.Ribbon" class="ms-cui-ribbon" unselectable="on" aria-describedby="ribboninstructions" role="toolbar">
<span id="ribboninstruction" class="ms-cui-hidden" unselectable="on">undefined</span>
<div class="ms-cui-ribbonTopBars" unselectable="on">
<div class="ms-cui-tabContainer " unselectable="on">
<ul id="EntityTemplateTab.incident.NoRelationship.Form.Mscrm.Form.incident.MainTab" class="ms-cui-tabBody" unselectable="on" role="tabpanel" aria-labelledby="EntityTemplateTab.incident.NoRelationship.Form.Mscrm.Form.incident.MainTab-title">
<li id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Save" class="ms-cui-group" unselectable="on">
<li id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions" class="ms-cui-group" unselectable="on">
<span class="ms-cui-groupContainer" unselectable="on">
<span class="ms-cui-groupBody" unselectable="on">
<span id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions-LargeMediumLarge" class="ms-cui-layout" unselectable="on">
<span id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions-LargeMediumLarge-0" class="ms-cui-section" unselectable="on">
<span id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions-LargeMediumLarge-0-0" class="ms-cui-row" unselectable="on">
<a id="incident|NoRelationship|Form|fmc.incident.form.Button.EmailHandling-Medium" class="ms-cui-ctl-medium " unselectable="on" href="javascript:;" onclick="return false;" aria-describedby="incident|NoRelationship|Form|fmc.incident.form.Button.EmailHandling_ToolTip" mscui:controltype="Button" role="button">
<span class="ms-cui-ctl-iconContainer" unselectable="on">
<span class="ms-cui-ctl-mediumlabel" unselectable="on">Email Handling</span>
</a>
</span>
<span id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions-LargeMediumLarge-0-1" class="ms-cui-row" unselectable="on">
<span id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions-LargeMediumLarge-0-2" class="ms-cui-row" unselectable="on">
</span>
<span id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions-LargeMediumLarge-1" class="ms-cui-section" unselectable="on">
<span id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions-LargeMediumLarge-2" class="ms-cui-section" unselectable="on">
</span>
Can any one look into this Issue. I checked there is no frame on HTML page
I didn't got any exception but there is no action performing after click action on button
after wait of 1 min new window is opening in eclipse IDE and getting Class File Editor......Source not found Issue
I have just roughly looked at the html element via FireBug I found the top container
become like that
<div id="crmHistoryManager" style="display:none;" count="1"/> eventhough the div element ends on the same line but the fireFox has different interpretation
if we run your code, I get exception which state current element is not visible, hence you can't interact with so the FireFox has converted the given div into a top container for all other divs below.
I've got the following nav on my site
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar pull-right" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/"><span class="icon-chevron-up icon-medium"></span> Rocky Mountain Arts</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
Gallery <b class="caret"></b>
<ul class="dropdown-menu">
<li>For Sale</li>
<li>Sold</li>
<li>Private Collection</li>
</ul>
</li>
<li>About The Artist</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
When I view the site on my desktop, I see everything as expected, and I can navigate all of the links.
HOWEVER: When I load the site up on my iPhone, press the toggle collapse button and then expand the dropdown, I cannot click any of the sub links within the dropdown menu, rather the menu closes and either the "about" or the "contact" link activate instead.
How can I fix this?
Thanks #MiikaL for the comment. Looks like it's a bug filed over at Github that no-one is really addressing in the official source code.
https://github.com/twitter/bootstrap/issues/4550
This can be reproduced on the github components demo page
http://twitter.github.com/bootstrap/components.html#buttonDropdowns
There are people with helpful info in the tread, and the 'hack' solution seems to be
// Fixes sub-nav not working as expected on IOS
$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });
This issue is finally fixed in the latest Twitter Bootstrap as of version 2.2.2:
You can read a short summary about the changelog in 2.2.2 here:
http://forwebonly.com/things-you-should-know-about-twitter-bootstrap-2-2-2/
I have created phonegap app for iPhone and iPod touch, though i use to test it on iPod touch.
Problem: The images show up randomly, else it would show a question mark within the placeholder. I have tried running this app at several places like iPhone, iPod, desktop browser (with click event, not touch). Out of which on iPod and Desktop browser it seems to run fine, whereas on iPhone or iPhone Simulator I get random images to be broken.
Its an gallery for images, thus images are most important.
Any suggestions or pointers appreciated.
Below is a sample page code:
<div id="galleryRava" >
<div id="galleryRavaScroll">
<!--gallery scroll frame-->
<!-- /header -->
<div>
<div id="galleryRavalist">
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="capsicum_rava_masala"><img src="images/sankalp/rava/capsicum_rava_masala.JPG">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Capsicum Rava Masala</span>
</a>
</div>
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="coconut_rava"><img src="images/sankalp/rava/coconut_rava.jpg">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Coconut Rava</span>
</a>
</div>
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="crispy_rava"><img src="images/sankalp/rava/crispy_rava.JPG">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Crispy rava</span>
</a>
</div>
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="kanchipuram_achari_rava"><img src="images/sankalp/rava/kanchipuram_achari_rava.jpg">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Kanchipuram achari rava</span>
</a>
</div>
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="onion_rava"><img src="images/sankalp/rava/onion_rava.jpg">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Onion Rava</span>
</a>
</div>
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="udupi_rava"><img src="images/sankalp/rava/udupi_rava.JPG">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Udipi rava</span>
</a>
</div>
</div>
<div class="clear"> <br><br><br></div>
</div>
<!-- /content -->
</div><!--gallery scroll ends here-->
</div>
It's not immediately clear where you're loading the images from. Are these images stored somewhere, online? Or are you trying to access images that are already stored on the device?
And is it correct to say that sometimes the images show up, and sometimes they do not? Have you had an instance where you've had all the images appear? Or is there always at least one image missing?