caplin / FlexLayout

Docking Layout Manager for React
MIT License
919 stars 173 forks source link

overflowbutton #399

Open asdfasdfasd-ss opened 1 year ago

asdfasdfasd-ss commented 1 year ago

Describe the bug

I was hoping to modify the position of the overflowbutton, and now the position of the overflowbutton is fixed after the custom button, which is not actually visual

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

empty

Expected behavior

I would like to modify the location of the overflowbutton

Operating System

windows

Browser Type?

chrome

Browser Version

106

Screenshots or Videos

empty

Additional context

No response

Reda011 commented 1 year ago

I also encountered the same problem, Is there any method to place overflowbutton before customization?

angadvirk commented 1 year ago

I believe I am facing the same issue.

In my code, I have added some custom buttons to the tabSet header (by pushing them onto renderValues.buttons within my onRenderTabSet function) , but now the overflow button shows up after those custom buttons, instead of right after the tabs, and this is not intuitive.

I have been unable to find a way to modify the positioning of the overflow button so far; it seems to always show up after the custom buttons I have pushed on to the renderValues.buttons array. Would appreciate it if there was a way to modify the overflow button's position in the order of the tabSet toolbar buttons.

angadvirk commented 1 year ago

Actually, looking around, I found a solution to the problem, using css. Look at the first answer at the following link, that recommends using css flexbox's order property: https://stackoverflow.com/questions/220273/how-can-i-reorder-my-divs-using-only-css

To apply this solution to flex layout, I noticed that all of the tabSet header buttons are contained with a div that has the class flexlayout__tab_toolbar, so I added display: flex; to that class, and then targeted the selectors for the individual buttons within that div and gave them the order values that I wanted, and it worked.

asdfasdfasd-ss commented 1 year ago

Actually, looking around, I found a solution to the problem, using css. Look at the first answer at the following link, that recommends using css flexbox's order property: https://stackoverflow.com/questions/220273/how-can-i-reorder-my-divs-using-only-css

To apply this solution to flex layout, I noticed that all of the tabSet header buttons are contained with a div that has the class flexlayout__tab_toolbar, so I added display: flex; to that class, and then targeted the selectors for the individual buttons within that div and gave them the order values that I wanted, and it worked.

Thanks, I'll give it a try

nealus commented 12 months ago

v0.7.10 moves the overflow button to before the custom buttons (but after sticky buttons)