Clear cross moves with padding-left

[Tayger]

Hello 

This is rather a visual problem than a real bug. I wanted to report it but can't find the page where you can report such things.

By default autocomplete Widget shows a cross on the right side of the input element, that also can be disabled by "clearButton: false". The autocomplete Widget in my project has a set "padding-left: 20px", so the text will not be hidden by a magnifying glass (see attached screenshot). The weird thing: Using "padding-left" also affects the clearButton position and moves it further into the text area. The visual effect is not that nice. I understand that the clearButton should not hit the right border but its position should only be affected by padding-RIGHT and not padding-LEFT. I disabled it for that reason. 

Regards

[Iliana Dyankova]

Hi Farai,

I am not quite sure if I understand correctly the current issue. Could you please modify my test example and demonstrate your exact setup - this way I would be able to provide concrete recommendations? Thank you in advance for your cooperation.

Regards,
Iliana Nikolova
Telerik by Progress

 

 

[Tayger]

Hi Illiana

Based on your example I had difficulties to find out what the problem is: In your initial example you move the the autocomplete widget. In my case I want to move the text INSIDE the input field. I have changed the example by adding a new CSS style:

    .b_shadowrightdown .k-input{
            box-shadow: 3px 3px 6px #52504F;
            padding-left: 20px;
    }

This CSS style is attached to the input element of the autocomplete. As you can see the cross (x) on the right side is also moved 20 pixel to the left (what only should be affected by padding-right: 20px)

[Tayger]

My example doesn't seem to be saved. Here are the changes to be done to see the problem:

1. Add this class:

.b_shadowrightdown .k-input{  
    box-shadow: 3px 3px 6px #52504F;
    padding-left: 15px;}

2. Replace existing input element by this line:

<input id="countries" style="width:500px;" class="b_shadowrightdown"

[Iliana Dyankova]

Hi Tayger,

Thank you for the provided details. This behavior is expected because the close icon has an absolute position which is relative to the .k-autocomplete element. Actually, the close icon hasn't been affected by the left padding - it keeps its initial position. If you would like to move it, you could set negative right margin to it (updated dojo).

Regards,
Iliana Nikolova
Telerik by Progress