Row label in-line style: Alignment not working in search part of grids

[Kevin at LECESSE]

To anyone who can help.

I have several grids with search parts.
I want to have the row labels in the search part align to the right (if it matters, they are positioned to the left of the search criteria)
I am using the Style Editor, which comes up when you click the ... button at the right end of the "Row label in-line style" row of each search field's properties window
I can't get the labels to align to the right like I want.
Other attributes besides alignment (Bold, Italics, underline and etc...) do change in response to selections made in the Style Editor.
Alignment of the search row labels, for some reason, always stays on the left regardless of the selection made for alignment in the Style Editor.

Thanks for any help that can be offered.

Kevin

Image of Grid Builder Image of Grid Builder with Style Editor Open.gif
Image of Working Preview Image of Working Preview for Search Row Labels issue.gif

[Davidk]

Re: Row label in-line style: Alignment not working in search part of grids

Not sure what effect this may have on the balance of your Grid... but...

The problem is that the label is wrapped in a Table Cell tag... <td>. It's this <td> tag which must be right-justified... but I can't see any way to get at this tag in the grid properties.

This tag, however, does have an Class... so we can get at it. The Class, for my grid, because I'm using the iOS7 style is iOS7GridRowHeader. So, your class may be different. It will be the style name + GridRowHeader

In the Grid Properties, Local CSS Definitions, put this...

.iOS7GridRowHeader {
	text-align:right;
}

Changing iOS7 for whatever style you're using. This will result in...

Grid_Search_Right_Justify.PNG

[Kevin at LECESSE]

Re: Row label in-line style: Alignment not working in search part of grids

David,
Putting the suggested code in the Local CSS definitions property worked like a charm.

Thank you very much

I do see a potential problem though if one had a lot of grids to update like this and one changed styles there would be alot of work to do.

Thanks again

Kevin

[Davidk]

Re: Row label in-line style: Alignment not working in search part of grids

You can do this another way... but it's probably just as much work, if not more... and it's not quite a pretty regarding rendering... but it does work.

In the Grid Client-side event, onSearchRender you can do this... per control...

$('{Grid.ComponentName}.SL.INVOICECUSTID').style.textAlign = "right";

[GGandhi]

Re: Row label in-line style: Alignment not working in search part of grids

you probably are set in this problem, but i would like to point out that when the size of the screen changes the css will change the position and alignment will probably go out of order again.
but alpha provides another method to accomplish what you like to do, especially when your search part literally includes all the possible variations.
selwyn did an article where dialog is used to as search part where precise placement of the search variables can be placed along with videos to show how that is accomplished.
if interested in that, please see this link and the videos at the bottom
http://wiki.alphasoftware.com/~alpha...+Component+V11

[Davidk]

Re: Row label in-line style: Alignment not working in search part of grids

I'm not sure I understand why a text-align:right wouldn't work after a screen is resized. I've just tried it and it seems ok. You should try it... it's easy enough. Since the first method is adding to the GridRowHeader class then you're saying that a screen resize will then ignore that class? Or, as in the 2nd method, that a screen resize will somehow undo a direct style setting of an html element? I can't see how. But if that's what you're seeing I'd love to know and to have a further look.

Using the UX component as a search facility for an embedded grid is another excellent tool and well worth focus here... but I don't understand your css theory.

[GGandhi]

Re: Row label in-line style: Alignment not working in search part of grids

david discard my last post, i have misunderstood the conversation. kevin wants to have the LABEL for the row in the search part to align to the right. not the content the variables on the right side.. i am concentrating on the content never realized he wanted the ROW LABELS to align to the right.
simplest way to do is where it says the name for the label the instead of just the name of the field you say
<div style="text-align:right;">Name of the label</div>
for example as his example where the label is "Project Year:" you write down
<div style="text-align:right;">Project Year:</div>
that should do it. no need to change any class anywhere.

http://screencast.com/t/mtAF9T7XPa
edit: added the screencast.

[Davidk]

Re: Row label in-line style: Alignment not working in search part of grids

I had tried that with a <span> tag and found it didn't work. I always forget that some style settings don't work with <span>.

Agreed... this is another nice solution.

<div style="text-align:right;">Project Year:</div>

[GGandhi]

Re: Row label in-line style: Alignment not working in search part of grids

I had tried that with a <span> tag and found it didn't work.

<span style="float:right;">Project ID</span>

??

[Davidk]

Re: Row label in-line style: Alignment not working in search part of grids

I'm not sure what ?? means...

float:right; works for both a <span> or <div> tag
text-align:right; works only for a <div> tag

I've never really known why... just that there is a difference. So I finally looked it up...

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

The <div> element is a block-level element.

An inline element does not start on a new line and only takes up as much width as necessary.

The <span> element is an inline element.

[GGandhi]

Re: Row label in-line style: Alignment not working in search part of grids

?? means it works.
interpret anyway you like.
div starts and ends with a line feed making that a division (segment)in the dom.
so is span, a division, however span is smaller & finer than div, spans unto a single letter without any line feed making that a non blocking division. however float property is applied to that area of span or div, in this case the the name of the label, is already in a div so another div and a span works. but a freeform span may not work with float without a block - display block may be applied to do so. i have not had a reason to test this or time to do it.
in any case the question is answered and the original poster has few options available for him to pursue.