Displaying a text file in a scrollable box

Wappler General Need Help
1

Just wondering if anyone knows of an easy, inbuilt 'Wappler way' to do this before I write something custom. Or even a good third party option.

I want to have terms and conditions displayed in a scrollable box and ideally implement a mandatory scroll before the terms can be accepted. The terms are in a Word doc (or pdf) and needs to have formatting preserved - nothing complicated but it can't be plain text.

It needs to be easy to update in future.

Thanks

2

Depending on what kind of formatting you require, personally, I would stay away from trying to do it with Word. You will end up with so much rouge code the more you edit it and getting it to display properly would be a nightmare. Word and the browser do not play nice together. Also, can't be done with Wappler alone.

If you are looking for just the basic text and headings, bold, italic , maybe some fonts and colours - I would definitely and easily do this by storing your content in a database and update it very easily with Summernote. Very easily done with Wappler alone.

3

Thanks Brad. Sorry I probably wasn't very clear before. Its currently a Word doc but I'll copy it over to something else as required.

It's only basic formatting - bold headings etc.

I haven't tried the Summernote or Medium editors. It looked like they have toolbars for the user to edit the text. Can you choose not to display them?

4

You would certainly not show them on your public facing page but you would need to have them available in your editor.

5

Thanks - I'll play around with it properly when I have more time. For now I've just saved it as html and stuck it in an iframe.

6

If you are looking for something like this:

image

then wrap the content inside a <div> similar to:

<div class="overflow-auto" style="height: 400px">
    ...content...
</div>

You can then add the Browser component's scroll options to detect when a user scrolls to a specific element or to the bottom of the <div>.

1 Like
7

Thanks Ben. Yes I did something very similar using an iframe to point at the doc (saved as html) in an S3 bucket so it's a bit easier to make updates in future.

I was just wondering if there was a better way within Wappler that I wasn't aware of.

8

I'm sorry, but what could be easier than maintaining an HTML document using a text editor similar to the one that is included with Wappler?

image
image1438×606 39.1 KB

Make the changes and publish. Done.

That way you are heeding this warning from @brad

9

Well, to be clear, I'm not suggesting that either way is particularly difficult, but in my case:

  1. The starting point is that the document (including future updates) is in Word. There's no getting away from that as it comes from the legal team. Saving as an html and stripping the superfluous styles is far quicker than manually editing a previous version and less error prone

  2. Uploading a new version then doesn't require any changes to the codebase at all

  3. It's mostly just simple formatting but there are clause numbers/ lists, indents etc which I don't think Wappler's simple text editor will display properly

  4. This one is my issue but the text editor doesn't work for me (or I don't know how to access it properly). For example, I have a simple page with just your example div from above. I can see '...content...' in the design view but I can't edit it in either Component edit mode or text edit mode

1 Like
10

It's a matter of what works best for you.

This is what threw me off, apologies.

11

No worries - I probably wasn't very clear. I meant an easy way to go from Word to something more suited to displaying on web

12

You could embed the Word document without removing the styles, as in

<embed src="URL_to_your_document.docx" type="application/msword" width="600" height="400">

or even an PDF

<embed src="URL_to_your_document.pdf" type="application/pdf" width="600" height="400">
1 Like