Selectable iframes in a grid

Webix JS
1

Hi all,

I’ve got a grid of iframes (inside a layout view) and would like a way to attach external controls for them without having to make the user manually specify an ID. Selection by clicking like you can with datatables seems the most intuitive option, but I couldn’t find a way to do this. Is this possible?

Thanks!

2

Using iframes is a bit problematic, as they will catch clicks and will not route clicks to the master page. Maybe you can add a header element to each layout. In such case it will be relative easy to manage a currently active element

3

Hi maksim, I’m not quite sure that I follow.

Since I currently have each iframe nestled in a layout cell would you mean something like below?

id:'myLayout', borderless:true, rows:[{
   id:'myRow1', borderless:true, cols[{
      rows:[
         {template:'Header1', type:'header'},
         {view:'iframe', id:'myIframe',
         src:'mySrc.html'}
      ]
   }]
}]

Also, I can freely modify the element contained in the iframe so I supposed that I could potentially add a listener inside each iframe src which calls a function in the parent?

4

Related: I have the “active” iframe calling the Webix parent, and I am trying to use that to set a colored border around the “active” element to make it clear to the user which is “selected”. I can successfully add and remove CSS, but the styling I add for borders is barely visible at all. It currently will only display as a very thin line on the left and top of the iframe no matter how big I set my CSS border to be.

I tried playing with the row, column, and iframe type and padding settings, but I didn’t find a combination that works…

5

Check the next snippet

http://webix.com/snippet/f113df40

6

Hi maksim,

For some reason why I do this the border styling still only shows up on the top and on the left. Any idea why?

Also, is there a way to do this that doesn’t alter the size of the iframe? Eg by changing the color of the table padding/margin or cell background for the iframe?

7

Be sure that you are using box-sizing:border-box; as well, without this line border will not be applied correctly.

The padding between cells can’t be styled in easy way, but you can remove padding at all and use border for all frames, like next

http://webix.com/snippet/75ec50da

8

Sorry for the late followup but awesome!

Thanks, that did the trick.