Configurable form usable area

[olivercrask]

Would it be possible for the usable area in a form to be configurable? Or is this something that is fixed by Jupyter itself?

I'm thinking about the possibility of displaying large images or multiple elements next to each other. E.g. an image next to a table

[SimonBiggs]

Usable area? When you say large images do you mean plots?

[olivercrask]

Yes plots (images displayed in matplotlib figures etc.)

But I meant in general, is there some way to use this space?

[SimonBiggs]

It's not a limitation from Jupyter. Really the sky's the limit on the flexibility of what can be done. That space looks like that because of design choices I have made.

How are your html + css skills? Standard html can be written into the scriptedform markdown file. And style tags are allowed. You should have quite a bit of flexibility in altering the layout with CSS and HTML alone.

From hearing requests from yourself and Robin it is making me think it might be worth making the ability to have a "page layout" file. Which can be a simpler way to control all sorts of things on the page...

I'm not sure though. If I was to go down that path I'd need to think long and hard about what would be implemented...

[olivercrask]

My html + css skills are fairly limited but I can definitely give it a go. I understand the design choices, it looks good and 'material design'-esque but does also pose limitations. Perhaps it is best leaving it as is for now, with more advanced formatting changes left to those that want to mess with the HTML?

[olivercrask]

Though in the long term a page layout file does sound very nice. Perhaps just the ability to place buttons/tables 'in-line' would be good in the short term?

[SimonBiggs]

I'm not at a computer to try it out, but does the following work:

<span style="width:50%">
Table here
</span>
<span style="width:50%">
Code that gives output here
</span>

[SimonBiggs]

And I don't think this bit will work... But it might. If you write the following:

<style>
  .scripted-form-widget .form-contents {
    max-width: none !important;
  }
</style>

[SimonBiggs]

That might remove the columns from the side... But I'm not sure if you can access that styling from the form...

[olivercrask]

Does html always have to go around the sections? Whenever I try to put it inside I get 'Template parse error' 'Unexpected closing tag'. The span style didn't seem to change anything

[olivercrask]

The second suggestion you gave removed the object. No error in the console.

[SimonBiggs]

Removed which object?

On Tue., 17 Apr. 2018, 7:17 pm Oli Crask, notifications@github.com wrote:

The second suggestion you gave removed the object. No error in the console.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/SimonBiggs/scriptedforms/issues/242#issuecomment-381915579, or mute the thread https://github.com/notifications/unsubscribe-auth/AGQVe0dzvv4SVvqAjGF-j7xz767h6KZmks5tpbMzgaJpZM4TWnRR .

[SimonBiggs]

Html has to open and close in reverse order. As in elements must be nested.

That error is saying that a closing tag appeared before it was supposed to. That could be your html writing, or it could be the way the markdown is converted into html...

On Tue., 17 Apr. 2018, 7:12 pm Oli Crask, notifications@github.com wrote:

Does html always have to go around the sections? Whenever I try to put it inside I get 'Template parse error' 'Unexpected closing tag'. The span style didn't seem to change anything

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/SimonBiggs/scriptedforms/issues/242#issuecomment-381913804, or mute the thread https://github.com/notifications/unsubscribe-auth/AGQVe8LB_BJRUa9psX-X2AQ2GACAY_b7ks5tpbIRgaJpZM4TWnRR .

[olivercrask]

So I have a button generating the table. I put your suggestion around the button section and then the button was no longer visible.

[olivercrask]

I did nest them like this: section-button span style -- code here -- /span style /section-button

also tried

span style section-button -- code here -- /section-button /span style

[SimonBiggs]

The span?

On Tue., 17 Apr. 2018, 7:20 pm Oli Crask, notifications@github.com wrote:

So I have a button generating the table. I put your suggestion around the button section and then the button was no longer visible.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/SimonBiggs/scriptedforms/issues/242#issuecomment-381916390, or mute the thread https://github.com/notifications/unsubscribe-auth/AGQVe9eI5JzNGTd6JIsmlvZLo9rpchs4ks5tpbO8gaJpZM4TWnRR .

[olivercrask]

Yes?

[SimonBiggs]

Style tags only go at the very top of the page. All by themselves.

On Tue., 17 Apr. 2018, 7:20 pm Oli Crask, notifications@github.com wrote:

I did nest them like this: section-button span style /span style /section-button

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/SimonBiggs/scriptedforms/issues/242#issuecomment-381916674, or mute the thread https://github.com/notifications/unsubscribe-auth/AGQVeyhHNl6DjylFbGwliHqZOvse4-o7ks5tpbP0gaJpZM4TWnRR .

[olivercrask]

Just my HTML skills then I guess haha..

Then how do I put the table and code in these if they are by themselves? <span style="width:50%"> Table here </span> <span style="width:50%"> Code that gives output here </span>

[SimonBiggs]

Hehe, because I was replying by email those responses of mine were a bit out of order :)

[SimonBiggs]

I think I'll have to sit down at a computer and see what I can achieve. I'll let you know how I go when I get a chance.

[SimonBiggs]

As of 0.9.2dev2 using the full width of the page is now possible by writing the following at the top of the form:

<style>
  .scripted-form-widget .form-contents {
    max-width: none;
  }
</style>

Columns are possible by writing:

<style>
  .flex-grid {
    display: flex;
  }

  .column {
    flex: 1;
    padding: 10px;
  }
</style>

<div class="flex-grid">
  <div class="column">
    Column 1
  </div>

  <div class="column">
    Column 2
  </div>
</div>

[SimonBiggs]

See https://raw.githubusercontent.com/SimonBiggs/scriptedforms/master/example/example/experimental/two-columns.md for an example with columns also.