Clear cross moves with padding-left

5 posts, 0 answers
  1. Tayger
    Tayger avatar
    122 posts
    Member since:
    Jan 2015

    Posted 12 Nov 2016 Link to this post

    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

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 15 Nov 2016 Link to this post

    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.
     
  3. Tayger
    Tayger avatar
    122 posts
    Member since:
    Jan 2015

    Posted 30 Nov 2016 in reply to Iliana Nikolova Link to this post

    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)

  4. Tayger
    Tayger avatar
    122 posts
    Member since:
    Jan 2015

    Posted 30 Nov 2016 in reply to Tayger Link to this post

    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" 
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 02 Dec 2016 Link to this post

    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.
Back to Top