EasyUI Forum

General Category => General Discussion => Topic started by: JPi on December 08, 2016, 12:37:21 AM



Title: How to achieve responsive header
Post by: JPi on December 08, 2016, 12:37:21 AM
Hi,

I have a issue during browser window resizing and during screen magnification. The html page compromises header area followed by easyui controls like tabs. The issue during resizing of browser or magnifying the screen is that the easyui controls are acting responsively but not the header. How to overcome the issue ? The tabs are overflowing into the header area.

Thanks,
JPi


Title: Re: How to achieve responsive header
Post by: stworthy on December 08, 2016, 02:22:25 AM
The tabs can only display in one line with nowrap. You can click the 'left' and 'right' navigating buttons to scroll to the special tab. You also can call the extended method 'navmenu' to display a drop-down menu that allows you to select all the tabs.

http://www.jeasyui.com/forum/index.php?topic=6191.0


Title: Re: How to achieve responsive header
Post by: JPi on December 08, 2016, 03:23:49 AM
Hi stworthy,

I do get the right and left arrows to navigate the tab. What I meant is the header area (containing img - logo, logout button and a easyui - search box) gets overshadowed by tab row. Within tabs all get self aligned with respect to screen size. No issue there.

What CSS should I apply so that the header div tag also becomes responsive ?

Thanks,
JPi


Title: Re: How to achieve responsive header
Post by: stworthy on December 08, 2016, 08:59:09 AM
Please show an example to describe your requirements.


Title: Re: How to achieve responsive header
Post by: JPi on December 29, 2016, 04:36:20 AM
Hi stworthy,

Please refer to the attached file and help with issues highlighted in blue and red.

Thanks,
JPi