I am creating an infopath 2010 form, which will be accessed through a browser. Unfortunately, the browser based infopath field widths don't change based on the width of their contents. So, if you want to populate a field with content of varying widths you get situations like this enter image description here

or this

enter image description here What is the best way to deal with this situation? I am having a difficult time keeping this looking good and simple for the user to fill out.

  • 1
    This seems a little more of a graphics or HTML question than a UX one but it's interesting issue.
    – Mayo
    Commented Jun 23, 2015 at 15:32
  • This is just a limitation of the tool I am using: infopath. It is a known limitation and pretty well documented. Not much I can do on the technical side.
    – Matt
    Commented Jun 23, 2015 at 15:37
  • 1
    I'm not sure you can improve the UX while limiting yourself to using a tool that requires bad UX
    – DaveAlger
    Commented Jun 23, 2015 at 15:42
  • Unfortunately, I am stuck with the tool. Not my choice. I suppose maybe I am looking for the least bad option.
    – Matt
    Commented Jun 23, 2015 at 15:45
  • 2
    The UX answer is: don't use Infopath. :)
    – DA01
    Commented Jun 23, 2015 at 15:56

2 Answers 2


In this situation you either need to switch to a new tool that will provide a better user experience or let the user know what to expect up front.

Communication is key

People are actually pretty forgiving if you are honest with them. Post a note at the top explaining the limitations of the tool so they know what to expect and are aware of it. The pictures in this question were clear enough for me to understand the situation.

  • as a side note I found out that if you completely clear the width of the control so it isn't set to any value then they will automatically be as long as the widest element that can go in them and although this means lots of ugly white space on the screen it sounds like the white space isn't there when printed. you will need to test this out as I have no way of verifying this.
    – DaveAlger
    Commented Jun 23, 2015 at 19:17

There are several ways to solve this problem and it has a lot of "it depends."

OPTION 1: Assuming there are not to many options you can list them and have the user select his option with radio buttons.

OPTION 2: Use a revealed div and a scroll bar, if necessary.

OPTION 3: Put ellipses when the line gets longer and show a tool-tip (don't like this option)

OPTION 1 might sound funky but you can come up with many creative solutions by grouping like items, etc... It's something I've done several times and its tested well.

  • 1. There are a lot of options and this doesn't quite work for what I am trying to achieve. 2. I have no control over the HTML. 3. Is actually how infopath handles it, but, yeah, it stinks. Also, this is kind of a legalish document, and I am doubtful the client will accept having text cut off. Thank you for the suggestions.
    – Matt
    Commented Jun 23, 2015 at 16:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.