View Issue Details

IDProjectCategoryView StatusLast Update
0021280mantisbtuipublic2016-10-02 18:41
ReporterbaierAssigned Todregad 
PrioritynormalSeveritytweakReproducibilityalways
Status closedResolutionfixed 
Product Version1.3.0 
Target Version1.3.2Fixed in Version1.3.2 
Summary0021280: Text boxes overlap on screens with high resolution
Description

"My Account" - text boxes overlap if window is maximized - all Browsers

This also occurs when selecting Manage > Manage Tags or Manage Global Profiles.

Additional Information

debian 8.5, Apache 2.4.10, PHP 5.6.22
see screenshots!

TagsNo tags attached.

Relationships

has duplicate 0021313 closedatrol report issue: on large screens the blue section on the left overflows the text fields on the right 

Activities

baier

baier

2016-07-13 02:04

reporter  

mbt130_screen.png (42,933 bytes)
mbt130_screen.png (42,933 bytes)
cproensa

cproensa

2016-07-13 03:50

developer   ~0053583

Please, post exact versions for OS and browsers.

In my case, i cannot reproduce with 1.3.0 in Linux, latest firefox and chrome browsers

baier

baier

2016-07-13 04:19

reporter   ~0053586

Hi,
Client OS: Windows 7 and Windows 10. Browser: Firefox ESR 45.2.0, Google Chrome Version 53.0.2785.8 dev-m (64-bit)

atrol

atrol

2016-07-13 12:15

developer   ~0053591

baier, did you use an older version of Mantis before?
If so, does cleaning the browser cache fix the issue?

baier

baier

2016-07-13 12:29

reporter   ~0053593

I used version 1.2.19 before, but on a different server. I made a clean install of 1.3.0 on a new ESXi VM on debian 8.5. Then I copied the existing mysql database to the new server. Cleaning the browser cache doesn't help, I have the problem on different PCs and with different browsers (no matter which one I choose).

baier

baier

2016-07-13 12:36

reporter   ~0053594

By the way, atrol , the problem I described even exists in THIS/YOUR installation of mantisbt.org!



mbt130org.png (134,499 bytes)
mbt130org.png (134,499 bytes)
atrol

atrol

2016-07-13 15:47

developer   ~0053595

I am not able to reproduce.
At the moment I have limited access to my test environments.
I tried FF 47.0.1 and IE11 with latest updates on Windows 7 Professional 64 Bit.

What do you get when using IE11?

baier

baier

2016-07-13 17:04

reporter   ~0053597

I get the same error in IE11.420.10586.0. There are even more ui and styling errors in IE, for example there are no grey lines next to the violet ones at all. I didn't even care to report these bugs because IE will soon be discontinued, anyway. But the error that I submitted is obviously present in all browsers I commonly use in Windows. With "all" I mean: IE11.420.10586.0/Win10x64, Chrome Version 51.0.2704.106 m (64-bit)/Win10x64, Edge25.10586.0.0/Win10x64, Firefox ESR 45.2.0/Win7x64, Google Chrome Version 53.0.2785.8 dev-m (64-bit)/Win7x64 - these I have tested so far.

baier

baier

2016-07-13 17:08

reporter   ~0053598

Add Firefox 47.0.1/Win10x64 to the list above.

atrol

atrol

2016-07-14 01:17

developer   ~0053601

Are you working on a system with high screen resolution,e.g. more than 1920 pixel horizontal?

baier

baier

2016-07-14 03:32

reporter   ~0053604

Yes, I do. On my Win10 PC I use a UHD/4k screen and on my Win7 machine a WQHD screen.

cproensa

cproensa

2016-07-16 14:31

developer   ~0053616

This seems to casue the issue, in default.css:

/* 30% label width - these are the defaults */
div.form-container .label-style {
       width: 31%;
 }

commit da7be28cff45f6534bb1aec8ec39a704a90a63c8 does not explain why 31% was used insted of 30%

mfernau

mfernau

2016-09-04 10:57

reporter   ~0053935

I can confirm the same behavior on my linux box with all browsers.
My resolution is 2560x1080

dregad

dregad

2016-09-05 03:51

developer   ~0053940

commit da7be28cff45f6534bb1aec8ec39a704a90a63c8 does not explain why 31% was
used insted of 30%

My guess would be that it was an attempt to have the 'label-style' span (which sets the background color) cover the whole width of the 'display-label' span (with the text), taking its padding into consideration.

I fiddled a bit with Firebug, and this appears to fix the issue;


.label-style {
width: 30%;
padding: 0 .5em;
}

See attached label-style_overlap_fiddle.png for illustration.

dregad

dregad

2016-09-05 03:52

developer  

mfernau

mfernau

2016-09-05 04:24

reporter   ~0053941

This fixed it for me.

Thank you!

dregad

dregad

2016-09-05 04:41

developer   ~0053942

Thanks for the feedback.

Related Changesets

MantisBT: master-1.3.x 05277b40

2016-09-05 04:39:22

dregad

Details Diff
CSS: fix label-style overlap on high-res screens

Fixes 0021280
mod - css/default.css Diff File

Issue History

Date Modified Username Field Change
2016-07-13 02:04 baier New Issue
2016-07-13 02:04 baier File Added: mbt130_screen.png
2016-07-13 03:50 cproensa Assigned To => cproensa
2016-07-13 03:50 cproensa Status new => feedback
2016-07-13 03:50 cproensa Note Added: 0053583
2016-07-13 04:19 baier Note Added: 0053586
2016-07-13 04:19 baier Status feedback => assigned
2016-07-13 12:15 atrol Assigned To cproensa =>
2016-07-13 12:15 atrol Status assigned => feedback
2016-07-13 12:15 atrol Note Added: 0053591
2016-07-13 12:29 baier Note Added: 0053593
2016-07-13 12:29 baier Status feedback => new
2016-07-13 12:36 baier File Added: mbt130org.png
2016-07-13 12:36 baier Note Added: 0053594
2016-07-13 15:47 atrol Status new => feedback
2016-07-13 15:47 atrol Note Added: 0053595
2016-07-13 17:04 baier Note Added: 0053597
2016-07-13 17:04 baier Status feedback => new
2016-07-13 17:08 baier Note Added: 0053598
2016-07-14 01:17 atrol Status new => feedback
2016-07-14 01:17 atrol Note Added: 0053601
2016-07-14 03:32 baier Note Added: 0053604
2016-07-14 03:32 baier Status feedback => new
2016-07-16 13:33 atrol Status new => confirmed
2016-07-16 14:31 cproensa Note Added: 0053616
2016-07-18 10:46 atrol Summary "My Account" - text boxes overlap if window is maximized - all Browsers => Text boxes overlap on screens with high resolution
2016-07-18 10:47 atrol Relationship added has duplicate 0021313
2016-09-04 10:57 mfernau Note Added: 0053935
2016-09-05 03:51 dregad Note Added: 0053940
2016-09-05 03:52 dregad File Added: label-style_overlap_fiddle.png
2016-09-05 04:24 mfernau Note Added: 0053941
2016-09-05 04:40 dregad Changeset attached => MantisBT master-1.3.x 05277b40
2016-09-05 04:40 dregad Assigned To => dregad
2016-09-05 04:40 dregad Status confirmed => resolved
2016-09-05 04:40 dregad Resolution open => fixed
2016-09-05 04:40 dregad Fixed in Version => 1.3.2
2016-09-05 04:41 dregad Note Added: 0053942
2016-09-05 04:41 dregad Target Version => 1.3.2
2016-10-02 18:41 vboctor Status resolved => closed