View Issue Details

IDProjectCategoryView StatusLast Update
0021280mantisbtuipublic2016-10-02 18:41
Reporterbaier Assigned 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.
Attached Files
mbt130_screen.png (42,933 bytes)   
mbt130_screen.png (42,933 bytes)   
label-style_overlap_fiddle.png (10,591 bytes)   
label-style_overlap_fiddle.png (10,591 bytes)   

Relationships

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

Activities

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:
<pre>
/ 30% label width - these are the defaults /
div.form-container .label-style {
width: 31%;
}
</pre>

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; <pre>
.label-style {
width: 30%;
padding: 0 .5em;
}
</pre>

See attached label-style_overlap_fiddle.png for illustration.

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 00:39

dregad


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

Fixes 0021280
Affected Issues
0021280
mod - css/default.css Diff File