0

I have an issue related with an html elements which doesn't close the gap between an <input> and <span> element. As seen on the screenshot (highlighted in red box) below.

enter image description here

I'm not sure if <input> and <span> elements can be used together to achieve a drop down list like control - an input box on the left-hand side and, a button on the right-hide side as one control.

A code snippet of <span> element which wraps the <input> and <span> elements. 

<span class="k-state-default">
                <input type="text" id="scheduler" placeholder="Click arrow to create schedule" class="k-input">
                <span class="k-select" id="btn-scheduler" onclick="showSchedulerPanel()" role="button">
                    <span class="k-icon k-i-clock"></span>
                </span>
            </span>

I couldn't find any related issues in SO, if you know a link please feel free to comment and mark this question as duplicate.

I have put up a fiddle to illustrate the problem. https://jsfiddle.net/jun1uz/365bt4qp/4/

Any inputs, suggestions or violent reaction is welcome.

Junius
  • 589
  • 2
  • 12
  • 41

1 Answers1

0

i would go with 

#btn-scheduler {
   position:relative;
   left:-5px;
}
Stefan Pakic
  • 66
  • 8
  • thanks for sharing your thoughts. Why would `position: relative` did the trick? Isn't it `` element is an inline-block element will normally render besides any element? – Junius Nov 11 '18 at 22:02