Konstantin Konstantin - 4 months ago 13
HTML Question

Struggling with horizontal scrollbar of a DIV

I have a DIV element on my page, which whole content is generated by an asyncronous AJAX call. The content are built from P elements (paragraphs) which contains A elements too (href links) and nothing else. In fact my small webpage contains nothing else, but the mentioned DIV which id parameter is "log".

My CSS code for the DIV and the P elements is:

<style>

p { line-height:20%;
font-size:9px;
font-family:monospace
}

a {text-decoration:none}

a[title]:hover:after {font-size:9px;font-family:monospace}

div#log {
width: 1000px;
overflow-x: scroll;
}

</style>


I have no other inline or other style elements on the page at all.

AJAX returned dynamic content looks like as follows:

<p>2016-05-17 11:40:23 | <a href="http://example.com/?ip_to_lookup=192.143.125.212">192.143.125.212&nbsp;&nbsp;&nbsp;</a> | Palma de Mallorca - Balearic Islands: Spa... | <a href="http://example.com/?place_to_lookup=Palma+de+Mallorca+-+Balearic+Islands" target=_blank>Palma+de+Mallorca+-+Balearic+Islands</a> | <a href=# title="Palma+de+Mallorca+-+Balearic+Islands | Mozilla/5.0 (Linux; Android 6.0.1; Nexus 6 Build) | OmniAccess Broadband | 0.34776657 sec">Misc data</a></p>


The horizontal scrollbar appears, but it looks like disabled, no slider. When the content is wider than 1000 pixel, or I set the width smaller, let's say 500 px, slider still not appears, instead of the content of the paragraphs is warped from the right side to the left side, and overflowing letters cover the beginning of the next line / paragraph.

What to do make the scrollbar work properly?

Answer

Since you say that your page contains nothing but this #log div, I'm going to give an answer that involved changing things slightly, with an explanation to follow:

p {
  /* Added */
  white-space: nowrap;
  /**/
  line-height:20%;
  font-size: 9px;
  font-family: monospace
}

a {
  text-decoration: none
}

a[title]:hover:after {
  font-size: 9px;
  font-family: monospace
}

div#log {
  /* width: 1000px; */
  overflow-x: scroll;
}
<div id="log">
  <p>2016-05-17 11:40:23 | <a href="http://example.com/?ip_to_lookup=192.143.125.212">192.143.125.212&nbsp;&nbsp;&nbsp;</a> | Palma de Mallorca - Balearic Islands: Spa... | <a href="http://example.com/?place_to_lookup=Palma+de+Mallorca+-+Balearic+Islands"
    target=_blank>Palma+de+Mallorca+-+Balearic+Islands</a> | <a href=# title="Palma+de+Mallorca+-+Balearic+Islands | Mozilla/5.0 (Linux; Android 6.0.1; Nexus 6 Build) | OmniAccess Broadband | 0.34776657 sec">Misc data</a></p>
  <p>2016-05-17 11:40:23 | <a href="http://example.com/?ip_to_lookup=192.143.125.212">192.143.125.212&nbsp;&nbsp;&nbsp;</a> | Palma de Mallorca - Balearic Islands: Spa... | <a href="http://example.com/?place_to_lookup=Palma+de+Mallorca+-+Balearic+Islands"
    target=_blank>Palma+de+Mallorca+-+Balearic+Islands</a> | <a href=# title="Palma+de+Mallorca+-+Balearic+Islands | Mozilla/5.0 (Linux; Android 6.0.1; Nexus 6 Build) | OmniAccess Broadband | 0.34776657 sec">Misc data</a></p>
  <p>2016-05-17 11:40:23 | <a href="http://example.com/?ip_to_lookup=192.143.125.212">192.143.125.212&nbsp;&nbsp;&nbsp;</a> | Palma de Mallorca - Balearic Islands: Spa... | <a href="http://example.com/?place_to_lookup=Palma+de+Mallorca+-+Balearic+Islands"
    target=_blank>Palma+de+Mallorca+-+Balearic+Islands</a> | <a href=# title="Palma+de+Mallorca+-+Balearic+Islands | Mozilla/5.0 (Linux; Android 6.0.1; Nexus 6 Build) | OmniAccess Broadband | 0.34776657 sec">Misc data</a></p>
</div>

If you keep the width on #log, then the scrollbar will only appear if the p tags are wider than 1000px. So, I got rid of it. Then, I added white-space: nowrap to p, because it seemed like you wanted each entry on one line.