Question

Is it possible to include a table in an inline block?

Forms Classic Form Designer

Updated April 24

asked on April 24 • Show version history

I am attempting to have the Approved for Today table appear to the right of Show Epicor required items as their is a fair amount of empty real-estate there.

I have tried multiple CSS settings, to no avail. Can this be done?

Form is in Forms 12 Classic Designer.

/*header section - Employee information*/
#q20, #q160, #q170, #q173, #q243 {
  display: inline-block;
  vertical-align: top;
}

#q20, #q160, #q170, #q173 are the fields currently in the inline row. Q243 is the table I am attempting to move to the right side.

0 0

Answer

SELECTED ANSWER

replied on April 24

I was able to get it aligned in my test form but I had to adjust the spacing to make room for the table.

Try

/*header section - Employee information*/
#q20, #q160, #q170, #q173, #q243 {
  display: inline-block;
  vertical-align: top;
}

#q243 {width:400px; min-width: 200px;}

You may need to adjust the width of Show Epicor required items as well.

0 0

Replies

replied on April 24

Note that this is extremely easy to do in the new designer (drag-dropping, no code), but complicated in the classic designer. You might want to consider switching if you can (there is a button that will copy your form into the new designer - it’s a copy, so it’s easy to test without losing anything).

If you stay in the classic designer, then yes, you could put the table in line and potentially get it to the right of those other fields, but note that any fields after it won’t show on its left below the other fields, they’ll be below the bottom of the table, because that is how inline-block works.

I recommend you open the browser console on the preview of your form and use the element inspector pane. You can see and edit all of the css that is applied on the running form, so you can try different display styles and other values to see how they work.

Ultimately, if you need that table to the right and everything else to wrap cleanly on the left of it, you’ll likely have to get into flexbox containers and layouts (Google: CSS Flexbox). This is the layout method used by the new designer. You can technically get the classic designer set up with CSS to do it as well, but it’s obviously more complicated than just placing everything in position like you can in the new designer.

1 0

You are not allowed to follow up in this post.

Question

Question

Is it possible to include a table in an inline block?

Answer

Replies

Sign in to reply to this post.