Question

I do not do CSS, just now that is why I am having difficulty tweaking this.. I am having prob with my pop up that uses Iframe. In css there’s style like this:

iframe {
    border:none;
    height:440px;
    margin-left:4px;
    margin-right:4px;
    **min-width:760px;**
    overflow:auto;
    width:98%;
}

it produces an html when page is viewed like this:

<div style="left: 404px; top: 75px; visibility: visible; position: absolute; overflow: visible; clip: rect(auto auto auto auto); " class="dialogPanel"><div class="">.....</div>

that’s why no matter how I set the height in the code behind, it would not resize accordingly:

 profileFrame = new Frame(url);

        profileFrame.setHeight("350px");
        profileFrame.setWidth("450px");
        panel.add(profileFrame);

        content.add(panel);

but when I removed the min-width from the CSS iframe, it already resized to my wish.

Q: how do I not use the iframe style to this certain iframe of mine? I do not want to remove the min-width as this style is being used by all iframes in the application.

I tried removing it by using profileFrame.removeStyleName("iframe"), I also tried all other removestyle methods available but did not work.
Any suggestion pls? thanks

Answer 1

You have set a class to this iFrame so try

iframe .dialogPanel {
min-width: 0px;
}

this will make only iframes with the class “dialogPanel” have no min-width, and will leave the rest with their min-width