normally when click on select element, option have selected highlighted default , scroll other options highlight follows pointer. reason of selects broken, when scroll other options highlight jumps original selected option , small bit of highlight visible underneath element on on outside margins. when click on option things work , gets selected though highlight visually being shown somewhere else, can't figure out whats causing act way.
image of problem:
in example "people" selected option, , have pointer on "clubs", can see hard tell selecting. happening in both chrome , firefox , in ie selects won't let me pick different option @ all, dropdown opens closes again (selecting picked).
i have been browsing hours trying find fix , have found question describes same issue in chrome specifically. very weird chrome behavior in open (focused) "select" element
unfortunately did not me because not using javascript on select elements @ (i removed part of trying figure out problem is). removed selected="true" default selections , ::selection styling on off chance somehow related problem.
here 1 of broken selects (bulk of css below explanation above):
select { font-family: 'cabinsemibold'; font-size: 14px; border-radius:3px; border: 1px solid #000; color:#000000; } #reviewsort { width: 110px; height:30px; } <div class="sitecontentwrapper" > <div class="sitecontentrow"> ... <div class="sitecontentcell"> <div class="nowrap inlineblock"> ....(omitted "sort by: " label)... <select name="reviewsort" id="reviewsort" class="inlineblock"> <option value="date">date</option> <option value="helpful">most helpful</option> </select> </div> </div> .... </div> </div> where things wrapped , centered using auto margin , content designed shift screen size changes because it's being treated if inside giant table. .inlineblock , .nowrap used when areas should not wrap or must stay when wrapping , rest of content in "cell" wraps needed extending "row" height. new responsive design , sure there better ways handle responsive content shifting, that's not point of question. including in case causing problem somehow have tried else can think of , cant figure out how selects being broken.
.sitecontentwrapper { max-width:1400px; margin-left: auto; margin-right: auto; padding: 0px 50px; position:relative; display:table; border:0px; height:100%; width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .sitecontentrow { display:table-row; } .sitecontentcell { display:table-cell; vertical-align: top; } .nowrap { white-space: nowrap; } .inlineblock { display:inline-block; vertical-align:top; position: relative; } can come reason why of causing selects not work properly? or point me in direction of way fix behavior?
edit: apparently fiddle example question linked working in chrome people (not me) have removed visual reference explaining happening in code , attached image instead. hoping helps strange issue
edit 2: found problem , have added answer below can close question. instead of leaving answer here.
found problem apparently being caused because there stray display:table tag @ global wrapper put in make absolute positioning work content positioned relatively , z indexes used make menus , overlay content below them properly. apparently doing absolute table display, , displaying table again on relative level (with z-indexes) causing selects break. tells me need go , change way few things done pretty sure shouldn't need have wrapper in first place when take out breaks jquery ratings causing star images inserted on place instead of in row. specialty backend , database work sort of figuring things out go based on lot of reading , browsing of stackoverflow not used doing css work , trying speed on recent / best practices (like responsive).
hopefully helps keep else repeating same blunders. commented helped in narrowing down issue was.
.sitewrapper { width:100%; height:100%; margin:0px; padding:0px; position:absolute; top:0px; left:0px; border:0px; <display:table> <- stray tag needed removed } 
Comments
Post a Comment