Would like to specify class for suggest boxes, or auto-increment

[scottdear]

In RQB it would be very helpful to be able to style the suggestboxes (in my case specifically width).

RQB can have more than one suggest box, and it would be nice if the classes could be specified at instantiation, or if they can just have an autoincrement value, like gwtSuggestBox1 gwtSuggestBox2, etc. so that each box can be accessed and styled individually, whichever makes more sense.

More info at: http://stackoverflow.com/questions/29519105/how-to-set-the-width-of-suggest-boxes-in-redquerybuilder/29576115

[salk31]

You can already add a style name to the parameter/right hand side of the comparison. You can add the style name to the type or override for the specific column. Does that get you part of the way?

The column/left hand side doesn't do anything like that. I've caused trouble now as moving the class name up to the common parent might break other users code.

I guess you could hunt for that but would be pretty messy.

Would a class name for the particular editor and one for the column selector fix it for you or do you need to style specific column selectors individually?

NB I've just pushed the first part of a visitor framework which is intended to be very flexible. So you will get the schema info, the DOM node, current value to do whatever you want...

[scottdear]

I think the first part my solve my issue. If I can add a style name to the parameter/right hand side of the comparison, then I can apply a style to only that element.

I tried

.suggestPopupMiddleCenter >div >div { min-width:300px; !important }

But it also affected the field picker dropdown.

On 04/18/2015 12:19 AM, salk31 wrote:

You can already add a style name to the parameter/right hand side of the comparison. You can add the style name to the type or override for the specific column. Does that get you part of the way?

The column/left hand side doesn't do anything like that. I've caused trouble now as moving the class name up to the common parent might break other users code.

I guess you could hunt for that but would be pretty messy.

Would a class name for the particular editor and one for the column selector fix it for you or do you need to style specific column selectors individually?

NB I've just pushed the first part of a visitor framework which is intended to be very flexible. So you will get the schema info, the DOM node, current value to do whatever you want...

— Reply to this email directly or view it on GitHub https://github.com/salk31/RedQueryBuilder/issues/38#issuecomment-94137855.

[salk31]

How did it manage that? .suggestPopupMiddleCenter should make sure it doesn't impact it?

[scottdear]

Both the field dropdown and the value suggest dropdown use this class for the dropdown. I was trying to style the dropdown and give it a min-width, which lets it expand as needed, but since they both use it, it was causing problems for the field dropdown, which is working correctly ATM.

On 04/24/2015 07:51 AM, salk31 wrote:

How did it manage that? .suggestPopupMiddleCenter should make sure it doesn't impact it?

— Reply to this email directly or view it on GitHub https://github.com/salk31/RedQueryBuilder/issues/38#issuecomment-95953550.

[salk31]

Sorry. Senior moment. I read "field picker" as "date picker". I'll push an experimental fix to tardis to add explicit types to both.

[salk31]

I've pushed a change to tardis. Please could you give it a go?

rqbParam is on the outer div for value selector. rqbExprCol is on the outer div for column/join selector.

If it looks ok I'll put onto master and try and document the CSS style names.

[scottdear]

I think we got our wires crossed on this one. rqbParam and rqbExprCol are wrapped around the actual input boxes and what I need is dynamic resizing of the dropdowns.

What I need to do is to cause the suggest dropdown, that shows possible values of the field (on the right), to function like the field pulldown on the left.

What happens on the left hand box is that when I have a list of fields, the dropdown width automagically resizes so that the dropdown is as wide as the widest field name, so there is no left to right scrolling.

When I use the value suggest dropdown, which shows values, it defaults to a width of 150. Then when I scroll down the list, if I run across a line that is > 150px, then it adds a left right scroller to the bottom of the dropdown and occludes any overflow text on the right. I was looking for control of the style of the value/suggest dropdown element so I could give it either a min-width, or a hard coded width that will be > 150px.

The HTML where there is an issue is:

If I change the second line to use min-width instead of width, I still get the left/right scroller, but the box expands so there is no occlusion, which is what I am looking for. Ideally the box would auto expand and I would never see the left/right scroller, or I would only see it if my value was ridiculously long. Let me know your thoughts.

scottdear commented 9 years ago

I did a bit more digging and if I comment out the following line:

scrollPanel.setWidth("150px");

At around line 107 in redquerybuilder-core/src/main/java/com/redspr/redquerybuilder/core/client/expression/SuggestEditorWidget.java

With this line commented out it sets the box size to the size of the largest element in the current list. With the line in, it hard wires the box at 150px and anything larger causes a horizontal scrollbar to show.

Also with this line out, as items are added the box gets wider as expected. This is what I need for now.

The secondary issue described below, seems to be a problem w/ the scrollPanel widget itself. Bascially it sizes the box to the width of the widest list item. Then adds the vertical scrollbar, which then hides the longest line with the 8px wide vertical scroller. Because the longest line is now hidden it adds the horizontal scrollbar so you can scroll back and forth 8px.

The issue is described pretty well in the following stack-overflow issue:

http://stackoverflow.com/questions/16286602/gwt-hide-horizontal-scroll-bar

In a nutshell, the secondary issue isn't an RQB issue but a GWT issue and limitation of scrollPanel.

I think commenting out the line will work for now. Longer term, and to make it more like the field pulldown, as it populates it could keep an idea of the largest width, then after it adds all it's items it could do a scrollPanel.setWidth((biggest+8)+"px") or as the stack-overflow issue suggest, it might be better to roll our own widget.

salk31 commented 9 years ago

Sorry to take so long to get back to you. Needed a while to digest all that.

The extra classes were intended so you could target the left suggest box not the other so sort of make sense and I might keep them for the next developer.

But I see what you mean. The 150px is only on the tardis branch. I'll try and look at the root GWT issue as obviously best to fix there (btw they are very friendly and helpful if you want to have a crack).

So after all that shall I just close this issue and wait for a possible pull request?

salk31 commented 9 years ago

Have you seen CustomScrollPanel? I've never played with it but seems like it would be worth a try.

scottdear commented 9 years ago

Yeah, that's the solution I saw that most people when with when they had issues w/ the regular scrollPanel.

Commenting out the width line solved my immediate issue, kind of a kludge as you're supposed to set the width on scrollPanels, but it seems to work.

scottdear commented 9 years ago

If your OK w/ commenting out the 150px line, I'll do a pull request and make the change.

salk31 commented 9 years ago

Not sure I like the idea of CustomScrollPanel. Seems like it is fighting the browser rather than trying to work with it.

scottdear commented 9 years ago

I'm with you on that. What is really needed here is a "setMinWidth" call. Using a CustomScrollPanel just to get that type of functionality, would be like shooting a fly with a bazooka. Removing the width constraint seems to get us 90% of the way there, and I think that's good enough.

On Fri, May 22, 2015 at 11:44 PM, salk31 notifications@github.com wrote:

Not sure I like the idea of CustomScrollPanel. Seems like it is fighting the browser rather than trying to work with it.

— Reply to this email directly or view it on GitHub https://github.com/salk31/RedQueryBuilder/issues/38#issuecomment-104854100 .

scottdear commented 9 years ago

Downloaded new version did an mvn clean install, and tested and it appears to be working as advertised, closing this one out.

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[scottdear]

I did a bit more digging and if I comment out the following line:

scrollPanel.setWidth("150px");

At around line 107 in redquerybuilder-core/src/main/java/com/redspr/redquerybuilder/core/client/expression/SuggestEditorWidget.java

With this line commented out it sets the box size to the size of the largest element in the current list. With the line in, it hard wires the box at 150px and anything larger causes a horizontal scrollbar to show.

Also with this line out, as items are added the box gets wider as expected. This is what I need for now.

The secondary issue described below, seems to be a problem w/ the scrollPanel widget itself. Bascially it sizes the box to the width of the widest list item. Then adds the vertical scrollbar, which then hides the longest line with the 8px wide vertical scroller. Because the longest line is now hidden it adds the horizontal scrollbar so you can scroll back and forth 8px.

The issue is described pretty well in the following stack-overflow issue:

http://stackoverflow.com/questions/16286602/gwt-hide-horizontal-scroll-bar

In a nutshell, the secondary issue isn't an RQB issue but a GWT issue and limitation of scrollPanel.

I think commenting out the line will work for now. Longer term, and to make it more like the field pulldown, as it populates it could keep an idea of the largest width, then after it adds all it's items it could do a scrollPanel.setWidth((biggest+8)+"px") or as the stack-overflow issue suggest, it might be better to roll our own widget.

[salk31]

Sorry to take so long to get back to you. Needed a while to digest all that.

The extra classes were intended so you could target the left suggest box not the other so sort of make sense and I might keep them for the next developer.

But I see what you mean. The 150px is only on the tardis branch. I'll try and look at the root GWT issue as obviously best to fix there (btw they are very friendly and helpful if you want to have a crack).

So after all that shall I just close this issue and wait for a possible pull request?

[salk31]

Have you seen CustomScrollPanel? I've never played with it but seems like it would be worth a try.

[scottdear]

Yeah, that's the solution I saw that most people when with when they had issues w/ the regular scrollPanel.

Commenting out the width line solved my immediate issue, kind of a kludge as you're supposed to set the width on scrollPanels, but it seems to work.

[scottdear]

If your OK w/ commenting out the 150px line, I'll do a pull request and make the change.

[salk31]

Not sure I like the idea of CustomScrollPanel. Seems like it is fighting the browser rather than trying to work with it.

[scottdear]

I'm with you on that. What is really needed here is a "setMinWidth" call. Using a CustomScrollPanel just to get that type of functionality, would be like shooting a fly with a bazooka. Removing the width constraint seems to get us 90% of the way there, and I think that's good enough.

On Fri, May 22, 2015 at 11:44 PM, salk31 notifications@github.com wrote:

Not sure I like the idea of CustomScrollPanel. Seems like it is fighting the browser rather than trying to work with it.

— Reply to this email directly or view it on GitHub https://github.com/salk31/RedQueryBuilder/issues/38#issuecomment-104854100 .

[scottdear]

Downloaded new version did an mvn clean install, and tested and it appears to be working as advertised, closing this one out.