Log in to AnswerLog in to Follow
Martin Rees
11Views
2Comments
Solved
Navigation\Tabs add icon at Tab level
Question
Traditional Web
Application Type
Traditional Web
Platform Version
11.0.1000.1

Good afternoon all,

After receiving feedback on our app, the users have requested whether the close "X" button can be moved on a modal window.  Where they would like it is actually in the Navigation\Tabs control, on a level with the tabs:

The layout of the tabs needs to remain as it is, so we can't float the icon to the right of the tabs object as any text in the tab content wouldn't be "under" the close button.

Any thoughts in how we could achieve this?  I'm hoping that I don't need to clone the Tabs control?

Thanks in advance

Martin

0
0
on 23th Feb
João Marques
mvp_badge
MVP
Solution

Hi Martin,


There are some ways to achieve this with CSS.

One of which is making the button position absolute and control its position without needing to be "outside" of the tab.

You can see for instance this example, and adjust the right and top properties to fit your purpose:


I would have a container enclosing the tabs widget and the button. The container would be the element with position relative in the example and your button would be the one absolute.


Hope it helps.


Kind Regards,
João

0
0
on 23th Feb

Hi João,

This is perfect!  I was practically all the way there apart from the absolute positioning on the button.

Thanks
 

0
0
on 24th Feb
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.