I have one paragraph p where I need to display some data.
I set white-space:nowrap and text-align:right. When someone types some content in one text field, this content shows in the paragraph from right to left.
But when data comes to left scroll-x was set to left, and to see new typed content you need to scroll to right.
I need the reverse, showing new content and scroll if you want to see the old one.
If i use direction: rtl, it works fine, but only for word, not with number, so i need another solution. Ofc i have an idea to do this with javascript, but i want solution without it.
document.querySelector('#inpt').addEventListener('keydown', function(e) {
document.querySelector('#display').innerHTML = e.target.value
})
p {
width: 100%;
white-space: nowrap;
text-align: right;
overflow-x: scroll;
}
<input id="inpt" type="text">
<p id='display'>
</p>
Setting display: flex with a flex-direction of row-reverse on your p tag seems to do the trick:
document.querySelector('#inpt').addEventListener('keydown', function(e) {
document.querySelector('#display').innerHTML = e.target.value
})
p {
display: flex;
flex-direction: row-reverse;
width: 100%;
white-space: nowrap;
text-align: right;
overflow-x: scroll;
}
<input id="inpt" type="text">
<p id='display'>
</p>
Related
I have two divs. Inside each div, there are two divs:
<div class="hide">
<div>
Variable size
</div>
<div>
Text1 (also variable size)
</div>
</div>
<div class="hide">
<div>
Different variable size
</div>
<div>
Text2 (also variable size)
</div>
</div>
If the screen is too small, I want the texts to disappear:
To do it, I used
.hide {
display: flex;
height: 100px;
flex-wrap: wrap;
overflow: hidden;
}
However, if the 1st text is too big, but the second is not, I have something like that:
And I'd like them to be hidden simultaneously.
Is there a way (no jQuery) to do it? Preferably with CSS or SASS, but JS (I use Angular) would also be acceptable.
Use display flex like this
.hide { height: 100px; display: flex; flex-wrap: wrap; overflow: hidden; }
I have a DIV container that has a paragraph and another inner DIV displayed in line.
Inner DIV is unknown but it's always the same and not gonna change. I can sent min-width if needed. Now based on outer DIV size I need to either cut (with three dots) or show full paragraph string. But I have to set paragraph width in css to show that three dots when outer div size is too small.
<div className="divOuter">
<p>very long string</p>
<div className="divInner">some div stuff</div>
</div>
.p {
position: relative;
float: left;
text-overflow: ellipsis;
overflow: hidden;
width: ?????; // what do I set here?????
white-space: nowrap;
}
.divInner {
display: flex;
float: right;
align-items: center;
}
|--------------------------------------|
|very long string some div stuff|
|--------------------------------------|
need to get this when outer DIV resized:
|------------------------------|
|very long st... some div stuff|
|------------------------------|
|--------------------|
|ve... some div stuff|
|--------------------|
This is what you are looking for.
You don't need to give any width to the long string p element.
There is a property of flexbox called flex. When you set this to 1, it will elongate that element to take up the remaining horizontal space in the parent.
After that, you just have to give text-overflow: ellipsis; overflow: hidden; to make the ... appear.
Run the below snippet to see it working.
.divOuter {
display: flex;
width: 100%;
}
.longString {
flex: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.divInner {}
<div class="divOuter">
<p class="longString">very long string very long string very long string very long string very long string</p>
<p class="divInner">some div stuff</p>
</div>
I've a part of code on my website. Some time it can happen that the line breaks if the code don't fit in the parent element anymore:
If this happens I want to break all lines instead because it looks ugly when one part is broken and the other don't.
Remind
I can have a least 20 elements in one list.
Update
This is the part of my code which I all need to wrap if one of them wraps:
.elements-list {
display: -webkit-box;
display: flex;
display: -ms-flexbox;
list-style: none outside;
}
.list-entry {
display: -webkit-box;
display: flex;
display: -ms-flexbox;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
list-style: none outside;
padding-right: 8px;
max-width: 200px;
}
span.single-detail span {
letter-spacing: 1px;
display: -webkit-inline-box;
display: inline-flex;
display: -ms-inline-flexbox;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
<ul class="elements-list">
<li class="list-entry">
<span class="single-detail">
<span>Abgabefrist:</span>
<span>22.02.2222</span>
</span>
<span class="single-detail">
<span>Entlohnung:</span>
<span>2.222,00 €</span>
</span>
</li>
<li class="list-entry">
<span class="single-detail">
<span>Abgabefrist:</span>
<span>22.02.2222</span>
</span>
<span class="single-detail">
<span>Entlohnung:</span>
<span>20.222,00 €</span>
</span>
</li>
<li class="list-entry">
<span class="single-detail">
<span>Abgabefrist:</span>
<span>22.02.2222</span>
</span>
<span class="single-detail">
<span>Entlohnung:</span>
<span>22.000.222,00 €</span>
</span>
</li>
</ul>
I don't think you can solve this with CSS alone. You can solve it with JavaScript.
One way would be to constantly monitor the elements and see if one of them wrapped. But then, once wrapped you will never unwrap, it's not responsive.
So this is my alternative:
By putting the value inside inline-block elements, you can align the widths of the elements. This way, when one element wraps, they will all wrap, because they simply won't fit anymore.
Advantages of this solution:
It's responsive, responds to browser resizing.
Only requires JavaScript on load. Sizing and wrapping is handled by CSS once the widths are set, so it's fairly lightweight.
Disadvantages:
You will need to recalculate the widths if you change the content of the elements, or if you have dynamic font sizing (I hope not).
It's not pixel perfect, it seems. Maybe it can be tuned (for instance by giving the left element also a width in whole pixels), or otherwise, maybe you'll forgive me this pixel. ;)
window.addEventListener('DOMContentLoaded', function(){
var rows = document.querySelectorAll('.row');
// First loop to find which line is the widest.
var widest = 0;
for(r=0; r<rows.length; r++) {
console.log(r);
var width = rows[r].querySelector('.col1').offsetWidth +
rows[r].querySelector('.col2').offsetWidth;
if (width > widest) widest = width;
}
// second loop to set the width of col2, so they all
// get the same width.
for(r=0; r<rows.length; r++) {
rows[r].querySelector('.col2').style.width =
(widest - rows[r].querySelector('.col1').offsetWidth) + 'px';
}
});
/* This is needed */
.col2 {
display: inline-block;
}
/* This is just for show */
.col1 {
padding-right: 1em;
}
span {
box-sizing: border-box;
border: 1px solid grey;
}
<!-- hacky div/span table, since there is no HTML in the question -->
<div class="row"><span class="col1">The time</span><span class="col2">2018-12-22 12:34</span></div>
<div class="row"><span class="col1">Total price here</span><span class="col2">$ 5,-</span></div>
You either need to set the css property white-space: nowrap; on the text parent element so no text wraps for that class or you could add the <br> on the HTML after the name of the element so it breaks every time, code is needed so we can be more specific in finding a solution.
Well, easiest would be to create "abgabefrist:01/01/0001" as two elements instead of one and then add display flex to the parent. so when the screen shrinks, the element comes below another.
Below mentioned code fine, tested on codepen.
.dates div {
display: flex;
flex-wrap: wrap;
}
<div class="main">
<div class="dates">
<div><span>abgabefrist:</span>
<span>01/01/0001</span></div>
<div><span>abgabefrist:</span>
<span>02/02/0002</span></div>
</div>
<div class="btns">
<button> Button One</button>
<button> Button Two </button>
</div>
</div>
Take a look at this example: https://jsfiddle.net/qpysmb9t/
Whenever text in the contentEditable element becomes bigger that the max-width of the div(try typing some long text), than the left part gets hidden and what's on the right is shown. This is okay while you type, but on focus out I'd like to reverse this and show text from the beginning.
<div tabindex="-1" contenteditable="true" class="name-data">This is test</div>
.name-data{
max-width:180px;
white-space: nowrap;
overflow-x: hidden;
}
The usual answer is to move caret position to the start, however that does not move the text along the way and it also messes with element not focusing out anymore. Check it out: https://jsfiddle.net/qpysmb9t/1/
What do you recommend that I do?
A dash of JavaScript helps. When the div loses focus we can use scrollLeft to get back to the begin position.
//scroll the text back to the beginning when focus is lost
document.querySelector("div.name-data[contenteditable='true']").addEventListener("blur", function(e){
this.scrollLeft = "0px";
}, true);
.name-data{
max-width:180px;
white-space: nowrap;
overflow-x: hidden;
border: 1px solid #949494;
}
<div tabindex="-1" contenteditable="true" class="name-data">This is test</div>
IDEA: Make your div display: flex and toggle justify-content propertive when user focus out to force browser re-paint the content
CSS only solution:
.project-name-data {
max-width: 180px;
white-space: nowrap;
overflow-x: hidden;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
border: solid 1px gray;
}
.project-name-data:focus{
justify-content: flex-end;
}
<div tabindex="-1" contenteditable="true" #projectName class="project-name-data">This is test</div>
I like CSS only solution but it weird because the div content have different align from two state focus and normal. So i add a bit javscript to fix it
Javascript solution:
document.getElementsByClassName("project-name-data")[0].addEventListener("focusout", function() {
this.style.justifyContent = "flex-end";
// Wait a tick then change the justifyContent back to force browser re-paint
setTimeout(() => {
this.style.justifyContent = "flex-start";
}, 0)
});
.project-name-data {
max-width: 180px;
white-space: nowrap;
overflow-x: hidden;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
border: solid 1px gray;
}
<div tabindex="-1" contenteditable="true" #projectName class="project-name-data">This is test</div>
For DIV contenteditable, we need to fix a scroll left bug. Combined both Duannx and Mouser answers into another example (my own project).
// Fix DIV contenteditable scroll left bug
var elements = document.querySelectorAll('div[contenteditable="true"]');
for (let i = 0; i < elements.length; i++)
{
elements[i].addEventListener('focus', setScrollLeft, true); // The handler is executed in the capturing phase
elements[i].addEventListener('blur', setScrollCenter, true); // The handler is executed in the capturing phase
}
function setScrollLeft()
{
this.scrollLeft = '0px';
this.style.justifyContent = 'flex-start';
}
function setScrollCenter()
{
this.scrollLeft = '50%';
this.style.justifyContent = 'center';
}
I created a slider seeker but cant seem to get it to the center of the div. I used span and kept the background-image as the seeker image. How do I set the position to the center. Is there any other good method to implement this.
<div class="slider-seeker">
<span class="position-image active"></span>
<span class="position-image"></span>
<span class="position-image"></span>
<span class="position-image"></span>
</div>
http://jsfiddle.net/j1bnbf3q/
Solution 1
Create a wrapper div to contain the seeker buttons, and centralize the wrapper: http://jsfiddle.net/pwLsb290/
Solution 2
Apply display: inline-block; on the seeker buttons, and get rid of the float property. (The problem with this method is the whitespace associated with inline-block elements.)
http://jsfiddle.net/26dk1zeL/
Used to this css add your .position-image display:inline-block property and remove float: left; as like this
.position-image{
/* float: left; */ // remove this
display: inline-block; // add this
vertical-align: top; // add this
}
===========
2nd option is
Demo
used to this
.slider-seeker > a {
display: inline-block;
vertical-align: top;
}
See fiddle
CSS:
.slider-seeker a{
margin:0px auto;
}
.position-image {
display:inline-table;
}