Dummy div in a IWRegion

[StephB]

Hi all,
In my application, I have a blank IWRegion that I fill with a set of IWRadioButtons programmatically.
This is my code to create the buttons (I'm looping in a dataset to create several buttons).


And here is my HTML Template, that contains only one region for the moment, with some Bootstrap classes to display my buttons as a list.


When I open my form without any button created, everything is normal in my HTML source code.


But when I create my set of buttons, a dummy div is added inside my region to encapsulate my buttons.


This dummy div breaks my render because the flex-direction assigned to my region is not applied to my buttons, and I'm looking for a way to avoid a CCS rule like

Code:

#IWREGIONRELATIONSMGR_FRAMEADMINPANEL div {
  display: flex;
  flex-direction : column;
}

Any idea or explanation about how to avoid this dummy div ?

Many thanks for your help.

[StephB]

I forgot one detail, I also tried with a set of IWBUttons, and I have the same dummy div inserted in my HTML code (tested to confirm that the dummy div is not a radio group used to encapsulate the radio buttons).

[StephB]

This dummy div is stranger than expected, so I made a test case to explain it.

My form contans 2 datasets Left and Right.
Left records are listed in a region Left. When i select a value from Left , the linked records form Right dataset are listed in the region Right.
On FormShow, the Left region is filled with a dummy div. And when I select a value, the right region is filled, but this time without a dummy div.
At this time, if i press F5 (or Ctrl-F5), the page is rebuild and Left and Right region are filled with a dummy div.
If I select a new value from the Left, the Right region keeps the dummy div, but the new list of records is inserted outside this dummy div.


I definetly don't understand how this dummy div is managed, and how I can have the same structure each time.
Any idea ?

[Alexandre Machado]

Hi StephB,

I'll check your test case. However, if you are creating the radio buttons at runtime in an async request, likely that the div is being added by the code that positions the controls within the page.

Anyway, I'll get back to you on this.

[Alexandre Machado]

I'm not sure I'm doing what I'm supposed to do, but I'm not getting the same result. There is no extra div in my HTML

   

[Alexandre Machado]

Hum... sorry. I realized that I'm not following the right sequence. Let me try again

[Alexandre Machado]

Yes, I can confirm that the DIV is rendered and it breaks your styling.

The thing with that DIV is that most IW forms require a "root" tag that works as a parent for all the rendered controls. In general this is a FORM tag, but it can also be a DIV depending on other factors. Ideally this could be configurable and you can still have a tag there (a SPAN for instance) that wouldn't interfere with your styling. I'll run some more tests and get back to you.

[StephB]

Hi Alexandre,
Sorry for delay, I was away last week.
Thank you for your explanation and your effort, I'm waiting about you.
Have a nice day.

[Moskwa]

Hi Alexandre,
Sorry for delay, I was away last week.
Thank you for your explanation and your effort, I'm waiting about you.
Have a nice day.

Did you solve the problem ? I think I have the same problem : https://www.atozed.com/forums/thread-4240.html

Regards
Marcin

[StephB]

I don't think that the root cause of the problem was solved (no info here), but I don't download the last release, and now I'm no longer working on this project.
As a workaround, I set a double CSS class to manage the expected region with or without a dummy DIV.

Code:

[id^="IWREGIONRELATIONS"] div, [id^="IWREGIONRELATIONS"] {
    display: flex;
    flex-direction: column;
    padding: 5px;
}

Not a perfect solution, but the render is correct in both case.