How to get a fixed toolbar in header or content or footer area

ionic-v1
1

Hi there!

We are building a simple app containing a header, a subheader and a footer. We’ve added an ion-content area which only contains a WYSIWYG editor (Redactor). This editor has an toolbar to format text etc.

A) First I tried to fix the position of the toolbar on top of the content area. But while scrolling the toolbar moves too.

B) So I tried to place the toolbar (using a div and a redactor option called externalToolbar) outside the content area (between sub-header and ion-content). To display the toolbar at correct location I’ve added this to my css:

 position: absolute !important; and top: 88px;

Now the toolbar stays at correct position. But the toolbar overlaps the content area so the first two rows of my text in my editor aren’t shown.

C) Next I tried to add this toolbar to sub-header or footer. But it seems this is not possible because only images, text and buttons are allowed in footer, etc.

Any help is welcome to show the toolbar at a fixed position to enable a user to format his text.

Many thanks!
Carsten

2

I may be misunderstanding but I’ve put together some code that may help. I don’t know anything about Redactor, but if you can put it in a div this should work: http://codepen.io/anon/pen/ogGmZG

The problem is you need to know and specify the height of the toolbar and then modify the top (css) of the content to reflect this.

3

Hey @brandyshea this works great! Thanks for your effort!!

1 Like
4

You’re welcome. Glad to help. :smile: