Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


Sizing a popup

Community Beginner ,
Mar 04, 2020 Mar 04, 2020

Copy link to clipboard

Copied

Hi have many, many graphics of toolbar icons set to 26 x 26 px. In my text, I want to link the text that identifies each icon so that a popup opens and the user sees the icon in the popup. When I add a hyperlink  to the text and then select custom-sized popup, I set the height and width of the popup to 30px, BUT, this works only for the height - the width refuses to budge below some pre-defined value that I cannot figure out for the life of me what it is even though my code view shows 30 px. I have attached a picture to demonstrate this. This is driving me buggy because (1) it shows the popup borders, which I don't and (2) it looks like crap in the output. I just want the icon to be displayed in what appears to the user's eye to be just the icon - i.e., not in any container that shows borders. Any thoughts of how to deal w/ this?

 

Moderator: Image added to body.

image.png

TOPICS
New UI

Views

511

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Apr 02, 2020 Apr 02, 2020
A solution was found to this problem thanks to some CSS3 definitions from Adobe. See Item 12 on my site at http://www.grainge.org/pages/authoring/rh2019/using_rh2019.htm

Likes

Translate

Translate
Community Beginner ,
Mar 04, 2020 Mar 04, 2020

Copy link to clipboard

Copied

Forgot to add - RH2019, Version 11

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 04, 2020 Mar 04, 2020

Copy link to clipboard

Copied

There's no way I can find to do that in RH, nor with the "User Assets" feature of the skins.

 

I can get the box to resize smaller by editing an output css file, but the content still doesn't display properly. I think changes are needed to content inside an iframe, which can't be done through regular css. Possibly you could edit the output javascript files each time you generate, if you know what you're doing, but I wouldn't recommend it.

 

You can report issues here: https://tracker.adobe.com/

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 05, 2020 Mar 05, 2020

Copy link to clipboard

Copied

Thank you Amber!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 06, 2020 Mar 06, 2020

Copy link to clipboard

Copied

So, this is the reply that I received from Adobe: 

 

You can add the following CSS text in your CSS (Stylesheet) file being used in the topics:  

{code:java}

.rh-popover

{ min-width: 0 !important;

}{code}

It will fix the width issue with popovers in the output. 

 

I have added this to my css and it does NOT seem to make a difference but I cannot confirm completely because here is my issue - If a custom popup contains just text, then after I generate my project and preview it or actually open the output in a browser such as Chrome, the popup displays the text as expected. If a custom popup contains an icon, then in the Preview mode w/in Robohelp, it looks as I described above, but when I try to view the output in a browser such as Chrome or Mozilla, then the popup is absolutely blank - no image is displayed. The only way that I can get a custom popup to display an image is to have it in an auto-size popup or a frame, which is NOT a solution.

 

Thoughts?

 

Thank you!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 06, 2020 Mar 06, 2020

Copy link to clipboard

Copied

And yet another issue that I have confirmed - 

 

Add a hyperlink to text in a topic and have that hyperlink point to another topic that also contains hyperlinks. The popup opens as expected and displays the correct topic, but the links inside the popup do NOT work - they are dead even though in the preview they work just fine. In the actual output that is displayed in a browser, they are dead.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 07, 2020 Mar 07, 2020

Copy link to clipboard

Copied

Re the dead links, is this what you want to achieve? If I have understood what you want correctly, then as you can see it is working for me. Tested in Edge and Firefox.

 

image.png

 

That was done in Azure Blue.

 

Please use the Blue reply button at the top. It helps keep posts in order.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 07, 2020 Mar 07, 2020

Copy link to clipboard

Copied

Hi Peter no what I'm saying is this if I have text in a pop up and that text contains a hyperlink  Whether that hyperlink is to another topic or designed as a pop up to an icon so basically a pop up within a pop up, the hyperlink is dead in my popups I cannot get them to work if the popup contains only an icon and nothing else then I cannot get the pop up to display the icon the icon is not shown.  I will have to put a detailed list together and show you what I'm scene but hopefully this makes sense

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 07, 2020 Mar 07, 2020

Copy link to clipboard

Copied

I added the code that Adobe gave you to the CSS adjusting the width to what was required for the image. 

{code:java}

.rh-popover

{ min-width: 48 !important;

}{code}

I did that by opening the CSS in source view. You will get a warning that the css cannot be parsed so you will not be able to return to the edit view for that css.

 

The height I set in the link Properties.

 

image.png

 

That is what you are trying to achieve?

 

If it is, then I will report the issues to Adobe but at least it looks like what you want can be achieved.

 

Please use the Blue reply button at the top. It helps keep posts in order.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 07, 2020 Mar 07, 2020

Copy link to clipboard

Copied

That is exactly what I'm trying to achieve can you please tell me what you mean by opening the CSS in the source view?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 07, 2020 Mar 07, 2020

Copy link to clipboard

Copied

First topic has a link to a popup that show Second Topic. Second Topic has text, an image (the Rh logo) and another link to a popup, Third Topic.

 

That is a popup within a popup.

 

What am I not getting? Which of my three topics is not what you want?

 

Please use the Blue reply button at the top. It helps keep posts in order.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 07, 2020 Mar 07, 2020

Copy link to clipboard

Copied

Double click whichever CSS you want to edit.

image.png

 

You will see something like this.

image.png

 

Click the second icon and you will see the CSS in source view. Hover over the icon and it will say Source.

image.png

 

Scroll to the bottom and paste in the code changing the width as I said before. When you save you will see this warning. Ignore it.

image.png

 

You will not be able to edit the CSS again in the first view (second image) as RoboHelp only shows that when it is happy with the CSS and for some reason it doesn't like this. Perhaps it is not standards compliant, I don't know and will take that up with Adobe. For now though live with it.

 

The other way you can do this in 2019 is create a CSS with just that code in it and attach it as a second CSS to the topics. Add say code.css to assets and then select it from the Style Sheets dropdown. Make sure it is the second css. Those dots to the left allow you to drag it into position.

If there are lots of files, go to Reports > Topic List and select all or just the relevant topics. Then right click and select Properties. There you can add the second css.

 

image.png

 

Please use the Blue reply button at the top. It helps keep posts in order.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 07, 2020 Mar 07, 2020

Copy link to clipboard

Copied

Hi Peter it's very early morning in my time in the United States right now 9:30 a.m. I know you're in England I'm just wondering do you have a Skype account would it be possible to actually call you on Skype or could we actually do a Webe  in a little bit of time let me know because rather than make us go back-and-forth with all these emails a quick 10 minute phone call might resolve this otherwise all right you a detailed message please let me know what works for you and I really really appreciate your dedication to this

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 07, 2020 Mar 07, 2020

Copy link to clipboard

Copied

I do have a Skype account but I am not able to do that today. Without detail, which bit are you bogged down on? The popups within popups or getting the image popup the right size?

 

I might not be able to reply so quickly but I will when I can.

 

Please use the Blue reply button at the top. It helps keep posts in order.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 07, 2020 Mar 07, 2020

Copy link to clipboard

Copied

If you email me quickly via the Contact page on my site. I can send you the mini project where I have got this all working.

 

Please use the Blue reply button at the top. It helps keep posts in order.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 07, 2020 Mar 07, 2020

Copy link to clipboard

Copied

Correction. The small image popup is not working in a generated output. I thought I had tested that. Maybe I have messed it up by trying the second CSS file idea. I will have to leave this for today but I will take another look tomorrow.

 

Please use the Blue reply button at the top. It helps keep posts in order.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 07, 2020 Mar 07, 2020

Copy link to clipboard

Copied

Just emailed you and thank you!!!!!!!!!!!!!!!!!!!!!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 09, 2020 Mar 09, 2020

Copy link to clipboard

Copied

Adobe are looking at the code again and will fix it in the next update.

 

Please use the Blue reply button at the top. It helps keep posts in order.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 02, 2020 Apr 02, 2020

Copy link to clipboard

Copied

LATEST

A solution was found to this problem thanks to some CSS3 definitions from Adobe.

 

See Item 12 on my site at http://www.grainge.org/pages/authoring/rh2019/using_rh2019.htm

 

Please use the Blue reply button at the top. It helps keep posts in order.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation