Page 1 of 1
Input field VL Web: No input box, only input line
Posted: Wed Sep 06, 2017 11:57 pm
by 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 12129 times
But I want to have it visualised as this (just underlined with a color):
- Input Field VL Web 2.PNG (675 Bytes) Viewed 12129 times
Is that possible?
Kind regards,
René
Re: Input field VL Web: No input box, only input line
Posted: Thu Sep 07, 2017 1:30 am
by 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.
Re: Input field VL Web: No input box, only input line
Posted: Thu Sep 07, 2017 7:12 am
by 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 12115 times
So the input field still has borders on top/left/right.
Re: Input field VL Web: No input box, only input line
Posted: Thu Sep 07, 2017 7:53 am
by caseywhite
Looks like for a regular input box you have to use a theme to make it work. Not sure why.
Re: Input field VL Web: No input box, only input line
Posted: Thu Sep 07, 2017 8:02 am
by 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)
Re: Input field VL Web: No input box, only input line
Posted: Thu Sep 07, 2017 8:06 am
by 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.
Re: Input field VL Web: No input box, only input line
Posted: Thu Sep 07, 2017 10:19 am
by 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 12099 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