combo box

  
Hi,

When I used the combo box. When I put the mouse on it, the logo looks like a edit box.
Can I change it to an arrow? Thanks a lot.

Hi Eric,

That's not a combo box. That's an edit field in a form.
Kilian Hekhuis wrote:
Hi Eric,

That's not a combo box. That's an edit field in a form.
 Hi Kilian,

Sorry, I didn`t get it. It seems I did use the combo box here. How can I change the logo?

 
Ok, I forgot that that's what forms do. You can change it by the appropriate CSS.
Kilian Hekhuis wrote:
Ok, I forgot that that's what forms do. You can change it by the appropriate CSS.
 Hi Kilian,
Is there any CSS file which I can use has already provided by OutSystems?
 

Hi eric,

If you can click the Theme or the Style Sheet property of a screen to check the CSS used. To check what styles you need to override, use the devtools in Chrome, IE or Firefox (F12 etc.).
Kilian Hekhuis wrote:
Hi eric,

If you can click the Theme or the Style Sheet property of a screen to check the CSS used. To check what styles you need to override, use the devtools in Chrome, IE or Firefox (F12 etc.).
 Hi Kilian,

Sorry, I didn`t get you. Can I write some css code in the current page to change the logo?
Is that any code that I can re-use? thanks a lot for the reply.
 

Hi eric,

There's various locations you can change CSS. Note this is, imho, rather basic platform functionality that every developer should know. It's probably in the tutorials as well. That said, I'll explain the basics.

If you look at your eSpace's properties, you'll find a property called "Default Theme". This sets the theme that's used by default for all screen flows (you can override the default per flow):



If you look at the Themes folder (Interface tab), you'll find that theme (either referenced or included in the eSpace):



The theme has a property called "Style Sheet". If you double click it, the CSS editor will open, showing you the CSS. In the eSpace where the Theme is defined, you can edit it. Note the property called "Base Theme". In this case, "London" (from RichWidgets). The base theme also defines CSS, in the same way the Theme does.

When there's CSS specific to a screen, use the Style Sheet property of the screen:



When you double click it, the CSS editor will open:



Note that besides the CSS for the screen, you can also look at the Theme (and Base Theme)'s CSS.

If you never ever want the "edit" pencil icon (note it isn't called a "logo"), you need to override the style that defines the pencil icon. It is defined (as can be determined by inspecting the element) in Form.css. You'll find the following CSS:

.Form:not(.WithTouchEvents) input.ReadOnly:hover:not(.SmartInput_Changed) + .SmartInput_Undo + .FormEditPencil, .Form:not(.WithTouchEvents) textarea.ReadOnly:hover:not(.SmartInput_Changed) + .SmartInput_Undo + .FormEditPencil, .Form:not(.WithTouchEvents) select.ReadOnly:hover:not(.SmartInput_Changed) + .SmartInput_Undo + .FormEditPencil {
    display: inline-block;
}

You need to override that to get rid of the pencil (which itself is defined in the CSS rules for the FormEditPencil class). If you don't want it anywhere, you'll need to add the override to your Theme. If you don't have a Theme, you need to create one. Alternatively, if it's just a single screen you want to change, override it in the screen's CSS as shown above.
Kilian Hekhuis wrote:
Hi eric,

There's various locations you can change CSS. Note this is, imho, rather basic platform functionality that every developer should know. It's probably in the tutorials as well. That said, I'll explain the basics.

If you look at your eSpace's properties, you'll find a property called "Default Theme". This sets the theme that's used by default for all screen flows (you can override the default per flow):



If you look at the Themes folder (Interface tab), you'll find that theme (either referenced or included in the eSpace):



The theme has a property called "Style Sheet". If you double click it, the CSS editor will open, showing you the CSS. In the eSpace where the Theme is defined, you can edit it. Note the property called "Base Theme". In this case, "London" (from RichWidgets). The base theme also defines CSS, in the same way the Theme does.

When there's CSS specific to a screen, use the Style Sheet property of the screen:



When you double click it, the CSS editor will open:



Note that besides the CSS for the screen, you can also look at the Theme (and Base Theme)'s CSS.

If you never ever want the "edit" pencil icon (note it isn't called a "logo"), you need to override the style that defines the pencil icon. It is defined (as can be determined by inspecting the element) in Form.css. You'll find the following CSS:

.Form:not(.WithTouchEvents) input.ReadOnly:hover:not(.SmartInput_Changed) + .SmartInput_Undo + .FormEditPencil, .Form:not(.WithTouchEvents) textarea.ReadOnly:hover:not(.SmartInput_Changed) + .SmartInput_Undo + .FormEditPencil, .Form:not(.WithTouchEvents) select.ReadOnly:hover:not(.SmartInput_Changed) + .SmartInput_Undo + .FormEditPencil {
    display: inline-block;
}

You need to override that to get rid of the pencil (which itself is defined in the CSS rules for the FormEditPencil class). If you don't want it anywhere, you'll need to add the override to your Theme. If you don't have a Theme, you need to create one. Alternatively, if it's just a single screen you want to change, override it in the screen's CSS as shown above.
 Hi Kilian,

Thanks a lot for the reply, it`s very helpful.
I have override it and remove the icon.