AutoCompleteExtender Hiding in IE but working in Edge - css

We are using AutoCompleteExtender in our project and when checking in IE we don't see the full list but just first element. However, same site works just fine in Edge/Chrome. I did poking around and found that the list/dropdown is there but its somehow hiding behind and just one item hight of data is visible. here is how it looks.
IE:
Edge/Chrome:
IE when using element highligher :
Server side code
<ajaxTK:AutoCompleteExtender ID="AutoCompleteExtenderGoToOrder"
TargetControlID="txtGlobalOrderKeywords"
runat="server"
MinimumPrefixLength="3"
CompletionInterval="500"
CompletionSetCount="20"
ServicePath="~/services/dataAjax.asmx"
ServiceMethod="GetGoToOrderList"
UseContextKey="true"
OnClientItemSelected="extenderOrderSelected"
CompletionListCssClass="autocompletegotoorder_completionListElement"
CompletionListItemCssClass="autocompletegotoorder_listItem"
CompletionListHighlightedItemCssClass="autocompletegotoorder_highlightedListItem"
/>
HTML
<DIV id=Header1_divGotoOrder class=gotoOrder>
<SPAN id=Header1_lblGlobalGoToOrder class=topicHeader style="COLOR: white">Order:</SPAN>
<INPUT id=Header1_hdnGlobalOrderID type=hidden name=Header1$hdnGlobalOrderID>
<INPUT id=Header1_txtGlobalOrderKeywords style="WIDTH: 50%" value=metr name=Header1$txtGlobalOrderKeywords autocomplete="off">
<UL id=Header1_AutoCompleteExtenderGoToOrder_completionListElem class=autocompletegotoorder_completionListElement style="WIDTH: 463px; POSITION: absolute; LEFT: 1405px; Z-INDEX: 1000; DISPLAY: none; TOP: 30px; VISIBILITY: hidden"></UL>
</DIV>
CSS
.autocompletegotoorder_completionListElement
{
padding-bottom: 0px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
position: absolute;
z-index: 9999 !important;
visibility: hidden;
margin-left: -1px !important;
margin-top: 0px !important;
background-color: #F1F0F0;
color: windowtext;
border: buttonshadow;
border-color: Black;
border-width: 1px;
border-style: solid;
cursor: 'default';
overflow: auto;
height: 200px;
text-align: left;
list-style-type: none;
}
/* AutoComplete highlighted item */
.autocompletegotoorder_highlightedListItem
{
list-style-type: none;
font-family: Tahoma;
font-size: 11px;
color: White;
text-decoration: none;
background-color: Navy;
cursor: pointer;
cursor: hand;
padding: 0px 0px 0px 3px;
margin: 0px;
text-align: left;
line-height: 20px !important;
}
/* AutoComplete item */
.autocompletegotoorder_listItem
{
line-height: 20px !important;
background-color: #F1F0F0;
padding: 0px 0px 0px 3px;
margin: 0px;
font-family: Tahoma;
font-size: 11px;
color: black;
cursor: default;
text-decoration: none;
text-align: left;
}

Related

How to make chevron down clickable

I want to bring the dropdown chevron behind my dropdown so that when I click anywhere on my dropdown, I can see the menu. Right now the chevron-down area is unclickable.
I have looked into other options of using font awesome but have not been able to do so.
<div id="actions-dropdown" class="actions">
<select class="select-option" required [(ngModel)]='optionSelected' (ngModelChange)='onOptionsSelected($event)'>
<option class='option' *ngFor='let option of options' [value]="option">{{option}}</option>
</select>
<i id="arrow" class="fa fa-chevron-down"></i>
</div>
CSS
.select-option {
background: transparent;
background-size: auto auto;
-moz-appearance: none;
padding-top: 0px;
background-size: 20px;
color: #ffffff;
font-size: 30px;
width: 100px;
height: 40px;
border: 1px white solid;
margin: 11px 0px 0px 1071px;
z-index: 5;
}
.fa-chevron-down {
color: red;
z-index: -5;
margin: 0px 0px 0px -5px;
}
Method 2 using Font Awesome
.select-option {
border: 1px solid #ccc;
overflow: hidden;
height: 40px;
width: 240px;
position: relative;
display: block;
background:black;
}
select{
height: 40px;
padding: 5px;
border: 0;
font-size: 16px;
width: 240px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select-option:after {
content:"\f078";
font-family: FontAwesome;
background: : black;
padding: 12px 8px;
position: absolute; right: 0; top: 0;
background: blue;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
box-sizing: border-box;
}
change your markup like this. use label instead of i. set pointer-events: none to .fa-chevron-down
<div id="actions-dropdown" class="actions">
<select id="select-el" class="select-option" required [(ngModel)]='optionSelected' (ngModelChange)='onOptionsSelected($event)'>
<option class='option' *ngFor='let option of options' [value]="option">{{option}}</option>
</select>
<label id="arrow" for="select-el" class="fa fa-chevron-down"></label>
</div>
.select-option {
background: transparent;
background-size: auto auto;
-moz-appearance: none;
padding-top: 0px;
background-size: 20px;
color: #ffffff;
font-size: 30px;
width: 100px;
height: 40px;
border: 1px red solid;
margin: 11px 0px 0px 0;
z-index: 5;
}
.actions {
position: relative;
display: inline-block;
}
.fa-chevron-down {
color: red;
z-index: 7;
margin: 0px 0px 0px -5px;
position: absolute;
top:20px;
right:0;
pointer-events:none;
}
.select-option {
border: 1px solid #ccc;
overflow: hidden;
height: 40px;
width: 240px;
position: relative;
display: block;
background:black;
}
select{
height: 40px;
padding: 5px;
border: 0;
font-size: 16px;
width: 240px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select-option:after {
content:"\f078";
font-family: FontAwesome;
background: : black;
padding: 12px 8px;
position: absolute; right: 0; top: 0;
background: blue;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
box-sizing: border-box;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div id="actions-dropdown" class="actions">
<select id="select-el" class="select-option" required>
<option class='option'>option</option>
<option class='option'>option</option>
<option class='option'>option</option>
<option class='option'>option</option>
</select>
<label for="select-el" class="fa fa-chevron-down"></label>
</div>
Case 1) z-index: -5; might be your problem.
.fa-chevron-down {
color: red;
z-index: -5;
margin: 0px 0px 0px -5px;
}
Case 2) .select-option:after not sure if this works because form elements don't have pseudo elements like :before and :after. You might need a different element, like a span to wrap the <select> element and apply :after to span.

Responsive CSS: Prevent a search bar and button from getting bigger when zoomed in?

I have created a responsive website about a year ago and took a Big Commerce theme and altered it to be my own. I have put a button next to a search bar in the header. To test responsiveness I zoom in and out to see what happens. When I do, the search bar and button seem to move around quite a bit and get bigger. I would like it to stay put like the header, bag button and phone number. Here is my code...
/* CSS */
#SearchForm2 {
position: absolute;
right: 0;
top: 3%;
z-index: 52;
width: 25%;
height: auto;
display: block;
}
#SearchForm2 form {
padding: 0;
margin: 0;
display: block;
}
#SearchForm2 label {
display: none;
}
#SearchForm2 input {
display: block;
height: auto;
width: auto;
font-weight: 400;
text-transform: uppercase;
padding: 2px 3px 2px 3px;
}
#SearchForm2 p {
display: none;
margin: 5px 0 0 0;
}
#SearchForm2 input.Textbox {
float: right;
font-size: 100%;
width: 59%;
height: auto;
display: block;
padding: .5em 1em;
text-transform: none;
line-height: 17px;
background-color: transparent;
border: 1px solid #000;
vertical-align: middle;
}
.searchbtn2 {
float: right;
width: 39%;
height: auto;
font-size: 100%;
display: block;
margin: 0px 3px 0 0;
cursor: pointer;
font-weight: 500;
text-transform:uppercase;
font-family: "Cabin", Arial, Sans-serif;
*display: inline;
*zoom:1;
text-align: center;
vertical-align: middle;
border: none;
padding: 5px 10px 4px 10px;
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
background-color: #454545;
color: #fff;
border: 2px solid #454545;
}
.searchbtn2:hover {
background-color: #ffffff;
color: #000;
}
<!-- Header Search -->
<div id="SearchForm2">
<form action="%%GLOBAL_ShopPath%%/search.php" method="get" onsubmit="return check_small_search_form(this)">
<label for="search_query">%%LNG_Search%%</label>
<input type="text" name="search_query" id="search_query" class="Textbox autobox" value="%%LNG_Search%%" />
<button type="submit" class="searchbtn2" name="Search" title="Search">Search</button>
</form>
</div>
Here is a link to see it in action: https://www.luxuryeyesite.com/test3/
You are using a percentage for your font size. As inputs are zoomed into the percentages will also increase. If you don't want this to occur you'll need to stop using a percentage on #SearchForm2 input.Textbox and .searchbtn2
Also, this isn't the way I would recommend testing responsiveness. If you are using Chrome open the developer tools and select the 'toggle device toolbar' button to get a more accurate representation.

css vertical-align not working

Please help to vertically align the tittle.
It seems not working properly.
<html>
<body>
<head>
<style type="text/css">
html *
{
margin: 0px;
padding: 0px;}
.Title
{
width: 50%;
display:inline-block;
vertical-align:middle;
text-align: center;
font-weight: bold;
font-size: larger;
border: solid;
border-width: thin;
}
.btn{
color:white;
background-color:#8CC152;
margin: 0px !important;
width: auto;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
}
.btn:hover{
background-color:#A0D468;
}
.btn-next{
border-radius: 4px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
float:right;
}
.btn-prev{
border-radius: 4px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
float:left;
}
</style>
</head>
<div class='Title'>
<p>
This is a title
<a href='?m=1'><span class='btn btn-prev'>LEFT</span></a>
<a href='?m=2'><span class='btn btn-next'>RIGHT</span></a>
</p>
</div>
</body>
</html>
Set a line-height for the paragraph
p {
line-height: 32px;
vertical-align: middle;
}
p {
line-height: 32px;
vertical-align: middle;
}
<head>
<style type="text/css">
html * {
margin: 0px;
padding: 0px;
}
.Title {
width: 50%;
display: inline-block;
vertical-align: middle;
text-align: center;
font-weight: bold;
font-size: larger;
border: solid;
border-width: thin;
}
.btn {
color: white;
background-color: #8CC152;
margin: 0px !important;
width: auto;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
}
.btn:hover {
background-color: #A0D468;
}
.btn-next {
border-radius: 4px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
float: right;
}
.btn-prev {
border-radius: 4px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
float: left;
}
</style>
</head>
<div class='Title'>
<p>
This is a title
<a href='?m=1'><span class='btn btn-prev'>LEFT</span></a>
<a href='?m=2'><span class='btn btn-next'>RIGHT</span></a>
</p>
</div>
</body>
</html>

CSS Relative Positioning+Browser Compatibility

I'm trying to position a searchbox and submit button so that they are line up. I've used a CSS reset to have all browsers starting from the same level. For whatever reason, I can't get them to line up on the IE, Chrome and Firefox. I can get it working on 1/3 but not 3/3. With the current code, the search button is aligned in FF, 1px lower in IE, and 3-5px lower in Chrome. Any help is much appreciate as I am at my wits end.
Here's the code.
HTML snippet:
<span class="search">
<form id="searchbox" action="/search" method="get">
<input name="query" id="search" type="text" placeholder="I'm looking for..."/>
<input id="submit" class="mglass" type="submit" value=""/>
</form>
</span>
CSS snippet:
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
#search{
position: relative;
bottom: 1px;
height: 27px;
width: 200px;
font-size: 14px;
font-family: 'calibri', Tahoma, Geneva, sans-serif;
border: none;
background-color: #eee;
border-width: 1px;
border-style: solid;
border-color: #cccccc;
padding-left: 10px;
}
#searchbox{
position: relative;
right: 27px;
top: 5px;
float: right;
}
input[type="submit"]::-moz-focus-inner {
border: 0;
padding: 0;
}
input[type="text"]::-moz-focus-inner {
border: 0;
padding: 0;
}
.mglass{
background: url(../images/search_glass01.png) no-repeat center;
height: 29px;
width: 33px;
border-width: 1px;
border-style: solid;
border-color: #cccccc;
position: relative;
right: 7px;
bottom: 0px;
}
.mglass:hover{
background: url(../images/search_glass02.png) no-repeat center;
}
I had to hack up your CSS a bit and simplified some of the selectors to get my head around it, but, give this a try:
http://jsfiddle.net/R56mu/
body {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
#searchbox{
float: right;
overflow:hidden;
}
#search{
width: 200px;
height:32px;
float:left;
padding: 0 0 0 10px;
background-color: #eee;
font-size: 14px;
font-family: 'calibri', Tahoma, Geneva, sans-serif;
border: none;
border-width: 1px;
border-style: solid;
border-color: #cccccc;
}
#submit{
width: 33px;
height:34px;
float:left;
background: url(../images/search_glass01.png) no-repeat center;
border-width: 1px;
border-style: solid;
border-color: #cccccc;
}
#submit:hover{
background: url(../images/search_glass02.png) no-repeat center;
}
input[type="submit"]::-moz-focus-inner {
border: 0;
padding: 0;
}
input[type="text"]::-moz-focus-inner {
border: 0;
padding: 0;
}

have div hover on top of input boxes using css

I ave a div that popups up over my input boxes (javascrip auto complete). The div currently pops up behind the input boxes, how can I have this appear ontop?
screenshot of issue:
CSS Code is:
body {
font-family: Helvetica;
font-size: 11px;
color: #000;
}
h3 {
margin: 0px;
padding: 0px;
}
.suggestionsBox {
position: absolute;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #659CD8;
}
HTML Code is:
<div>
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
Thanks as always for the help,
Try using z-index property on .suggestionsBox
.suggestionsBox {
position: absolute;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
z-index: 999; <------ Here
}
Set the z-index property.
.suggestionsBox {
position: absolute;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
z-index: 100;
}

Resources