Improvement for horizintal scroll bar behaviour

[Former user]

Originally reported on Google Code with ID 94

When there are more columns in the database your screen can display and the number of
rows is more than screen size, you cannot use the horizontal scroll bar unless you
go to the bottom of the page. The horizontal scroll bar should be accessible from any
screen position. 

The scroll bar is attached to a DIV tag, unfortunately I wasn't able to fix this by
myself.
Kind regards, Thomas

Reported by mondworker on 2012-03-16 15:16:29

[Christopher Kramer]

``` Thanks for reporting this issue. Unfortunately, I think this would be very hard to solve, if not impossible. I cannot think of a good solution at the moment.

Solution would be to remove the div overflow:auto and make the div overflow in case of too many columns to trigger horizontal scrollbars of the whole site. This being easily said, it is not easy to implement.

Only solution I can think of at the moment is using tables (ugly).

The best CSS solution I could think of at the moment has the result that the right column does not span to the right if there is not much stuff in it, but ends somewhere in the middle. I tried positioning the "content" div relatively and the "main" element absolutely based on the content-div. And removing overflows. Works, but result is that right column lacks min-width. But I cannot define min-width as I do not know the width of the left column (only min-width). We'd need a CSS guru for this I guess. ```

Reported by `crazy4chrissi` on 2012-06-02 22:37:23 - Status changed: `Accepted`

[Christopher Kramer]

Issue 121 has been merged into this issue.

Reported by crazy4chrissi on 2012-10-20 14:21:52

[Former user]

This might be very easy to solve if you know how!
Just select any text from the table and while holding left mouse key go to the left.
No need to scroll to the bottom!
You can also use jQuery plugin http://quocity.com/colresizable/ if you think its useful
for you

Reported by teryaki1963 on 2012-11-03 09:22:36

[Christopher Kramer]

@ Teryaki: Thanks for the workaround. But this is really only a workaround.
We will really need to think about a good solution for this. And I think this should
be done in pure CSS.

No CSS guru here who wants to take up the challenge?

Reported by crazy4chrissi on 2012-11-06 15:27:31

[Former user]

Hey Christopher
I realy don't think we can only solve this with css. I also tried but no success. 
and i don't understand why using float:left for left_menu and right_content if we always
need both to be at same place.
For that i made a simple change:
1. removed unnecessary styles within code
2. remove div=content and add a table with only 2 columns instead (1. for lef_menu,
2. right_content)

Now if the the table is bigger than the screen, the browser will show horizontal scroller.
Also tested with other browser!

Here ist the changed file:

Reported by teryaki1963 on 2012-11-12 14:40:53

<hr> * Attachment: phpliteadmin.php

[Christopher Kramer]

In the phpLiteAdmin group, Sanne Foltz posted a fix to this too:
https://groups.google.com/forum/?fromgroups=#!topic/phpliteadmin/hnOJWZuwzOw

Unfortunately I did not have the time to check it.

The table-solution is of course ugly (see http://www.hotdesign.com/seybold/ for a nice
explanation...).

But as long as we do not find a better solution, we might use layout-tables nevertheless
I guess.

But we should definitely check the solution of Sanne Foltz as well. 

Reported by crazy4chrissi on 2012-11-12 14:46:23

[Former user]

Ya, i have seen Sanne solution. The design looks very nice, but i had also the same
problem as i tried with css only, (see image!)

IE = width goes over 10.000px

And i don't know if it makes a sense to hide the text and view only few chars. When
i click a table then i would like to see the whole content (see image column "text")
But we can add an option, if a user like to substr() the text?

About table_solution: I believe designer should use all possibilities to get best results
for all browsers. And we have here a Tool not a normal Site. Thats why i still prefer
this solution.

Reported by teryaki1963 on 2012-11-12 16:03:11

<hr> * Attachment: sheep_sol.png<br>

[Former user]

Sorry, i know you don't have enough time, so i made you a screenshot of the table_solution
for comparison:

Reported by teryaki1963 on 2012-11-12 16:10:57

<hr> * Attachment: table_sol.png<br>

[Former user]

I added the TABLE instead of DIV and tested all existing themes! 
They all work perfectly.

check last svn: http://phpliteadmin.googlecode.com/svn/source/1.9.4/phpliteadmin.php

Reported by teryaki1963 on 2012-11-13 11:47:05

[Christopher Kramer]

I can confirm the table-solution seems to work well. We'll stick to it unless sombody
comes up with a nice css-only solution. I still have not checked Sanne's solution yet
but will surely do so.

"And i don't know if it makes a sense to hide the text and view only few chars. When
i click a table then i would like to see the whole content (see image column "text")
But we can add an option, if a user like to substr() the text?"

Hmm. Yeah, we should add an option. PhpMyAdmin also hides long texts by default but
has an option to see everything. We should do it the same way I'd say. See screenshot
of phpMyAdmin attached.

Reported by crazy4chrissi on 2012-11-13 23:05:19

<hr> * Attachment: phpMyAdmin_long_texts.png<br>

[Former user]

ok
I added 2 variables in config part:
1. $rowsNum = 30; // set default number of rows. 
2. $charsNum = 300; // reduce string characters by a number bigger than 10

Reported by teryaki1963 on 2012-11-15 00:01:58

[Christopher Kramer]

I opened a new issue #204 for a GUI option to display long texts (which is not yet implemented).

I close this issue as it is fixed already.

Reported by crazy4chrissi on 2013-03-25 11:41:02 - Status changed: Fixed