What is the best way to incorporate a percentage-based width scrollbar?

Help needed: I want to implement a scroll feature for the parent div but here's the catch - the width of the text inside the div needs to be in percentage. So, if there is a long name, it should scroll within the parent div.

HTML:

<div id="list">
    <div class="info">
        <div class="image">
            <img src="https://dl.dropbox.com/u/14396564/no_camera.jpg">     </div>
        <div class="text_data">Intell. off. ch. 1 with a very very very long</div>
    </div>

    <div class="info">
        <div class="image">
            <img src="https://dl.dropbox.com/u/14396564/no_camera.jpg">
        </div>
        <div class="text_data">Intell. off.</div>
    </div>
</div>

CSS:

#list{
    max-height:200px;
    overflow-y:auto;
    padding:5px;
    /*display: none;*/
}

.info{
    border: 1px dashed #CCCCCC;
    margin-bottom: 5px;
    padding:5px;
    overflow: hidden;
    cursor: pointer;
}

.info .image{
    width:20%;
    display:inline-block;
    margin-right:20px;
    /*border: 1px solid red;*/
}

.info .image img{
    width: 100%;
}

.info .text_data{
    display: inline-block;
    /*border: 1px solid green;*/
    vertical-align: top;
    overflow-x: auto !important; 
}

Check it out on jsfiddle.net

Answer №1

If you would like the text to consistently appear on the right side of the image without wrapping, simply adjust the div's white-space property to nowrap.

Check out this new jsFiddle link

This CSS snippet pertains to class="info", with everything else remaining the same.

.info{
    border: 1px dashed #CCCCCC;
    margin-bottom: 5px;
    padding:5px;
    overflow: auto;
    cursor: pointer;
    white-space: nowrap;
}

Answer №2

Click here to view the example: http://jsfiddle.net/2DLqq/3/

UPDATE (vertical scroll): http://jsfiddle.net/2DLqq/6/

UPDATE (horizontal scroll): http://jsfiddle.net/2DLqq/7/

To prevent text wrapping, wrap .text_data in a container div and set overflow-x:auto; with white-space:nowrap;

<div class="text_data_container">
     <div class="text_data">
          Your really long string of text without line breaks.
     </div>
</div>

CSS:

.text_data_container {
     overflow-x:auto;
     width:100%;
}

.text_data {
     display:inline-block;
     white-space:nowrap;
}

Remove "vertical-align:top;" from .text_data as it only impacts images.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a JavaScript object and retrieving the values of numerous input fields with identical classes

I have encountered an issue that I need assistance with: <input title="1" type="text" class="email"> <input title="2" type="text" class="email"> <input title="3" type="text" class="email"> The HTML code above shows my attempt to extract ...

I'm trying to create a transparent v-card, but for some reason it's not turning out the way I want

How can I make the v-card transparent while keeping its content opaque using CSS? card.vue <v-card class="cardColor"> <v-card-text> TEXT </v-card-text> <v-card-actions> <v-btn color="prima ...

The switch statement remains unchanged for varying variables

Here is some code that I am working with: updateTable(selectedIndex) { console.log("running updateTable function"); let level = ''; // if (selectedIndex == 1){ // this.setState({level: 'day'}) // th ...

Implementing a feature in React to restrict access to my URL for a specified duration

I'm currently developing my React project and I need to make a specific page on my website accessible for only a limited time, like 5 minutes. For example, I want to send the user an email with a unique url, allowing them to access the designated web ...

Angular-ui does not support the ng-disable directive

<h3 class="pulse-green-text"><span class="icon ico_pulse_download"></span>VPN Certificate</h3> <div class="vpn-cert" ng-controller="vpnController vpnCert"> <form method="post" name="userform" class="form-horizontal" id="u ...

Aligning the Navigation Bar to the Upper Right Corner

I'm attempting to rearrange my Nav Bar to be at the Top Right, with my logo on the Top Left all in one line. Unfortunately, I'm struggling to achieve this and could really use some guidance. As a newcomer to HTML and CSS, I find it challenging to ...

The Bootstrap tab feature is malfunctioning when a tab is using data-target instead of href

While developing bootstrap tabs for an Angular app, I decided to use the data-target attribute instead of the href attribute to avoid any interference with routes. Here's a snippet of how I structured the tabs: <ul class="nav nav-tabs" id="myTab"& ...

Comparison between SSD and HDD animation speed in web hosting environments

I am currently in search of a web hosting provider for a website I have created. The site features some performance-heavy animations, particularly due to a fullscreen slider with filter and scaling transitions. I need a provider that can ensure optimal per ...

Customize Angular Material's Mat-Dialog background blur/darkening effect

Greetings, dear community members, I am currently utilizing angular along with angular material in my projects. By default, when a material dialog is opened, it slightly darkens the background. However, I am interested in having a blurred background inst ...

Can HTML and CSS be used to create button text that spans two lines with different fonts?

When working with HTML attribute values, I am facing an issue where I can't get button text to display in two lines with different font sizes. I have attempted using whitespace in CSS for word wrap, but this solution does not solve my problem. I also ...

Using Flexbox to center items is leading to content overlapping

After attempting to utilize flexbox for centering items, I am encountering issues with content overlapping and misalignment. Link to the code snippet .footer_3 { position: relative; display: flex; align-items: top; justify-content: center; top: ...

Ways to prevent a page from scrolling

I'm currently working on a webpage that features a vertical drop-down menu. The issue I'm facing is that when the menu drops down, it causes the text below it to be pushed downwards and off the page. While this behavior is anticipated, it also tr ...

Ways to reduce the amount of time spent watching anime when it is not in view

My anime experiences glitches as the black container crosses the red, causing a decrease in duration. Is there a way to fix this glitch? I attempted to delay the changes until the red path is completed, but the glitches persist. delayInAnimeSub = ourVilla ...

Attempting to create a JavaScript calculator from scratch

After spending hours typing and debugging my code for a school assignment, I have created a calculator that still isn't working. I'm hoping someone can help me find the errors in my code. function myStory() { window.alert ("Very doge"); } // ...

When `focus` is bound to a jQuery event handler, the behavior of the select element becomes erratic on

What causes the odd behavior where users need to click twice on a select-option for it to drop down/up after binding an eventhandler to the focus event using jQuery? $('input, select, textarea').focus(function() { $(this).addClass('input_ ...

JavaScript - Dynamically loaded CSS: CSS variables are not immediately accessible to JavaScript, but are successfully evaluated within the CSS itself

I am encountering an issue with dynamically loading stylesheets via JavaScript into my application. Within these stylesheets, I have various CSS variables that I need to access and modify from my JavaScript code. When the stylesheets are directly embedded ...

What is the best way to adjust the size of my <div> to accommodate additional vertical content?

Every time I attempt to include margin-top: 30px to my box_1 and box_2 <div>, the bottom <div> is pushed down and disappears. It seems like my wrapper isn't expanding to accommodate the content. How can I achieve a 30px space between the ...

How can you implement CSS styling for Next.js HTML during server-side rendering?

Explore Next.js and observe the page request in the network tab. The preview displays not only the HTML but a fully pre-styled page as well. https://i.stack.imgur.com/deJLY.png When working with Styled-Components and Material-UI, they offer the ServerSty ...

Having trouble finding rows to manipulate in an HTML table generated using jQuery csvToTable?

As a beginner in programming, I find myself seeking assistance with a particular issue. I have successfully read a CSV file stored locally and transformed it into an HTML table using jQuery csvToTable http://code.google.com/p/jquerycsvtotable/. Additional ...

I'm having trouble grasping the concept of serving gzip-compressed JavaScript and CSS files

Why is it important to serve compressed JavaScript and CSS files? I understand that it reduces file size, but does the browser/webserver have to decompress them to read them? It's been mentioned that the webserver handles the compression. Does this me ...