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

Struggling to make fadeIn() function properly in conjunction with addClass

I've been struggling with this issue for quite some time now and I just can't seem to make it work. The JavaScript I'm working on involves using addClass and removeClass to display and hide a submenu element. While the addclass and removeCla ...

Several HTML dropdown menus that do not expand

On my website, I have several select elements but the first one related to math is giving me trouble. It doesn't expand properly - sometimes it works on the first click but stops working afterwards. I've tested this issue on both Google Chrome a ...

The pictures are not showing up in the photo album

I am currently in the process of building a swim image gallery inspired by the Flex Panel Gallery project from Javascript30 (Repo Link). Upon previewing the site in a browser, I encountered an issue where the images extend beyond the frame, leaving only t ...

Is it possible to incorporate a <div> element within a PHP code?

After successfully writing some PHP/SQL code, I encountered an issue when trying to create a new div called "content" along with applying a CSS class. The recommended approach was suggested as follows: $mydiv = '<div name="content">'; $myn ...

Are user message templates available for use with Twitter Bootstrap?

I am interested in implementing Twitter Bootstrap into my website design. While it looks amazing, I now need to incorporate user messages (similar to those found on forums or Twitter). These messages should include short text, submission time, user image, ...

PHP's $_SESSION variable for passing data between pages

Every time I visit a new page, whether it's a login page or any other, I want to store the name of that page in a $_SESSION variable. For example, on the login page: <?php session_start(); $_SESSION['page'] = 'login.htm&apo ...

Executing a Javascript function when a form is submitted

function validateForm() { alert("Form submitted successfully"); return true; } <form onsubmit="return validateForm()" action="add.php" method="post" id="p1"> <center>Add New Survey</center> <p>&nbsp;&l ...

Setting up bootstrap for PHP: A step-by-step guide

Struggling with integrating PHP and Bootstrap? I recently attempted to do the same, but unfortunately, my website doesn't seem to recognize Bootstrap. Instead of the sleek Bootstrap design, it's displaying a simple HTML layout. Here's a snip ...

Exploring Options for Enabling HTML in AngularUI Accordion-Group Content

I want to showcase content in an accordion-group that might contain HTML markup. This content is fetched from external sources. How can I achieve this? You can check out an example at Plnkr (content hard-coded for testing) Currently, the items are displa ...

Having trouble with Tailwind UI components displaying properly in Next.js?

I tried following the Tailwind UI tutorial, but unfortunately, it doesn't seem to match up with my Next.js project. Take a look at my tailwind.config.ts: export const defaultTheme = require("tailwindcss/defaultTheme"); module.exports = { ...

AngularJS: The requested resource does not have the "Access-Control-Allow-Origin" header

Currently developing my web application using AngularJS, I have a file named script.js which contains the following code: var module = angular.module('project', ['ngRoute']); // setting up our routes module.config(function ($r ...

Changing the appearance of a shadow root element using CSS styling

My CustomField has a FormLayout inside, and I want to change the #layout element within the shadow-root. While it can be done with JavaScript: document.querySelector("#myid > vaadin-form-layout") .shadowRoot .querySelector("#layout" ...

How can I automatically direct my NodeJS application to the login screen?

Here is the setup of my project structure: There is a simple folder called static, within which I have: index.html (the homepage for user registration) login.html (the login page) In the parent folder, there is a file named server.js: // NodeJS code for ...

How to utilize the CSS hover feature within an Angular directive?

Presented here is the default directive. import { Directive, Input, Renderer2, ElementRef } from '@angular/core'; @Directive({ selector: '[newBox]' }) export class BoxDirective { @Input() backgroundColor = '#fff'; con ...

Transitioning to EM-Based Media Queries

After the recent resolution of the WebKit page-zoom bug, what are the primary benefits of utilizing em-based media queries over pixel-based ones? Incentive I am offering a reward for my question as many prominent CSS frameworks and web developers use em- ...

What is the best way to position a small image within a menu?

Is there a way to adjust the position of the arrow image within the <li> element without affecting the layout of the unordered list? Below is the code snippet for reference: body { margin: 0; padding: 0; } nav { width: 100%; background: # ...

What is the best way to show TypeScript code using "<code>" tags within an Angular application?

I am looking to showcase some TypeScript (angular code) as plain text on my website using prismjs. However, the Angular framework is executing the code instead. How can I prevent it from running? I have attempted enclosing it within pre and code tags wit ...

Boxes that expand to full width and appear to float on

I am dealing with a situation where I have a container that holds multiple child elements such as boxes or sections. <section> <div>Box 1</div> <div>Box 2</div> <div>Box 3</div> <div>Box 4< ...

Transforming nested JSON files into nested jQuery divs

Is it possible to iterate through two JSON files that have a parent-child relationship based on simple ID primary and foreign keys? Can we then display the data in a list of divs with the following characteristics: Hierarchical - child divs should only a ...

Is there a way for me to retrieve the name of a newly opened browser tab from the original tab?

I have written a code snippet to create a new tab within the same browser by clicking on a link. function newTab() { var form1 = document.createElement("form"); form1.id = "newTab1" form1.method = "GET"; form1.action = "domainname"; //My ...