CODEWITHSUNDEEP
twitter-bootstrapcss
kentor
kentor

Reputation: 18524

Enable horizontal scrolling for main div

I have a main div and a sidebar on the right (for navigation/filters). The main div is being used for showing logfiles and under no circumstances it should write into the right sidebar.

The problem: When a very long message without spaces (for example a long filepath) appears, it will write into my right sidebar. Instead I would like to have an own horizantal scrollbar for this div.

The code: I have created a JSFiddle which demonstrates the problem: https://jsfiddle.net/pu9b5pu2/

It is about these two divs here:

<div class="col-xs-9">
         <div class="debug">
            <div class="timestamp">[09:33:04.137] </div>
            <div class="message">BlaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaBlaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaBlaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaBlaaaaBlaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
         </div>
      </div>

      <!-- Right side bar -->
      <div class="col-xs right-sidebar">
         <div id="title-sidebar">
            <strong id="title">Filters</strong>
         </div>
         <input type="checkbox" id="debug" value="value">
         <label for="debug">Debug messages</label>
      </div>
   </div>

Upvotes: 0

Views: 367

Answers (2)

Ted Whitehead
Ted Whitehead

Reputation: 1826

You can break long words with CSS:

.break-word {
  hyphens: auto;// requires lang attribute be set on target element or ancestor
  overflow-wrap: break-word;
  word-wrap: break-word;
}

Upvotes: 1

Jon Uleis
Jon Uleis

Reputation: 18649

Add overflow: auto; to the .col-xs-9 container.

Change this line from your JSFiddle:

<div class="col-xs-9" style="white-space: normal; word-wrap: break-word; overflow-wrap: break-word;">

To this:

<div class="col-xs-9" style="white-space: normal; word-wrap: break-word; overflow-wrap: break-word; overflow: auto;">

And optionally, so the text isn't flush to the right when you scroll all the way, you can add padding-right: 15px; to the .message element.

Upvotes: 2

Related Questions