Ambiera Forum

Discussions, Help and Support.

Ambiera Forum > RocketCake
Word Wrap for html file loaded into container

jimsteele
Registered User
Quote
2024-06-10 22:17:26

I have a main page with three containers.
I want the loaded html text to wrap in the top container.

The Top Container is named div id="Container_Header"

The associated css is:
Container_Header { box-sizing: border-box; vertical-align: top; position:relative; display: inline-block; width:100%; min-height:150px; background:none; border: 1px solid 404040; height:150px; overflow-y: auto; white-space:nowrap; width:500px; word-wrap: break-word;

}
Container_Header_padding { margin: 10px; display: block; }

The added css style word-wrap: break-word does not work, I get a scroll bar to infinity rather than wrapping text. Can anyone help? Thanks.


niko
Moderator
Quote
2024-06-11 07:04:38

Tried it with a container, and it works nicely for me. Could you maybe upload an .rcd file where this happens? Then I can take a closer look.


jimsteele
Registered User
Quote
2024-06-11 15:42:21

I would need to upload not only the rcd file but the html file that is loaded into the container? Where and how do I upload? I don't see an option on the forum when responding to the thread. Thanks!!!


erik
Registered User
Quote
2024-06-11 17:04:45

No, only the .rcd is needed. Upload it to any file hosting site or send it directly to support: See support -> contact on this page, and at the bottom, there is also an email adress printed.


jimsteele
Registered User
Quote
2024-06-12 04:56:43

Link to fileshare with rcd file sent via contact form and email.
Thank You.


jimsteele
Registered User
Quote
2024-06-12 23:14:53

Hi Niko,

In response to your email.

"But I don't get where the word wrap in your project should be applied: the mentioned Container_Header is empty."

The Container named "Container_Header" at the top of the page is empty. I load it with the contents of an html file (topframe.html) via a javascript function loaddefaultcontent() . The problem is the HTML page loaded into the empty container does not wrap. I get a scroll bar at the bottom no matter what I do. The contents loads and is there, just one long line.

Can you try running the page with Visual Studio Live Server?

Thanks,
Jim


niko
Moderator
Quote
2024-06-13 08:08:15

Thanks, I've sent you the solution. I think the problem was that you are loading the additional HTML externally using Javascript, and the external css is using a same named class as the outer HTML file. (I initially thought that was a bug in RocketCake, but it isn't).

Unchecking the "use external CSS files" in the options and disabling the nowrap in the additional css rules will fix the problem for you. I've sent you a detailed description on how to do that.


jimsteele
Registered User
Quote
Today

Thanks Niko, I will look to see if there is duplicate class names

To duplicate the other instance I saw where the word wrap works as long as there is some text saved in the container and does not work if the container I saved two sample files to the proton drive I emailed you the link to.

I uploaded and additional two sample files to the proton drive, one works, one does not.
USSSPolygraph_v20240614.3 Container_Header Empty Does Not Work No Wrap.rcd
USSSPolygraph_v20240614.3 Container_Header with Text Word Wrap Works.rcd
Please run with MS Visual Studio Code using Live Server.
The one with some text saved in the container works.
The one with no text in the container does not work.
Any idea why?
Thanks,
Jim


jimsteele
Registered User
Quote
Today

Hi Niko,

Some interesting behavior that might help you narrow this down. Just sent file "USSSPolygraph_v20240614.5 to support.rcd" to the shared drive.

I just discovered it is only the top container ("Container_Header") that controls if word wrap works. If there is no text in the container it says "(empty container)" and word wrap will not work in ANY container on the page. If you save the file with a single character in the top container ("Container_Header") the ("empty container)" text goes away and it works.

It does not matter if css is external or embedded in html.

More interestingly, the other containers can have NO Text in them and they do not put up text in them that says ("empty container)".

The html generated in the top container is different from that generated for the bottom left container.

Also, I changed the names of the classes in the CSS of the java loaded html files. No difference in behavior.

Thanks, Jim

Header Code generated:
<div style="vertical-align: top; position:relative; display: inline-block; width:100%; min-height:150px; background:none; height:150px; overflow-y: auto;display: inline-block;overflow-wrap: break-word;" id="Container_Header">
<div style="margin: 10px; display: block; " id="Container_Header_padding" >
</div>
</div>

Bottom Left Code:
<div style="box-sizing: border-box; vertical-align: top; position:relative; display: inline-block; width:50%; min-height:758px; background:none; border: 1px solid 404040; height:758px; overflow-y: auto; display: inline-block; overflow-wrap: break-word; " id="Container_FileDesc">
<div style="margin: 10px; display: block; " id="Container_FileDesc_padding" >
<div style="text-align:left;">
<span style="font-size:12pt; font-family:Arial, Helvetica, sans-serif; color:000000; "> </span>
</div>
</div>
</div>

Sent with Proton Mail secure email.


Create reply:


Posted by: (you are not logged in)


Enter the missing letter in: "I?ternational" (you are not logged in)


Text:

 

  

Possible Codes


Feature Code
Link [url] www.example.com [/url]
Bold [b]bold text[/b]
Image [img]http://www.example.com/image.jpg[/img]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]

Emoticons


   






Copyright© Ambiera e.U. all rights reserved.
Privacy Policy | Terms and Conditions | Imprint | Contact