Overlapping the try it window with the response details in Mobile view

[shameel28]

https://drive.google.com/file/d/1pT75UC7SBQL5lgA98cOnyclGOMU5T_6B/view?usp=sharing

Please find the above link for the screen video reference.

[shameel28]

one more related issue,

https://drive.google.com/file/d/1OkjligvZ0ZrdssWMjZg2UWEJraHG31PU/view?usp=sharing
When:

1. Click on try it.
2. Click on the top menu bar
   the try window is closed automatically, but there is still the empty space visible.
   issue observed on mac in chrome,

[wll8]

This is currently the case.

This is because there is only one swagger-ui interface on the entire page, which is almost positioned relative to the entire body, and the implementation is displayed where the corresponding api is located.

When dynamically changing the size of an element in the page (for example, when changing the width of the browser window), it should be necessary to change the position again.

This can currently be mitigated by re-updating this positioning when certain events are found on the page.

But that doesn't seem like a good approach.

[wll8]

Now you can try version [email protected] to verify that the problem is fixed.

[shameel28]

Thanks

[shameel28]

This has caused another issue. the window never closes even after navigating to another page
Please refer
https://drive.google.com/file/d/16hOwWZYPodWgmROv3uqULOI8FAvZLSzH/view

[wll8]

Since I basically don't use redoc, I haven't found many problems. sorry.

How can I see the navigation bar in your video? Is it some version of redoc?

[wll8]

Please try it out with this code, and if the issue is resolved, I'll merge it into the master branch for a release.

https://github.com/wll8/redoc-try/blob/1dadc5b27c3adeecf4efaeb23736008e795bda52/try.js

[shameel28]

It looks fine. Please merge this to release

[wll8]

Now you can try version [email protected] to verify that the problem is fixed.

[shameel28]

Hi,
The problem is not fixed. I am using history.push() to navigate to another page on click of menu item. so the full page load may not happen.

[wll8]

Currently listening to redoc_dom being clicked, and then updating swagger-ui . If the page is changed through history.push, redoc-try cannot know.

Do you accept an api such as window.initTry.renderPos for actively updating swagger-ui?

Please try it out with this code, and if the issue is resolved, I'll merge it into the master branch for a release.

https://github.com/wll8/redoc-try/raw/2f8b6b9095d95770d548829227ab22b749f3785b/try.js

[shameel28]

how do you use window.initTry.renderPos api?

[wll8]

In general, you don't need to use this api, it is used when the position of swagger-ui is not updated.

• initTry.renderPos()
  Manually update the redoc-try window position.

• initTry.hide()
  Manually hide the redoc-try window.

[shameel28]

I tried this. not working

useEffect(() => {
return () => {
window.initTry.hide()
}
}, [])

[wll8]

What it actually does is:

const isVisibleRes = isVisible(document.querySelector(`.try .fullApiBox`))
// Destroy swagger-ui if redoc_dom related content is not visible
if(isVisibleRes === false) {
  $(`.swaggerBox`).addClass(`hide`).removeClass(`show`)
}

it's in the unreleased code:
https://github.com/wll8/redoc-try/raw/2f8b6b9095d95770d548829227ab22b749f3785b/try.js

You should download the code for this file to try it out.

Currently this code listens for changes in the redoc_dom subelement. Auto hide .swaggerBox when .fullApiBox is not visible

[shameel28]

I have downloaded the code and tried it. It is not working

.try .fullApiBox
Both these classes are linked to tryit box elements right?. how are we ensuring that redoc_dom related content is/not visible based on the visibility of .try .fullApiBox?

[wll8]

.try .fullApiBox indicates the currently open try-out window:

[wll8]

Use this function to check if .try .fullApiBox is visible:

function isVisible(element) {
  let isVisible = true
  let parentElement = element
  
  if(Boolean(parentElement) === false) {
    isVisible = false
  }
  while (parentElement) {
    const parentStyle = getComputedStyle(parentElement)
    
    if (
      false
      || parentStyle.display === 'none'
      || parentStyle.visibility === 'hidden'
      || parentStyle.opacity === '0' || parentStyle.opacity === '0.0'
    ) {
      isVisible = false
      break
    }
    
    parentElement = parentElement.offsetParent
  }
  return isVisible
}

Hide swagger-ui if invisible:

const isVisibleRes = isVisible(document.querySelector(`.try .fullApiBox`))
// Destroy swagger-ui if redoc_dom related content is not visible
if(isVisibleRes === false) {
  $(`.swaggerBox`).addClass(`hide`).removeClass(`show`)
}

2f8b6b9#diff-119d8aa7f4acb36400625fac0dc39bfec0c4c98d897883290d3bfc03a4870ef6R219-R225

[wll8]

The redoc-try code is relatively small, I will explain its implementation principle below, hoping to save your time in dealing with problems.

A complete swagger-ui is also displayed on the page where redoc is located, and then a try button is added to each api.

When the try button is clicked, get the api where it is located and find the try-out window where the corresponding api in swagger-ui is located, and then move it to the position just clicked.

[shameel28]

isVisible() is working fine, but there is still the white space,
Pls refer
https://drive.google.com/file/d/1OWWLXGMJM0iWA8Hz64E6tNLu58LIFz2l/view?usp=sharing

[wll8]

Please check for blank content with your browser inspection tool. It might be swagger-ui itself.

On pages other than redoc-try, try adding this code:

.swaggerBox:not(.onlySwagger) {
  display: none;
}

[shameel28]

Thanks, this issue is fixed.
but when we go back to api documentation page(by using history.push()), the swagger block is distorted.
please refer the screen video that i shared before.

https://drive.google.com/file/d/16hOwWZYPodWgmROv3uqULOI8FAvZLSzH/view

[wll8]

I haven't used redoc-try, just saw that some people needed it. developed it. It looks like it's used embedded in other pages, and doesn't mix well with the virtual dom, and the h5 hash.

But due to the limitations of the implementation, these problems are combined and they are a tricky problem.

So, I decided to find time to dedicate a similar case to address these issues.

I'm currently studying for a driver's license and looking for a job, so it may not be possible for the last two weeks, sorry.

[shameel28]

Thanks a lot for your support. no issues,
I will go with the older version for our current release and will look into it when i get some time,