Commit b175f3ed authored by dmacfarlane's avatar dmacfarlane
Browse files

fix: menu postion when element is in a table

parent 215a8bfc

README.md

+8 −7
Original line number Diff line number Diff line
@@ -4,7 +4,7 @@ Simple Angular 2 mentions inspired by [Ment.io](https://github.com/jeff-collins/ 


[Click here for a Demo](http://dmacfarlane.github.io/angular2-mentions/)



Provides auto-complete for mentions in text input fields, text areas,

Provides auto-complete suggestions for @mentions in text input fields, text areas,

and content editable fields. Not fully browser tested and comes without warranty!



To install and start the demo application:
@@ -16,17 +16,18 @@ To install and start the demo application: 


### Usage



Install the package as a dependency using:

Add the package as a dependency to your project using:



    npm install --save angular2-mentions



Add the CSS to your index.html:



    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">



Add the module to your module imports:

Add the module to your app.module imports:



    import { MentionModule } from 'angular2-mentions/mention/mention.module';

    import { MentionModule } from 'angular2-mentions/mention';

    ...



    @NgModule({

        imports: [ MentionModule ],
@@ -35,11 +36,11 @@ Add the module to your module imports: 


Add the `[mention]` directive to your input element:



    <input [mention]="items" class="form-control" type="text">

    <input type="text" [mention]="items">



Where `items` is a string array of the items to suggest. For example:



    var items:string [] = = ["Noah","Liam","Mason","Jacob",...

    items: string[] = ["Noah", "Liam", "Mason", "Jacob", ...



#### Options

src/index.html

+2 −2
Original line number Diff line number Diff line
@@ -7,8 +7,8 @@ 
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <!-- Dependancies -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>

  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>

</head>

<body>

  <app-root>Loading...</app-root>

src/mention/mention-utils.ts

+5 −3
Original line number Diff line number Diff line
@@ -75,11 +75,13 @@ export function getCaretPosition(el: HTMLInputElement, iframe: HTMLIFrameElement 
  }

  else {

    var selObj = getWindowSelection(iframe); //window.getSelection();

    if (selObj.rangeCount>0) {

      var selRange = selObj.getRangeAt(0);

      var position = selRange.startOffset;

      return position;

    }

  }

}



// Based on ment.io functions...

//