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
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.
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.
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>
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;
}
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;
}