jquery - Twitter Typeahead and bootstrap-tagsinput styling not correct in IE and Chrome -


summary

i have been working on message system website consists of twitter typeahead plugin , bootstrap-tagsinput plugin. having styling problems css when load page in internet explorer , google chrome whereas works fine in firefox (probably because used development , initial style editing). wondering how fix not experienced in css why iv'e tried make question easy on eyes possible.

read below issues.

working in firefox (developed in)

below images of input box working correctly in firefox: enter image description here

enter image description here

internet explorer styling problems (edit: fixed!)

  1. input box not aligned glyphicon until add tag. enter image description here
  2. input text not alligned tags left. enter image description here
  3. placeholder font colour , style not correspond rest of form. enter image description here

google chrome styling problem (edit: fixed)

typeahead dropdown not aligned properly. (only occurs on first tag otherwise works fine). enter image description here

code

my html:

<span id="remote" class="input-group" style="padding-bottom:10px;">   <span class="input-group-addon"><span class="glyphicon glyphicon-user" style="font-size: 15px;"></span></span>   <input type="text" autocomplete="off" name="msguser" id="msguser" class="form-control tagsinput" placeholder="users seperated ,"/> </span>

typeahead css:

.accordion {     margin-bottom:-3px; }  .accordion-group {      border: none; }  .twitter-typeahead .tt-query, .twitter-typeahead .tt-hint {   margin-bottom: 0; }  .twitter-typeahead .tt-hint {     display: none; }  .tt-dropdown-menu {   position: absolute;   top: 100%;   left: 0;   z-index: 1000;   display: none;   float: left;   min-width: 160px;   padding: 5px 0;   margin: 2px 0 0;   list-style: none;   font-size: 14px;   background-color: #ffffff;   border: 1px solid #cccccc;   border: 1px solid rgba(0, 0, 0, 0.15);   border-radius: 4px;   -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);   background-clip: padding-box; } .tt-suggestion > p {   display: block;   padding: 3px 5px;   clear: both;   font-weight: normal;   line-height: 1.428571429;   color: #333333;   white-space: nowrap; } .tt-suggestion > p:hover, .tt-suggestion > p:focus, .tt-suggestion.tt-cursor p {   color: #ffffff;   text-decoration: none;   outline: 0;   background-color: #428bca; }

bootstrap tagsinput css:

.bootstrap-tagsinput { width: 100%; }  .label-info {   background-color: #ededed !important; } .label-info[href]:hover, .label-info[href]:focus {   background-color: #ededed !important; }  .bootstrap-tagsinput {   background-color: #fff;   border: 1px solid #ccc;   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);   display: inline-block;   padding: 4px 6px;   margin-bottom: 0px;   color: #555;   vertical-align: middle;   max-width: 100%;   line-height: 22px;   cursor: text; } .bootstrap-tagsinput input {   border: none;   box-shadow: none;   outline: none;   background-color: transparent;   padding: 0;   margin: 0;   width: auto !important;   max-width: inherit; } .bootstrap-tagsinput input:focus {   border: none;   box-shadow: none; } .bootstrap-tagsinput .tag {   border: 1px solid #d9d9d9;   margin-right: 2px;   color: #555555; } .bootstrap-tagsinput .tag:hover {   border-color: #b9b9b9; } .bootstrap-tagsinput .tag [data-role="remove"] {   border: none;   margin-left: 8px;   cursor: pointer; } .bootstrap-tagsinput .tag [data-role="remove"]:after {   content: "x";   padding: 0px 2px; } .bootstrap-tagsinput .tag [data-role="remove"]:hover {   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.15); } .bootstrap-tagsinput .tag [data-role="remove"]:hover:active {   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15); }

my fault no 1 else resolve question, shouldv'e included javascript files too, fixed editing these lines in twitter typahead js file:

var css = function() {     "use strict";     var css = {         wrapper: {             // hack: make dropdown display in chrome             //position: "relative",             //display: "inline-block"             position: "relative",             verticalalign: "top"

the wrapper wasn't sitting right in first input , seemed fix it.


Comments

Post a Comment

Popular posts from this blog

java - Spring Data JPA: Why findOne(id) executing delete query internally? -

i have 1 application using @manytomany annotation link 2 different entities 1 parent entity. not sure if have implemented properly. when execute .findone() on parent entity's repository find it, @ first fetch data along executing delete queries internally delete record mapping table (a table jpa creates after adding @manytomany annotation.). following generated sql queries , code snippet: java class @entity @table(name = "inventory") public class inventory { @id long id; // many other properties @manytomany(fetch=fetchtype.lazy) private list<stream> streams; @manytomany(fetch=fetchtype.lazy) private list<subject> subjects; } there no other annotation i've put in stream , subject entity class link inventory class. when run app, create following tables: inventory stream subject inventory_stream inventory_subject (inventory_stream , inventory_subject, 2 tables created automatically, don't k...
Read more

python - Mongodb How to add addtional information when aggregating? -

i beginner , wrote line pipeline works, wanna add other information output, screen name , or number of tweets.i tried add under $group gave me syntax error everytime here pipeline: def make_pipeline(): # complete aggregation pipeline pipeline = [ { '$match': { "user.statuses_count": {"$gt":99 }, "user.time_zone": "brasilia" } }, { "$group": { "_id": "$user.id", "followers": { "$max": "$user.followers_count" } } }, { "$sort": { "followers": -1 } }, { "$limit" : 1 } ]; i using on example : { "_id" : objectid("5304e2e3cc9e684aa98bef97"), "text" : "first week of school on :p", "in_reply_to_status_id" : null, "retweet_count" : null, ...
Read more

java - Incorrect order of records in M-M relationship in hibernate -

Image
i have 4 records in bridge table in mysql database. using @manytomany in hibernate, accurate order of employees incorrect incorrect of projects. following required material figure out doing mistake. this source. @entity @table(name="project") public class projectbean { @id @generatedvalue @column(name="project_id") private int projectid; @column(name="title") private string projecttitle; @manytomany(mappedby="projects") private collection<employeebean> employees; public projectbean() { employees = new arraylist<employeebean>(); } //getters & setters } @entity @table(name="employee") public class employeebean { @id @generatedvalue @column(name="employee_id") private int employee_id; @column(name="first_name") private string ...
Read more