nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Resizable forms

Harry Frank

I have been working with the UI model html tags listed in this article:

https://www.blackbaud.com/files/support/guides/infinitydevguide/infsdk-developer-help.htm#../Subsystems/data-forms/Content/data-forms/html-for-ui-model-data-forms.htm

I set the form to use bbui-forms-sizable so that users can resize the form to get more room to view a large collection field and comments box. I am trying to get those 2 fields to be large on the initial load, but not put a minimum size restriction on the size of the form itself. Any ideas on how to get those fields to start at about 1000 pixels wide, but not prevent the form from being resized to a smaller size?

Find more posts tagged with

Comments

Steven Finnell

Hey Harry,

So if I'm understanding your question correctly, you would like to know if you could specify the width of the two text boxes in your form to have a width of 1000 pixels but have it so that even if you shrink the form to be smaller than the 1000 pixels that it will still keep those text boxes the same size. Is that correct?

Harry Frank

I'd like them to resize down with the form, anchored to the right side, but not prevent the form from resizing. If i specify the width as larger than the current form width, then the form wont shrink smaller than the size of the field when I attempt to resize it by dragging the corner.

I just want to set a width for the initial load, but not restrict the size of the form by setting a minimum width on the fields.

Steven Finnell

The only thing that comes to mind would be to have some CSS rules in your UI model that sets the width to be a percentage value, that way when you resize your window to become wider, the input boxes will stretch.

Here's a link that briefly covers the CSS as well and lets you play around on their site:

One thing to keep in mind if you take this approach is that the size will be dependent on the parent container it's in, meaning if you're working in the typical <table> structure, you'll need to apply the CSS to multiple levels. Also if you don't want your form to have a minimum size at all I'm not sure if that's possible but your best bet would be to look at the min-width style and set it to 0. Only possible issue there would be Blackbaud having the UI contents wrapped in a window that has a minimum size set.

Here's a useful link on that:

Sorry if that's not much help but hopefully that'll get you down the right path.