search

dobtco / dvl-core

Base styles for the DOBT View Layer.
https://design.dobt.co/
1 stars 1 forks source link

Weird selectize bug #224

Closed ajb closed 8 years ago

ajb commented 8 years ago

Until the dropdown is clicked, the text is misaligned:

img

http://take.ms/i98fi

jrubenoff commented 8 years ago

Which browser?

On Thu, Jan 14, 2016 at 7:23 AM, Adam Becker notifications@github.com wrote:

http://take.ms/i98fi

— Reply to this email directly or view it on GitHub https://github.com/dobtco/dvl-core/issues/224.

ajb commented 8 years ago

Chrome, latest.

On Thu, Jan 14, 2016 at 1:28 PM, Josh Rubenoff notifications@github.com wrote:

Which browser?

On Thu, Jan 14, 2016 at 7:23 AM, Adam Becker notifications@github.com wrote:

http://take.ms/i98fi

— Reply to this email directly or view it on GitHub https://github.com/dobtco/dvl-core/issues/224.

— Reply to this email directly or view it on GitHub https://github.com/dobtco/dvl-core/issues/224#issuecomment-171731385.

Adam Becker (951) 9-BECKER @AdamJacobBecker

ajb commented 8 years ago

I can't figure this out, but it's there. Just change a selectize input to have a selected option when the page loads.

I troubleshooted a big -- it appears that the markup changes from before -> after the dropdown is clicked.

Before:

<div class="selectize-input items full has-options has-items">
  <div data-value="asfd" class="selectize-item">Select a page...</div>
  <input type="text" autocomplete="off" tabindex="" style="width: 4px;">
</div>
<div class="selectize-dropdown single" style="display: none;">
  <div class="selectize-dropdown-content"></div>
</div>

After:

<div class="selectize-input items full has-options has-items">
  <div data-value="asfd" class="selectize-item">Select a page...</div>
  <input type="text" autocomplete="off" tabindex="" style="width: 4px; opacity: 0; position: absolute; left: -10000px;">
</div><div class="selectize-dropdown single" style="display: none; visibility: visible; width: 1140px; top: 40px; left: 0px;"><div class="selectize-dropdown-content"><div data-value="asfd" data-selectable="" class="option selected">Select a page...</div><div data-value="/" data-selectable="" class="option">Base Styles</div><div data-value="/color" data-selectable="" class="option">Color</div><div data-value="/layout" data-selectable="" class="option">Layout</div><div data-value="/data" data-selectable="" class="option">Data</div><div data-value="/forms" data-selectable="" class="option">Forms</div><div data-value="/headers" data-selectable="" class="option">Headers</div><div data-value="/navigation" data-selectable="" class="option">Navigation</div><div data-value="/components" data-selectable="" class="option">Components</div><div data-value="/splash" data-selectable="" class="option">Splash Pages</div></div></div>

Although it's gotta be a CSS bug -- since this doesn't happen with the .less that's bundled with the library.

I'll also note, the "multiple" input jumps by 1-2px when adding/removing the last item, too: http://take.ms/SY6au