This is a migrated thread and some comments may be shown as answers.

Clear cross moves with padding-left

4 Answers 52 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Tayger
Top achievements
Rank 1
Iron
Tayger asked on 12 Nov 2016, 12:02 PM

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

4 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 15 Nov 2016, 09:23 AM
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
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
0
Tayger
Top achievements
Rank 1
Iron
answered on 30 Nov 2016, 08:22 PM

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)

0
Tayger
Top achievements
Rank 1
Iron
answered on 30 Nov 2016, 08:28 PM

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" 
0
Iliana Nikolova
Telerik team
answered on 02 Dec 2016, 08:58 AM
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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Tags
AutoComplete
Asked by
Tayger
Top achievements
Rank 1
Iron
Answers by
Iliana Nikolova
Telerik team
Tayger
Top achievements
Rank 1
Iron
Share this question
or