Input field VL Web: No input box, only input line

[René Houba]

Hi,

When you show an input field in VL Web, it is always visualised as an input box like this:

Input Field VL Web 1.PNG (513 Bytes) Viewed 12130 times

But I want to have it visualised as this (just underlined with a color):

Input Field VL Web 2.PNG (675 Bytes) Viewed 12130 times

Is that possible?


Kind regards,
René

[caseywhite]

If you add the following to a style then you should get what you want:
Borderbottom(1) Borderleft(0) Borderright(0) Bordertop(0)

For the color just add a border brush with whatever color you want. The trick is that if you click on the borders section of the toolbar it makes it look as if it is 0 but you actually have to type in a 0. You won't see the 0 but it has now inserted a 0 in the code for you.

This seems to work on an edit box or a field you drag on your page. It works whether you do it using an inline style, a custom theme draw style or by changing the "Edit" control theme draw style.

[René Houba]

Hi Casey,

Thanks for your reply.

What about the brush?

I have this code now:
Define_Com Class(#PRIM_VS.style) Name(#Style15pBlack) Facename('Comfortaa') Fontsize(15) Fontunits(Pixel) Normbackcolor(255:255:255) Textcolor(76:77:76) Borderbottom(1) Borderleft(0) Borderright(0) Bordertop(0) Bordercolor(194:172:92)

But I still see:

Input Field VL Web 3.PNG (1.41 KiB) Viewed 12116 times

So the input field still has borders on top/left/right.

[caseywhite]

Looks like for a regular input box you have to use a theme to make it work. Not sure why.

[MarkD]

For a dictionary defined element this works for me:

Define_Com Class(#vf_elusr2.Visual) Name(#InputPlatformU) Parent(#Panel_Logon) Displayposition(4) Tabposition(1) Left(12) Height(22) Width(286) Top(19) Labelposition(None) Marginleft(0) Usepicklist(False)

Define_Com Class(#Prim_vs.Style) Name(#BorderBottomOnly) Borderbottom(1) Borderleft(0) Bordertop(0) Borderright(0) Textcolor(Black)

In CreateInstance ……….

#InputPlatformU.EditStyleS.Add Style(#BorderBottomOnly)

[caseywhite]

I see you are using EditStyle instead of Style. That must be it. When you assigned a ThemeDrawStyle it must be smart enough to work out that it should apply it.

[Stewart Marshall]

The Edit ThemeDrawStyle of a Theme applies to all Edits in an application. This allows you make a single change that will affect every field instance throughout your application.

Individual instances of a field can then be changed by applying a ThemeDrawStyle to the EditThemeDrawStyle property. This can be set on the ribbon or in code at runtime.

Capture.PNG (17.28 KiB) Viewed 12100 times

Should you need great granularity or just an ad hoc style, you can define the style in code and override the theme behaviour by applying it to the EditStyle property of the field.

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Height(616) Width(888)

Define_Com Class(#PRIM_VS.Style) Name(#Style1) BorderBottom(2) BorderLeft(0) BorderRight(0) BorderTop(0) BorderBrush(#Brush1)
Define_Com Class(#PRIM_VS.SolidBrush) Name(#Brush1) Color(163:98:14)

Define_Com Class(#xDemoNumber.Visual) Name(#Number) DisplayPosition(1) EditStyle(#Style1) Left(24) Parent(#COM_OWNER) TabPosition(1) Top(16) Height(25) 

End_Com

Regards