3 Replies Latest reply on Sep 24, 2009 10:58 AM by ilya_shaikovsky

    suggestionbox position

      Hello, I couldn't find this question on the forums yet, sorry if it's been posted.

      I have a rich:suggestion box attached to a simple h:inputText. When the suggestion box opens, its left side is aligned with the left side of the input, just like in the demo.

      My problem is that this input is a "live search" box, so the items in the suggestion box are wide (think 400px versus 200px for the input). Also, the input is located on the far right side of the screen. So part of the suggestion box gets cut off.

      What I wanted was to make the right side of the box align with the right side of the input (or, more generally, fiddle with the alignment options).

      I am trying to do this through CSS positioning, but ran into troubles and browser issues... I could keep trying, but I figured I'd first ask if anyone had another solution.

      Thanks!
      - Joseph

        • 1. Re: suggestionbox position
          ilya_shaikovsky

          Unfortunatelly this component does not provide our smart positioning configurable script as other components like calendar, combobox and so on. It was implemented before and we not added this later.

          So seems only CSS workarounds could become a solution.

          • 2. Re: suggestionbox position

            Thank you very much for the quick reply.

            I almost got it all working using the following css rules:

            #liveSearchSB .rich-sb-ext-decor-1 { position: relative; left: -275px; width: 400px; }
            #liveSearchSB .rich-sb-ext-decor-2 { width: 388px; overflow: auto; }
            #liveSearchSB .rich-sb-ext-decor-3 { width: 387px; }
            #liveSearchSB .rich-sb-overflow { width: 385px; overflow: visible; }
            #liveSearchSB .rich-sb-int-decor-table { width: 380px; overflow: visible; }
            #liveSearchSB .rich-sb-shadow { display: none; }
            


            where "liveSearchSB" is the ID of the rich:suggestionbox, inside an a4j:form with prependId="false".

            These style rules place the box further to the left, and stretch it to the right, to match my layout. There are a few glitches (the content is a little too wide and a horizontal scrollbar appears, for example).

            Firefox 3.5.3 works okay; but the main problem is IE7. It displays correctly, but puts a horizontal scrollbar on the page. Even though the box's contents are fully inside the page, it seem to think it still stretches past the border.

            This is enough for my needs right now, as we were planning on changing the layout a bit anyway. But it would be useful to have the customizable "anchoring" feature.

            Thanks!
            - Joseph

            • 3. Re: suggestionbox position
              ilya_shaikovsky

              unification of the positioning already under prototyping for 4.x ;)