Develop a CSS layout for the specified design

Aiming to achieve a unique layout using dynamic html strings.

The challenge arises when transitioning to the second page as the layout does not adjust upward and images cannot be added to the first page.

Attempting to implement the following sample code in native code:

 func setData(){

        let dic = arrayData[currentIndex]
        url = dic["ImageLink"] as! String
        self.url = self.url + "_MEDVPF.gif"
        content = dic["ArticleXML"] as! String

        let height = String(describing:webViewObj.frame.size.height - 100) + "px"
        let width = String(describing: self.view.frame.size.width / 3 - 20) + "px"

//        let style = "<div style=color:#0000FF>" + String(describing: dic["HeadLine"]!) + "<br /><br />" +  String(describing: dic["Abstract"]!) + "</div>"

        self.headlineLabel.text = dic["HeadLine"] as? String
        self.abstractLabel.text =  dic["Abstract"] as? String
        var styleCSS = "font-family: TAUN_Elango_Abirami; font-size: 18px; column-width: %@; column-gap: 10px; height:%@;>"
        styleCSS = String(format:styleCSS,width,height)

        let bodyStyle = "<div style= \"%@\""  + content + "</div>"
        let bodyStyleConten = String(format:bodyStyle,styleCSS)



        let htmlString =   String(format:bodyStyleContent)
        let finalDiv = "<div>" + htmlString + "</div>"
        webViewObj.loadHTMLString(finalDiv, baseURL: nil)

    }

https://i.stack.imgur.com/45nU8.jpg

How can I create an Html5 with CSS design that enables horizontal scrolling?

While we initially experimented with using core text in iOS, performance issues prompted us to switch to uiwebview.

Although we managed to work with the CoreText framework, challenges persisted due to sluggishness when handling extensive content. Despite numerous attempts, we were unable to rectify the slowness issue. Assistance in overcoming this obstacle would be greatly appreciated, and we are open to sharing samples for those interested in contributing.

Answer №1

Your issue consists of various components, with layout being just one part of the equation.

If you decide to address it yourself using HTML/CSS, consider starting by implementing overflow-x: scroll; on the content container and referencing this guide on CSS columns https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts. Keep in mind that browser support for columns can vary, so it may be prudent to either avoid them or utilize them in a different way.

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

Ensure that a select input, dynamically generated, is marked as 'required' only when other inputs have been filled out

Displayed below is a snapshot of a page I'm developing that allows users to input details about various rooms in a property. Users have the ability to 'add' multiple rooms, triggering javascript/jQuery to dynamically create additional input ...

Displaying the error message "No results found" in PHP AJAX live search with multiple values is not possible

I recently went through a tutorial on Most of it worked smoothly after setting it up on my local machine. However, I encountered an issue when searching for data not present in my database. I expected to receive an error message stating "No result found o ...

Adjust the Bootstrap flex settings to display only 3 cards instead of the default 4 cards - HTML

We currently have a bootstrap setup that displays 4 horizontal scroll cards by default. However, we are looking to only show 3 cards in view and allow the 4th card to be viewed by scrolling. Code On mobile view, the code is still displaying 4 tiles even ...

What's the best way to undo a CSS transition animation when deleting an active class?

I'm currenty working on a straightforward icon animation within a VueJS application. I've implemented a Vue transition to create a fade effect on the background elements, but I'm exploring options for a subtle upward shift animation specific ...

Creating a custom HTML5 canvas with images from a JSON array

I am currently working on a project to develop a unique slideshow feature by hosting images in an external JSON array and then loading them onto an HTML page. The next step is to insert these images onto an HTML5 canvas. While I have successfully loaded a ...

HTML and CSS: Focus on border for <td> cells only

I'm looking to apply a border to only one cell (B2) without nesting tables. Here's the code: <table border="0"> <tr> <td>A1</td> <td>B1</td> <td>C1</td> </tr> ...

Designing scroll boxes that are not continuous and tracking the time spent in each section

I'm seeking assistance with a unique challenge involving the creation of scroll boxes for use in a Qualtrics survey and tracking the time spent viewing different sections of text within them. Specifically, I aim to design a scroll box featuring two p ...

The Github API checks are currently not properly parsing style attributes when given in the form of HTML within comment text

I have integrated github's create check run API to create a check run for my pull request. The JSON structure I am using for the request body is as follows: { "name" : name, "head_sha" : script.env.CI_COMMIT_SHA, ...

How to interact with a button inside a span element without an ID using Selenium

Can anyone help me figure out how to click a button in the browser using Selenium and Python? The button I am trying to click is located within this HTML code: <div id="generate"> <i class="fa fa-bolt"></i> <span>D ...

Why is the parameter value becoming null during an Ajax call?

I am passing a parameter from HTML to JSP, but when I try to retrieve the value in JSP, it returns null. Can someone help me figure out what's wrong with my code and provide any suggestions? The value is successfully displayed in an alert using JavaS ...

Make sure link opens in the same window/tab

Currently, I am utilizing the Open Link in Same Tab extension on Google Chrome. This extension can be found here. The purpose of this extension is to ensure that all links open in the same window/tab, which is necessary for touch screen kiosk left/right s ...

Autocomplete feature seems to be functioning properly in the online demonstration, while it does not seem

I can see that the autocomplete feature is working in the example provided, but it's not functioning properly in my attempt. What could be causing this issue? <!doctype html> <html lang="en"> <head> <meta charset="utf-8> & ...

Tips for hiding a bootstrap modal in Angular4 when it has no content

I am currently working on an Angular 4 e-commerce application. One of the requirements is to hide a bootstrap modal when there are no products in the cart. When a user selects some products, they are added to the mycart modal screen. The user also has the ...

Please provide the text input for the specified version numbers (1.1, 1.2, 3.0, etc.)

I'm currently working on a form that includes a section for searching by version number: <label class="formLabel">Version</label> <html:text property="valueVersion" styleClass="value" tabindex="11"/> <br/& ...

Offspring element overrides styling of its parent

#popBox{ width:100%; height:100%; position:fixed; left:0; top:0; border-collapse:collapse; background:black; opacity:0.8; display:none; } <table id="popBox"> <tr> <td></td> <td></td> ...

Tips for retrieving all source URL values in an array from a provided string

{ data = ( { "created_time" = "2011-09-28T07:29:37+0000"; from = { id = 100002944043966; name = "alok sinha"; }; height = ...

What is the best way to adjust the size of a button using CSS within a ReactJS

I am facing an issue where I need to create a button with a specific width, but the template I'm using already has predefined styles for buttons. When I try to customize the button's style, nothing seems to change. Below is the code snippet: Her ...

I prefer boxes to be aligned next to each other without any gaps, and I won't be

In my quest to showcase 3 boxes seamlessly lined up in a row, I am faced with the challenge of eliminating spaces between them. My goal is to accomplish this feat without resorting to the font-size property. html,body { height:100%; width ...

Tips for stopping a flex:1 div from expanding to accommodate its abundant content

I'm facing a situation where I need to create two columns, one fixed at 150px and the other filling up the remaining space with scroll functionality for overflow content. Despite trying to use flexbox for this layout, the second column keeps expanding ...

What is the best way to retrieve information from a data set?

After borrowing some basic HTML, CSS, and JavaScript code from CodePen, I ran into an issue while attempting to convert it to React. The error message says that it cannot read properties of null (specifically 'dataset'). Here is the JavaScript c ...