If-Container breaks layout because it adds 'display: inline-block'

If-Container breaks layout because it adds 'display: inline-block'

  

I've added an If Container to part of my page and now the content within the If Container no longer fills the parent container. When I examine the html, I see that the If Container adds a span with 'display: inline-block'. 

  1. If I remove the display: inline-block style from the html, the content fills its parent, which is what I want. 
  2. If I remove the If Container, the content also fills its parent.

Has someone run in to this before? What should I change in the design so the If Container fills its parent?

I'm using SilkUI with the Lisbon Theme and Service Studio 10.0.827.0.

Thanks

The image shows the offending line:

Hello Marcos.

What is an "IF container"?

You see. The UI IF widget tends to change the Margin Top (removing it), but the IF itself is not rendered in the HTML page, as it is used only to tell the server which content to use during the build of the page. 

Could you provide a screen shot of your page with the relevant part of the Widget Tree also visible? 

Cheers.

hmm.  I named the UI If Widget to 'ifRiskForm' so perhaps that's why it's shown as a span? Here is image from Service Studio and the one of the rendered page. I want to use the available space on the right. 

I will risk to say that the problem is not the IF, of course, but the Form. Are your Form width set to 8 col? Seems that it is. If so, change it to Fill Parent.

Cheers.

P.S. Thinking better, maybe the IF is indeed adding a span...
The inline-block will act like a block that do not occupies the whole space, but only the needed one. If you set the form to Fill Parent, it should work... 

I just reconfirmed that it is set to fill parent. I had also tested by removing the IF Widget to be sure that was the source of the problem. After removing the IF Widget, I pointed two Ajax Refresh actions to the form instead of the IF, and then the form fills the parent.

Let me do a small test here..

Ok. The span is add so that the Ajax Refresh can be performed.
But in my test (with a similar structure, no style is added to the span.

So, are you sure you don't have a CSS being applied that is causing this?

Cheers

I noticed this wasn't visible in the image of the Chrome DevTools that I posted so I resized it. You can now see that the style is applied at the element level, as if it came from Extended Properties. But to my knowledge, we can't modify the style of an if.

Solution

I got it to work.  Taking a clue from your statement about why the span was there, I put the If Widget in a container, removed the name of the If Widget, and pointed the Ajax Refresh actions to the container instead of the If Widget.

I'm unsure why those styles were added to the If Widget.

Eduardo, Thank you so much for your help and for leading me to the solution.

Solution

Good you solved the problem, still unsure why the styles where applied thou... :)