I am designing an html5 website for iPad. In the website there are 2 paragraphs as follows:
<section id="desc">
<p id="title-text"></p>
<p id="alt-text"></p>
</section>
Whose text I want horizontally center of the screen. The text inside the "title-text" and "alt-text" will be filled dynamically at run-time by JavaScript and could change thus width and height have been set to auto and not a static value.
On setting width as auto, it takes the width of the section as well as that of paragraph to be 100%, thus
margin:0 auto;
does not work.
I have tried
text-align:center;
but it does not work in iPad Safari(works on desktop Safari).
Please Help! What should I do?
P.S.- Already tried the
align="center"
and the < center > tag, which by the way is depreciated in HTML5, but to no avail.
Related
I have this simple html that uses a tiny bit of bootstrap:
<div id="A" class="col-4">
<div class="img" style="background-image: url(/images/image.jpg);">
</div>
<div id="B" class="col-8">
*some content*
</div>
And its corresponding CSS:
.img { width: 100%; height: 100%; }
Everything is in this pen : https://codepen.io/anon/pen/EbBGQw
The image correctly displays on the entire height of the parent div on either Chrome or Firefox, either Windows or Android :
However, on iOS devices (tested on iPhone and iPad recent browsers), the images don't show up :
I've done some digging and cleared some potential culprits :
I'm not using position: fixed;
My images aren't too large
I'm not using the background shorthand
What I have found, however, is that entering any text inside the "img" div will make the background-image appear behind the text. The image still won't cover the entire div, but it does appear.
Why is Safari not showing the image properly ? What is the best way to deal with the issue and have the image properly cover its entire div ?
When you set the height to 100% :
The height will only be as large as what is inside the element.
If there is nothing inside, the height will be 0.
If there is a paragraph (as shown here), the height will be as large as the paragraph. I suggest using either pixels, rems or ems instead.
The way you wrote your image style background did not work in chrome either. I put it in the img class instead and it worked.
If you don't want to add the background image to your img class, you could do this instead:
<div class="img" style="background-image: url('image.jpg')"><p>Testing</p></div>
.img {
width: 100%;
height: 100%;
background-image: url("image.jpg");
}
<div class="img"><p>Testing</p></div>
After more digging, and the suggestion from #Michelle Cantin, I found out that the height: 100% from my CSS is ignored by Safari.
In this great answer, a fix is proposed using position: absolute;. I applied relative position to the parent element (#A) and absolute positioning to the child (.img), which fixed the issue.
The image can be seen covering the entire left column for as heigh as the right column goes in this pen : https://codepen.io/anon/pen/bYPzew
Facing an issue in iPhone, creating a chatting web application. Having chat window on pop-up fixed position. when click on text input to send message, iPhone keyboard open it and shift the header part of chat section to top
Need to fix
Header and text-area should always be visible same as in whats-app
Set header-part to fixed position and same text-area on fixed, even keyboard is open or not
Prevent this shifting of header on top means prevent the iPhone scroll
Note: It is working fine in Android phone. Only issue with iPhone browsers, may be due to iPhone scroll.
Here is a simple conceptual example :
<article class="pop-up">
<h3>Title</h3>
<div class="content"> <p>Some scrollable content ...</p> </div>
<div> Some CTA buttons that should be visible for the user </div>
</section>
CSS:
.pop-up {
position: fixed;
// some other styles to display it as a popup
}
.content {
position: relative;
max-height: 100px; // set any max height that fits your design
overflow-y: scroll;
}
I've been struggling with this one for a while. I'm using skrollr on a new site, and it is working great on the desktop. However, the content is getting cut off on ipad and android touch devices after turning the device from either landscape to portrait or vice versa. It is very similar to the problem described here : Skrollr cutoff on iPad, but the solution they recommended there is not fixing the problem for me.
This can sort of be fixed by adding padding to the bottom of the skrollr-body div, but the amount needed changes between portrait and landscape. The page seems to need a refresh when that is changed, so CSS and media queries aren't cutting it for me at the time.
Any ideas? Really digging Skrollr otherwise, but this is driving me crazy.
Here is the link for viewing :
http://rweststaging.com/stackoverflow/test.php
Here is the basic code :
// Top fixed section
<div id="animation"
data-0p="position:fixed; top:0%;"
data-100p="position:fixed; top:0%;"
data-120p="position:fixed; top:0%;"
data-210p="position:fixed; top:-130%; opacity:1; display:block;"
data-220p="opacity:0; display:none;"
>
</div>
//lower content section
<div id="skrollr-body"
style="position: absolute; top: 220%; width: 100%;"
data-top="" data-bottom=""
>
//content sections go here
</div> // end skrollr body
//skroller init
skroll = skrollr.init({
// mobileCheck:function(){return false;},
forceHeight:false,
smoothScrolling: true,
smoothScrollingDuration: 600
});
I've experienced issues putting by not having the #skrollr-body div independent (as this inherits a new function when detecting mobile).
So try wrapping your #skrollr-body div around your div with sections -
// Top fixed section ...
<div id="skrollr-body" style=""> // no styles
<div class="nonfixed" style="position:absolute; top:220%; width:100%;">
// all non-fixed elements
</div>
</div>
I'm noticing an odd effect in jQuery Mobile when viewing a page's background image on a low resolution screen (or resizing your browser's window to simulate a small screen). When navigating to a page with a background image, the image appears near the bottom of the screen for a split second, before "jumping" up to the center of the screen (it should appear in the center of the screen right from the start).
I set up a fiddle to demonstrate what I'm referring to. To get the full effect, first resize the fiddle "Result" window (bottom right of the screen) to where it's approximately the size of the div with the red background. Then click on the "Image page" button.
http://jsfiddle.net/FgVz8/3/
What causes the background image to have this "jerky" behavior? And more importantly, any ideas how I can fix it?
It wouldn't be a big deal if it was just a single image, but I'm building an image gallery with back/forward buttons, and every single image (each on a separate jQM "page") that is navigated to exhibits this strange effect, so it makes for a rather "unsmooth" user experience... especially when viewing multiple images one after another.
Any help is greatly appreciated!
Edit: it looks like Stack Overflow won't let me link out to JSFiddle unless I also post my code here, so here's my code...
HTML body...
<div id="home_page" data-role="page">
<div id="content" data-role="content">
Image page
</div>
</div>
<div id="image_page" data-role="page">
<p>Test 123...</p>
</div>
CSS...
#content {
background: red;
width: 200px;
height: 250px;
}
#image_page {
background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/2000px-Logo_Google_2013_Official.svg.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
I'm using the technique specified at the end of this thread: Highcharts tooltip overflow is hidden to allow tooltips to flow outside the highcharts-container.
Everything is fine except when viewed in IE10 on Windows 8.
A large amount of white space is displayed underneath the chart when .highcharts-container {overflow : visible} is set.
Here's a demo of the problem:
http://jsfiddle.net/Bp4zG/6/
You need to view the demo in IE10 on Windows 8 to see it.
Is there another way to flow tooltips outside the container? Or a way to remove the mystery whitespace?
This is a problem for my app as it manifests in a very wide page with a horizontal scrollbar which in turn messes with some scrollTo js functions I have.
Managed to fix it by wrapping everything in a div with overflow: hidden
html
<div class="wrapper">
<div id="container" style="height: 300; width:100%"></div>
</div>
CSS
.highcharts-container {overflow: visible !important; }
.wrapper {overflow: hidden;} /* the fix! */
See fix here: http://jsfiddle.net/Bp4zG/8/