A div element set to a width of 100% that holds a lengthy text will expand to the entire width of the window,

Check out this simple webpage: https://jsfiddle.net/enxgz2Lm/1/

The webpage is structured with a side menu and a tasks container.

Within the tasks container, there is a row container that includes a checkbox, title on the left, and details on the right.

I'm specifically inquiring about the editable title element.

The title element has the attribute contenteditable="true". I want it to expand to occupy 100% of the available space. If the text exceeds the available space, I would like it to display partially and hide the rest without wrapping into new lines.

In the provided webpage, you can see that I achieved most of what I wanted. However, I'm struggling to maintain the width of the title at 100% of the available space.

Note: If you uncomment the CSS line "width: 470px", you'll get an idea of how the final webpage should look.

htmlcss

Answer №1

To start, include the CSS rule 

.side-menu-container { flex: none; }
(or min-with:150px).
Next, replace width: 100%; with .tasks-contianer { flex: auto; } and to avoid stretching, ensure you add 
.tasks-contianer { min-width: 0; }
(or overflow: hidden):

* {
  box-sizing: border-box;  
}

body {
  display: flex;
  margin: 0;
  height: 100vh;
}

.side-menu-container {
  width: 150px;
  height: 100%;
  background-color: lightblue;
  padding-left: 15px;
  flex: none;
}

.tasks-contianer {
  padding: 10px;
  background-color: #161A1F;
  flex: auto;
  min-width: 0;
}

.task-container {
  display: flex;
  align-items: center;
  height: 40px;
  background-color: lightgray;
  padding: 0 10px;
}

.checkbox-container {
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.details-container {
  padding-left: 10px;
  color: red;
}

.title-container {
 overflow: hidden;
}

.title-container p {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis; /* optional */
}

[contenteditable] {
  outline: 0px solid transparent;
}
<div class="side-menu-container">
  <p>Category1</p>
  <p>Category2</p>
  <p>Category3</p>
</div>
<div class="tasks-contianer">
  <div class="task-container">
    <div class="checkbox-container">
      <input type="checkbox" />
    </div>
    <div class="title-container" contenteditable="true"><p>veryLongTextWithNoSpaceveryLongTextWithNoSpaceveryLongTextWithNoSpaceveryLongTextWithNoSpaceveryLongTextWithNoSpaceveryLongTextWithNoSpaceveryLongTextWithNoSpace
    </p>
    </div>
    <div class="details-container">
      <p>details</p>
    </div>
  </div>
</div>

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

Retrieve the image by its unique identifier while viewing a preview of the image before it is uploaded

Below is the script I am using to preview an image before it is uploaded. The HTML structure looks like this: <div> <img id="image" src="#"> </div> <input type="file" accept="image/gif, image/jpeg, image/png" onchange="readURL(th ...

javascriptjqueryhtmlimage

What function does the sx prop serve in Material UI?

<Container style={{ margin: "10px" }}> <Article post={post} setCurrentId={setCurrentId} /> </Container> <Container sx={{ margin: "10px" }}> <Article post={post} setCurrentId={setCurrentId} /> </Cont ...

cssreactjsmaterial-ui

The correct way to write media queries in CSS for the iPhone

After successfully formatting a website for various devices using an online responsive design tester and CSS declarations like @media only screen and (max-width: 480px), I encountered an issue during testing on an actual iPhone. The browser was not computi ...

iphonecssmobilemedia-queriesdevice

Creating a box that is connected by lines using JSON data requires several steps. You

I am attempting to dynamically draw a line using the provided JSON data. I have heard that this can be easily achieved with flexbox. Important: I would greatly appreciate a solution involving flexbox This is what I hope to achieve: https://i.stack.imgu ...

javascriptjqueryhtmlcss

How can I prevent Bootstrap from conflicting with my custom styles?

My HTML menu was functioning perfectly with specific CSS styles, until I decided to add a Bootstrap reference in the header: New Link Added <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> Afte ...

jqueryhtmlcsstwitter-bootstrap

Pixel information from previous canvas remains intact post resizing

I have crafted a canvas and loaded pixel data at specific locations using the following code snippet. let maskCanvas = document.createElement("canvas"); let patchWidth = 30; let patchHeight = 30; let scale = 3; maskCanvas.setAttribute("class", "mask"); ...

javascripthtmlcanvas

What is the best method to pass a JavaScript file array to a Node.js server?

Is it possible to transfer data from a Javascript file linked to an HTML page to a Node.js file on a post route without displaying it on the HTML page? If so, what is the best way to accomplish this? ...

javascripthtmlnode.js

Activate the 'li' element within the 'ul' whenever a 'ui-sref' link on the

I have been working on building a dashboard that consists of an abstract state called dashboard, with subdashboard as the immediate child state. Previously, clicking on user details would take the user to the dashboard.tables state. However, I encountered ...

javascripthtmlcssangularjstwitter-bootstrap

The text-center alignment in Bootstrap doesn't seem to be applying to buttons

After spending a considerable amount of time trying to center two buttons in Bootstrap, I came across the "text-center" class offered by Bootstrap. However, no matter where I include this class, it doesn't seem to have any effect on the alignment of t ...

javascripthtmlcsstwitter-bootstrap

A guide to setting up a Python CGI web server on a Windows operating system

I am looking to set up a basic Python server on a Windows system to test CGI scripts that will ultimately run on a Unix environment. However, when I access the site, it displays a blank page with no source code visible. I am struggling to identify the issu ...

pythonhtmlpython-3.xwebservercgi

What is the best way to implement a switch that can simultaneously display both the on and off positions?

I need help customizing a toggle switch element in CSS. I want the first row to display as on (blue color) and the second and third rows to be displayed as off or grey. So far, my attempts to modify the CSS code have been unsuccessful. .switch { posi ...

javascriptjqueryhtmlcss

What could be the reason for the child element not occupying the full height of its parent container?

* { padding: 0; margin: 0; box-sizing: border-box; } body { margin: 50px; } .navbar { display: flex; align-items: center; justify-content: center; color: darkgreen; font-family: 'Vollkorn', serif; font-size: 1.2rem; font-w ...

javascripthtmlcss

phperror message is included and echoed

I am facing an issue while trying to utilize the php include tag for my header and footer sections. Even though my index file and header.php file seem to be error-free, the included file is not showing up when I preview it in a browser. Is there an easy fi ...

phphtmlinclude

Troubleshooting: Issues with CSS fixed positioning

Whenever I try to scroll down, my navbar moves along with the page. Even when I resize the window, it keeps shifting despite using position:fixed. What mistake am I making? nav li:nth-child(1) { position: fixed; border: 1px solid #15317E; font-si ...

csscss-position

Any solutions for dealing with longer labels in Bootstrap form-floating?

Is there a way to use Bootstrap's form-floating feature with longer labels so that the text box automatically expands to accommodate the text but doesn't cut off on white-space wrap when too long? I'd like to avoid using position-relative to ...

htmlcssbootstrap-5

Preventing Access: How to restrict an entire domain while allowing access to a specific page?

I need help with limiting my website to be displayed only within an Iframe on a specific page of another domain. I am currently using a PHP header for this purpose, but I want to ensure that my site can only run on a designated URL instead of the entire do ...

phphtmliframecontent-security-policy

Can you explain the significance of the '#' symbol within the input tag?

I was reading an article about Angular 2 and came across a code snippet that uses <input type='text' #hobby>. This "#" symbol is being used to extract the value typed into the textbox without using ngModal. I am confused about what exactly ...

javascripthtmlangular

Show the checked options retrieved from controller

I am facing an issue with displaying certain checkbox values from the controller. In order to properly save these values, I believe it would be best to declare them in the controller and then use them in the HTML. However, my current code is not successful ...

htmlangularjs

Tips on aligning data received as a response from a Perl script

Currently, I am utilizing a Jquery-Ajax call to a perl script in order to retrieve specific data. The perl script executes a database query and transmits the data back to the HTML page. while (my @data = $statement->fetchrow_array()) { print "$ ...

htmlperlalignment

<div class="firstHeaderClass"> What exactly is this?

Struggling to eliminate a recurring header across all my webpages for customization, I've hit a roadblock in identifying the source of this repeating header. Upon stumbling upon this code snippet in the header section, my efforts to decipher its ...

phphtmlcssheader-files