combobox get rid of the pencil

combobox get rid of the pencil

  

I have set the .FormEditPencil { display: none;}  in the stylesheet and in the style of the combobox I set .FormEditPencil , the problem is the fact it hides the text as well... 

in the extended properties I have it set as: 

SyntaxEditor Code Snippet

"background-color: #F2F2F2; text-decoration-color: solid black;" 

combobox is set the enable property as False. 

Hi Jorge,

Does above solution solve your problem?

no. it did not solve. It hides the pencil but it hides the TEXT as well. I want to show the text but not the pencil. it is annoying the pencil and usefulness. 


Hi Jorge Almeida,

just apply this style property to the combo box.

"background-image:none !important; "

Hello Jorge,

When trying to change the styling of a widget, you need to be aware of the styling being applied.
In my case, in the form, the following style is being applied when I see the :

.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;
}

As you can see, this is a very specific CSS.

So if you use this selectors and change the style to "display:none;" it should make the pencil disappear. 

Cheers,
Eduardo Jauch 

kavita bagale wrote:

Hi Jorge Almeida,

just apply this style property to the combo box.


"background-image:none !important; "


Please,

Don't use !important unless there is no other way.
Using !important is a very bad practice. If you can't avoid because you are using some library you can't change that is using, this means that if possible, you should start looking for a replacement for it, or try to reason with the developers to fix it.

Cheers,
Eduardo Jauch

kavita bagale wrote:

Hi Jorge Almeida,

just apply this style property to the combo box.


"background-image:none !important; "


it hides the text as well. It is not working. 


I implement following code its work fine.

Please make sure your are not applying another css to the combo box instead of this.

"background-image:none !important; "

may be the problem is 

1) make sure you have records in combo box

2) make sure text color and background colors are different


please do not use display:none property it will hide combo box. If problem is not solve share your screen short or Olm file.

.


Eduardo Jauch wrote:

Hello Jorge,

When trying to change the styling of a widget, you need to be aware of the styling being applied.
In my case, in the form, the following style is being applied when I see the :

.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;
}

As you can see, this is a very specific CSS.

So if you use this selectors and change the style to "display:none;" it should make the pencil disappear. 


The combo box has no visible style associated, and stylesheet does not have any .Form class or similar... it is clear that there is somewhere a selector that overtakes the customized CSS i've tried to inject...


1) and 2) are not the reason. The reason is some selector that overtakes this CSS I've tried to inject. 

can you share your inspect element screen short.

Jorge, 


What is the Theme you are using? 

Your combo box is inside what?
A Form? An Editable Records? A Table/List records? Directly in the page? 

Jorge Almeida wrote:

I have set the .FormEditPencil { display: none;}  in the stylesheet and in the style of the combobox I set .FormEditPencil , the problem is the fact it hides the text as well... 

in the extended properties I have it set as: 

SyntaxEditor Code Snippet

"background-color: #F2F2F2; text-decoration-color: solid black;" 

combobox is set the enable property as False. 

If you set the style of the combo box to be ".FormEditPencil", and than apply any style to this class, it will apply to everything in the combobox, including the text.

So, don't. Do not apply "FormEditPencil" class to the combo box.


Eduardo Jauch wrote:

Jorge, 


What is the Theme you are using? 

Your combo box is inside what?
A Form? An Editable Records? A Table/List records? Directly in the page? 

Theme: London


Combo box is inside a Form. 


Thanks for the other tip. :) 


Hi Jorge,

I tested in the same conditions.
If you apply the following selector/style in your app theme, you will get rid of all the "pencils" when hovering the inputs:

.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: none;
}

This solve your problem. Please check this Olm file.


Please try this code:

.Form:not(.WithTouchEvents) select.ReadOnly:hover:not(.SmartInput_Changed) + .SmartInput_Undo + .FormEditPencil
{
display: none;
}

Jorge,

Are you using the LONDON LONDON theme, like, in the version 9?

If the code I gave you didn't work, maybe it is because something changed from 9 to 10 (I'm using the Web Application theme).

I don't have access to a version 9 to look for the style for you.

Cheers,
Eduardo Jauch

thanks Eduardo, your CSS helped! :D  Kudos for you!


Many thanks Kavita for your input. :) 

Nice you solved the problem ^^
Cheers,
Eduardo Jauch

now the only problem is the fact that in Chrome it shows correctly the black colour for the text but in IE the color is grey.. :/  I want the black colour in the IE. 

IE which version you are using

IE 11

Jorge,


You should try to change "text-decoration-color" to "text-decoration". The first only accept a single property, the color.

Cheers,
Eduardo Jauch

Jorge,

Use IE11 hack proerty and change "color:#000" property 

_:-ms-fullscreen, :root .selector {}

Eduardo, i got rid of the "color" part but the problem remains. In chrome it is ok, but in this IE 11 the color remains grey . I refreshed and cleared the cache as well-

Just to clarify...

You want to set the color of the text as black?
In this case, you should use the color property. 

"text-decoration" and "text-decoration-color" are used to define the DECORATION of the text.

I want to set the color of the TEXT as black. 



Jorge,


.select-box is own class and create hierarchy 

/* Internet Explorer/Edge ≥ 11*/
_:-ms-fullscreen, :root .select-box .Form input.ReadOnly, .Form textarea.ReadOnly, .Form select.ReadOnly
{
color: #000;
}

Hello Jorge,

Just remember that you want to style, probably, only the combo boxes that are disabled.
Remember to select tem:


.Form select:disabled {
color: black; }

no.. it did not work. combo boxes are disabled, yes... but that CSS did not work for IE11. (select tem??)

Solution

Hi Jorge,


For IE11 working fine. Use below code


select[disabled='disabled']::-ms-value {
    color: #000;
}


Solution

great, Kavita. It worked like a gem. 


Hi Everyone,

I found out why they appear and how to get rid of them.

Outsystems adds them AUTOMATICALLY when you have input controls on a form where the form does NOT have the "Form" class applied to it.  Adding the "Form" class to the form removes them.

It's the first time I've seen a system adding actual HTML because you HAVEN'T put a class on something!

Nathan