# How to (2): dynamically move elements in Aurelia application

**URL:** <https://discourse.aurelia.io/t/how-to-2-dynamically-move-elements-in-aurelia-application/660>\
**Category:** Uncategorized\
**Created:** [January 18, 2018, 12:43pm UTC](https://discourse.aurelia.io/t/how-to-2-dynamically-move-elements-in-aurelia-application/660 "2018-01-18T12:43:05Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 18, 2018, 12:43pm UTC](https://discourse.aurelia.io/t/how-to-2-dynamically-move-elements-in-aurelia-application/660/1 "2018-01-18T12:43:06Z")

</div>

Github readme at:

> **[aurelia-contrib/aurelia-portal-attribute](https://github.com/aurelia-contrib/aurelia-portal-attribute)**
>
> Same view, same view model, but different DOM position. Portal custom attribute to render your component anywhere. - aurelia-contrib/aurelia-portal-attribute

Playable online demo & explanation:

[http://aurelia-portal.bigopon.surge.sh/](http://aurelia-portal.bigopon.surge.sh/)

---

<div class="post-metadata">

**Author:** ![adriatic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/adriatic/32/96_2.png) [@adriatic](https://discourse.aurelia.io/u/adriatic)\
**Post date:** [January 18, 2018, 4:49pm UTC](https://discourse.aurelia.io/t/how-to-2-dynamically-move-elements-in-aurelia-application/660/2 "2018-01-18T16:49:56Z")

</div>

@bigopon very nice feature, well explained and documented. Would you consider hosting your blogs / tutorials in the Aurelia Users Community Space (AUCS)? I am guessing that you prefer to be your own publisher, but for the sake of all Aurelia users, you may consider syndicating your documents 😄

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 18, 2018, 9:55pm UTC](https://discourse.aurelia.io/t/how-to-2-dynamically-move-elements-in-aurelia-application/660/3 "2018-01-18T21:55:06Z")

</div>

For each tutorial, i can double host it on AUCS and a standalone site. How do I hoost that tutorial on AUCS?

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [January 18, 2018, 10:19pm UTC](https://discourse.aurelia.io/t/how-to-2-dynamically-move-elements-in-aurelia-application/660/4 "2018-01-18T22:19:27Z")

</div>

@bigopon, what a crazy feature! Scratch my itch on numerous occasions.

I immediately sensed this actually can replace a lot of usage of aurelia-dialog.  
As long as it can work with `if.bind` (I hope it does), we can statically bind (two-way) into a “portal dialog” which requires no extra code in js file. So my js code is fully decoupled from the “portal dialog” implementation. This also means I can fully control the appearance (css) of the dialog, just need to make sure to have a full screen overlay div to block unintended event dispatch on underneath DOM.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [January 18, 2018, 10:24pm UTC](https://discourse.aurelia.io/t/how-to-2-dynamically-move-elements-in-aurelia-application/660/5 "2018-01-18T22:24:29Z")

</div>

Too bad, it’s a template controller, means I can not use it with if.bind. I guess use if.bind on a wrapper DOM can still make my idea working. I will experiment it.

---

<div class="post-metadata">

**Author:** ![adriatic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/adriatic/32/96_2.png) [@adriatic](https://discourse.aurelia.io/u/adriatic)\
**Post date:** [January 19, 2018, 12:23am UTC](https://discourse.aurelia.io/t/how-to-2-dynamically-move-elements-in-aurelia-application/660/6 "2018-01-19T00:23:51Z")

</div>

@bigopon, double hosting is the simple form of syndication that I mentioned above - so thank you for willing to enrich our documents collection . As described in my today’s article **[AUCS - getting close to a group start](https://discourse.aurelia.io/t/aucs-getting-close-to-a-group-start/665?u=adriatic)**, any author will be offered to either write a Guide or a Blog (which decision depends on the document’s size and purpose). Once we get these two AUCS web application sections fully functional (we plan to start initial testing next week), I will let you know all of the details of hosting your information.

---

<div class="post-metadata">

**Author:** ![mttmccb](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mttmccb/32/38_2.png) [@mttmccb](https://discourse.aurelia.io/u/mttmccb)\
**Post date:** [January 19, 2018, 12:34pm UTC](https://discourse.aurelia.io/t/how-to-2-dynamically-move-elements-in-aurelia-application/660/7 "2018-01-19T12:34:50Z")

</div>

It would be good if it included how to position your element, after it is placed outside the container so it aligns with your element, I think that’s all I’m missing.

Edit: I got it sort of working but as I have scrollable panels it doesn’t update when the container is scrolled

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 19, 2018, 10:41pm UTC](https://discourse.aurelia.io/t/how-to-2-dynamically-move-elements-in-aurelia-application/660/8 "2018-01-19T22:41:00Z")

</div>

@mttmccb libs like [Tether](http://tether.io/) or [popper](https://popper.js.org/) often will do the job well ( though popper.js suffers from overflown hidden / auto / scroll ), even when you scroll away. the `portal` attribute can pack some more into it to support positioning out of the box, but there are cases: overflowing document body, shrinking / flipping to fit available space, scrolling away, which could make it too bloated. I feel like it should only make it easy for libs like above to do their job. If you can come up with some solution, we can put it in the box to support such scenarios.

@huochunpeng I’m using it with if without issue but please help file issues if you find one

---

<div class="post-metadata">

**Author:** ![mttmccb](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mttmccb/32/38_2.png) [@mttmccb](https://discourse.aurelia.io/u/mttmccb)\
**Post date:** [January 20, 2018, 8:33am UTC](https://discourse.aurelia.io/t/how-to-2-dynamically-move-elements-in-aurelia-application/660/9 "2018-01-20T08:33:39Z")

</div>

Thanks I wasn’t aware of Tether, I’ll give it a go. I tried popper but ran into problems, I don’t remember exactly what.

I think like you say it’s not worth including in the library but might be worth highlighting those options in the guide.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 21, 2018, 4:36am UTC](https://discourse.aurelia.io/t/how-to-2-dynamically-move-elements-in-aurelia-application/660/10 "2018-01-21T04:36:50Z")

</div>

> [@huochunpeng](#):
>
> I immediately sensed this actually can replace a lot of usage of aurelia-dialog.

@huochunpeng aurelia dialog will also help you have better flow / simpler view for elements. So unless the inline dialog is extremely simple, I wouldn’t want to do so 😄 . It’s still nice to see what you will come up with regardless.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [January 21, 2018, 8:20am UTC](https://discourse.aurelia.io/t/how-to-2-dynamically-move-elements-in-aurelia-application/660/11 "2018-01-21T08:20:39Z")

</div>

I agree, @bigopon. I have used dialogs as promise in workflow at many places, they have reason to stay.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 21, 2018, 11:55am UTC](https://discourse.aurelia.io/t/how-to-2-dynamically-move-elements-in-aurelia-application/660/12 "2018-01-21T11:55:12Z")

</div>

@mttmccb thanks for the suggestion. Tether and Popper are now in the guide

---

<div class="post-metadata">

**Author:** ![adriatic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/adriatic/32/96_2.png) [@adriatic](https://discourse.aurelia.io/u/adriatic)\
**Post date:** [February 19, 2018, 8:58pm UTC](https://discourse.aurelia.io/t/how-to-2-dynamically-move-elements-in-aurelia-application/660/13 "2018-02-19T20:58:53Z")

</div>

I am genuinely at a loss trying to explain how did I miss your question

> How do I host that tutorial on AUCS?

So, with apology to made you wait, the answer ought to be simple: if your tutorial fits into our **[current 4 projects](https://aurelia-community.gitbooks.io/aucs-project-guide/content/initial-project-structure/projects.html)** please use this **[workflow](https://aurelia-community.gitbooks.io/aucs-project-guide/content/initial-project-structure/development-environment/development-workflow.html)** description. Otherwise, consider to publish your tutorial as a blog and in that case, you can create a PR to **[this repo](https://github.com/aurelia-community/blogs)**.

Note that all authors are credited with their name and any other info you want to be published.

---

<div class="post-metadata">

**Author:** ![brian](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/brian/32/490_2.png) [@brian](https://discourse.aurelia.io/u/brian)\
**Post date:** [May 13, 2020, 4:23pm UTC](https://discourse.aurelia.io/t/how-to-2-dynamically-move-elements-in-aurelia-application/660/14 "2020-05-13T16:23:24Z")

</div>

@bigopon I just wanted to post here to extend a thanks for this plugin. Helped me solve an issue that I was not looking forward to.