Aligning HTML both vertically and horizontally within a UIWebView

I am currently facing a challenge with centering content vertically and horizontally in a UIWebView, especially when the height of the content is unknown.

My current solution works perfectly in Safari as shown here:

http://jsfiddle.net/HT9J5/

However, the layout does not appear correctly when viewed in a UIWebView:

Does anyone have any suggestions on how to resolve this issue? One limitation I have is that I cannot set the viewport meta tag because it needs to function properly when the UIWebView is presented within a modal view controller on an iPad, where it may not take up the full width of the screen:

<meta name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=1.0;"/>
htmlcssiosuiwebview

Answer №1

After testing out your sample code, I can confirm that it functions flawlessly within an UIWebView. If you're encountering issues, it might be related to how you are loading your HTML / CSS files. Have you verified that the CSS is being loaded properly? Also, double-check if the frame of your UIWebView has been correctly set up.

This is the modified code snippet that worked for me. I adjusted the size of the UIWeb frame to be smaller than the screen dimensions since you mentioned presenting it modally:

- (void)viewDidLoad
{
    [super viewDidLoad];

    NSString *htmlString = @"<html><head><style type='text/css'>html,body {margin: 0;padding: 0;width: 100%;height: 100%;}html {display: table;}body {display: table-cell;vertical-align: middle;padding: 20px;text-align: center;-webkit-text-size-adjust: none;}</style></head><body><p><strong>Title</strong></p><p>A long explanation about what's going on and all that.</p><p><a href='#'>A link</a></p></body></html>​";

    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(10.0, 10.0, 300.0, 400.0)];
    [self.view addSubview:webView];
    [webView loadHTMLString:htmlString baseURL:nil];

    [webView release];
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Establishing the initial value for an input file form

Similar Question: Dynamically set value of a file input I'm currently working with an HTML form that includes a file input field, and I'm attempting to set the initial value for the file path in the form. I've tried changing the "value" ...

javascripthtml

When the page is scrolled to 50 pixels, a modal pop-up will appear

I attempted to use cookies to store a value when the user clicks on a popup to close it, ensuring that the popup does not show again once closed. However, I am encountering an issue where the popup continues to open whenever I scroll, even after closing it ...

javascriptjqueryhtmltwitter-bootstrap-4

How can I generate a checkbox in a database with a field that allows for enabling and disabling?

I am looking to design a table that includes questions, checkboxes, and text boxes. All the questions are stored in a database and called through an array. In addition, I want to create disabled textboxes that become enabled when their corresponding checkb ...

javascriptphphtmlarrayscheckbox

iOS 11 has an issue where the completion block of UIViewController's transitionFromViewController is not being invoked

There seems to be an issue with the transitionFromViewController:toViewController:duration:options:animations:completion: method in iOS 11, where the completion block is not being called. Here's a sample code snippet demonstrating the problem: [self ...

iosobjective-cuiviewcontrollerios11

Tips for stopping body scrolling when using a push-side menu

I am working on integrating a push-side menu plugin called Responsive Menu into a WordPress theme. Following the answer from SO @Congrim, I have successfully implemented a method to lock the body at scroll when the push-menu is open, with all elements incl ...

javascriptjqueryhtmlcsswordpress

What is the process for updating the label on the leaflet control layers toggle?

I have incorporated mapbox and leaflet into my website, and I'm looking to modify the label "Satellite" in leaflet-control-layers-toggle to "SAT". Is there a way to achieve this change using leaflet? https://i.sstatic.net/DAR9m.png ...

javascripthtmlangularjsleaflet

Launch a new pop-up window with a designated keyboard language

My JavaScript code opens a new window using this syntax: window.open(URL); However, I've noticed that even when the browser's keyboard language is set to 'fa' during opening, the new window still defaults to 'en'. Is there ...

javascriptjqueryhtmlbrowser

Can you explain the process of updating apps on the Apple AppStore?

I have successfully reduced my game's texture and image data to 20mb in order to accommodate 3G downloads. I want to keep it below this limit even as I release updates with additional texture data. To ensure future updates can be made without exceedin ...

iosapp-store

How can the title of a link be hidden in a popup panel?

Seeking assistance for a popup panel issue. When you click on the black ffff button, a popup panel appears with the text ffff having a blue shadow in the top left corner that disappears when clicked. How can I remove this? Here's the link: <a class ...

javascripthtml

Creating a cohesive framework across multiple platforms within a single Xcode project: A comprehensive guide

In the past, when creating a framework for a specific platform like macOS or iOS, I would typically manage different projects in Xcode and build them separately. My code heavily relies on sqlite3.h and a Swift-written wrapper class. I'm wondering if ...

iosxcodemacosframeworks

A div element that automatically adjusts its width to fill the available horizontal space, and is then re

div</code> elements next to each other horizontally. The right div should adjust its size based on its content up to a set maximum width, while the left one should occupy the remaining space. I have successfully achieved this layout by floating the ...

htmlcsscss-float

Tips for enhancing redundancy in HTML and ROR using partials

Looking for a way to merge two partials in my Ruby on Rails app without copy-pasting. Here's what I'm aiming for: @member = 'Player' render 'team/team_partial' @member = 'Staff' render 'team/team_partial&a ...

htmlruby-on-railsredundancy

One-of-a-kind words in place of a numeric value

Is there a way to replace numbers with unique text of my own choosing? For example, instead of 1., 2., 3., I would like to use Bla, Blabla, Blablabla. https://i.sstatic.net/kf0p4.jpg <style> #menu2 { width: 320px; } #menu2 ol { font-style: talic; f ...

htmlcss

Is there a solution to fix the issue with IE causing hover effects not to

I'm currently in the process of designing a website, and I have implemented some image hover effects that reveal elements within the image when you hover over it. These effects are functioning correctly on Chrome, Safari, and Firefox; however, they ar ...

javascripthtmlcssinternet-explorer

I'm currently working with Bootstrap 5. Is there a technique available to reposition the elements within a div without relying on padding or margin properties?

Developing a Website: <!DOCTYPE html> <html lang="en" class="h-100"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" ...

htmlcssbootstrap-5

Tabindex malfunction in Bootstrap dropdown menu when nested within a form and pressing Enter key

Within my form, I have integrated a Bootstrap 3 dropdown menu situated between two text input fields. The dropdown's role="menu" attribute allows for navigation using the up/down arrow and Enter keys. However, after making a selection in the dropdown ...

javascriptjqueryhtmlcsstwitter-bootstrap

The request parameter is missing when trying to invoke methods on the MultiActionController

During the Spring 3.0 era suppose I have a jsp page with two different links, each calling a different method on MultiActionController <form:form method="POST"> <a href="user.htm?action=add" style="color: blue;">Add</a> <a hr ...

javahtmlspringspring-mvc

Encountering a Quickblox error on the Swift 3.0 iOS SDK: "No application was found and QBConnectionZoneTypeProduction

I am facing an issue while trying to create a basic QBRequest to login a user or receive an error message if the User doesn't exist. The error I am encountering in the console is as follows: NSErrorFailingURLKey=https://api.quickblox.com/session.json ...

iosswiftsdkquickbloxappdelegate

Accordion elements that are active will move all other content on the page

I am currently working on creating an accordion using the following code: https://codepen.io/rafaelmollad/pen/JjRZbeW. However, I have encountered a problem where when clicking on one of the accordion items, the content expands and pushes the title upward. ...

javascripthtmlcssaccordion

What is the best way to choose a disabled field using Watir?

Recently, I've encountered an issue with my webpage's popup functionality. It used to work smoothly, with fields that could be manipulated when the popup was visible. However, I've noticed that now, when I try to inspect these fields using f ...

htmlrubyautomationwatir