Simple Ajax Chat Pro (SAC Pro) provides a basic emoji picker, which makes it easy for users to include emojis in their chat messages. When the user toggles open the emoji panel, it pushes down whatever content is beneath it, displacing until the panel is closed. This quick tutorial shows how to change the position of the emoji picker, so that it displays on top of content, instead of pushing things down the page.
Default position
Here is a screenshot showing the default position of the emoji picker.
Default position of emoji picker. Notice how the emoji panel pushes down the submit button and character counter.
By default, this is how the emoji panel is displayed (when enabled). When toggled open (by clicking the smiley icon), it pushes down the submit button and other content. So anything displayed beneath the form will be displaced while the emoji panel is open. This default behavior should work well with most WordPress themes.
Custom position
If the default position doesn’t work or fit with your theme, you can customize it by adding the following CSS to the SAC Pro setting, Appearance ▸ “Custom Style”:
#sacpro .sacpro .sacpro-form .sacpro-emoji-picker { position: absolute; z-index: 999; left: 0; }Save changes and done. This bit of CSS changes the position of the emoji panel from static to absolute, so it will display over (on top of) the submit button and other content (instead of displacing). Here is a screenshot showing the custom (absolute) position of the emoji picker:
Custom position of emoji picker. Notice how the emoji panel covers the submit button and character counter.
Compare the two above screenshots to really notice the difference here. With the first screenshot, the default position of the emoji panel pushes down the submit button. In the second screenshot, the custom position of the emoji panel is displayed over (on top of) the submit button.
Of course, you can style the emoji picker to look and behave however fits best with your theme. It’s not possible to provide pre-styled CSS for every WordPress theme (there are millions of them). So SAC Pro strives to keep CSS styles to a minimum, to let your theme styles shine through. Likewise with the HTML, markup is kept simple to make it easier for users to customize things.