I have a page with multiple groups of text fields in various (in-page) tabs which the user has to fill out. One of those groups is a list of chemical reactions. The species inside those reactions need to be used in the other tabs to fill out those text fields, though those fields are not limited to a single species:
I need some way of facilitating the input of species into the other tabs. Currently, I have something like the following:
Unfortunately, I don't really have a good place to put the box of species (the upper left has a number of buttons in it, which also need to be accessible all the time. I could allow for the box to be dragged around, but I'm not sure how to make that obvious to users. I've considered a number of different options for input: using an autocomplete list or some kind of popover that appears when the text box is selected. However, it is useful for the user to see a list of the species even when a text box isn't selected.
I'm really not sure of the best method to take here.
Note: I'm currently using the bootstrap framework, so a native (or natively styled) option might be preferred.