I have a horizontal scroll that I'm building but the divs end up wrapping to the next line instead of going off screen. In essence I'm trying to create this.
http://codepen.io/calendee/pen/HIuft?editors=100
My CSS looks like
.wide-as-needed {
white-space: nowrap;
overflow: scroll;
}
.scroll {
min-width: 100%;
}
parts * {
width: 100px;
}
parts {
display: inline;
float: left;
margin-right: 20px;
}
My HTML looks like
<ion-scroll class="wide-as-needed" direction="x">
<parts ng-repeat="part in popularParts" part="part"</parts>
</ion-scroll>
The parts element sample here
<parts ng-repeat="part in popularParts" part="part" class="">
<div class="text-center">
<img src="image.png">
<div class="bold assertive ng-binding">Product 1</div>
<div class="assertive ng-binding">John Deere</div>
<div class="bold balanced ng-binding">$88.0</div>
</div>
</parts>
What's wrong and how do I fix this?
Does it have to use Ionic? Here is an example with CSS and HTML, not using Ionic.
http://codepen.io/tylerism/pen/zGPQaj
.item{
display: inline-block;
vertical-align: middle;
background:#333388;
color:white;
padding:10px 50px;
margin-right:10px;
}
.scroll_outer{
width: auto;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
Does that work?
Related
I have two blocks with text. The length of the text is not constant (user input). The left block has short text in it but the right block might contain really long text. The blocks should appear side by side and spread over 100% of the parent's constant width, no more no less.
Simplified Example:
https://jsfiddle.net/hh6a03cy/1/
<div style="white-space: nowrap; font-size: xx-large;">
<span>woohoo</span>
<div style="display: inline-block; overflow-wrap: break-word; width: 100%; white-space: normal; vertical-align: top;">gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>
</div>
The problem in this solution is that there is a horizontal scroll bar because the right block takes 100% of its parent's width, but it should take less since the comulative width of the two blocks should be 100%.
Any ideas?
Thanks!
You can accomplish this, and with much less CSS, using flexbox.
.container {
display: flex;
}
.container div {
margin-left: .5em;
word-break: break-word;
}
<div class="container">
<span>woohoo</span>
<div>gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>
</div>
Here is used javascript for dynamically setting width;
<html>
<head>
<style>
#container {
width: 100%;
box-sizing: border-box;
font-size: xx-large;
}
#left {
overflow: hidden;
float: left;
}
#right {
float: right;
word-break: break-all;
display: inline-block;
margin-left: 10px;
}
</style>
<script>
function setWidth() {
document.getElementById("left").style.width = document.getElementById('textIsHere').offsetWidth;
//you should include all margins for #left and #right element
document.getElementById("right").style.width = document.getElementById('container').offsetWidth - document.getElementById('left').offsetWidth - 10;
}
</script>
</head>
<body onload="setWidth()">
<div id="container" onclick="setWidth()">
<div id="left"><span id="textIsHere">woohoo</span></div>
<div id="right" >gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>
</div>
</body>
<html>
CSS
.container {
width: 100%;
box-sizing: border-box;
font-size: xx-large;
}
.left {
width: 150px;
overflow: hidden;
float: left;
}
.right {
width: calc(100% - 150px);
float: right;
word-break: break-all;
display: inline-block;
}
HTML
<div class="container">
<div class="left">woohoo</div>
<div class="right">gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>
</div>
white-space: nowrap; would break current result. For better div width you could use some javascript to calculate it.
I'm having problems with the attibute "word-wrap:break-word;" when trying to align horizontally with another DIV and its inside a DIV. Easy to understand my problem seeing this two examples:
#container {
height: auto;
overflow: hidden;
}
#left {
background-color: green;
width: 120px;
height: 20px;
overflow: hidden;
}
#right {
width: calc(100% - 120px);
float: right;
height: auto;
display: inline-block;
word-wrap: break-word;
background-color: red;
}
<div id="container">
<div id="right">AAAAAAAAAAAAAAAAAAAAA</div>
<div id="left"></div>
</div>
http://jsfiddle.net/galacticpower/a3nyxhtj/4/
Here, if the navigator is resized, the right div text is broken as needed! Yeah!
Adding a div inside the right div and its style comes the problems...
#inside_right{
width: auto;
display: inline-block;
word-wrap:break-word;
background-color: yellow;
}
<div id="container">
<div id="right">
<div id="inside_right">AAAAAAAAAAAAAAAAAAAAA</div>
</div>
<div id="left"></div>
</div>
http://jsfiddle.net/galacticpower/a3nyxhtj/3/
Here if the navigator is resized the "word-wrap:break-word" attribute is lost. The text is not broken! I need to apply some style in a div inside the right div without losing this behaviour.
To summ up, I want that the words were broken in the second example...
Any ideas?
Thank you so much!
Simply apply max-width: 100% to force the letters to actually break inside the inline-block #inside_right
#container {
height: auto;
overflow: hidden;
}
#left{
background-color: green;
width: 120px;
height: 20px;
overflow: hidden;
}
#right{
width: calc(100% - 120px);
float: right;
height: auto;
display: inline-block;
word-wrap:break-word;
background-color: red;
}
#inside_right{
width: auto;
display: inline-block;
word-wrap:break-word;
background-color: yellow;
max-width: 100%;
}
<div id="container">
<div id="right">
<div id="inside_right">
AAAAAAAAAAAAAAAAAAAAA
</div>
</div>
<div id="left"></div>
</div>
The problem is in "display". You use:
#inside_right{display: inline-block;}
And browser thinks that all the text inside this div is only one symbol.
you may use display: block and work with width of inside div.
This should help!
Lose the 'display: inline-block' from '#inside_right'. I don't see why you need it on '#right' either, but the property on '#inside_right' is tripping you up.
I need force 2 divs side by side as it below in example :
#colwrap{
overflow:hidden;
background-color: orange;
width:300px;
}
#colLeft {
height: 48px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
float: right;
}
//This is cool
<div id="colwrap">
<div id="colRight">icon1, icon2</div>
<div id="colLeft">Really long long long name of file.txt</div>
</div>
<br>
//But this is wrong :
<div id="colwrap">
<div id="colRight">icon1, icon2</div>
<div id="colLeft">Short name of file.txt</div>
</div>
//It should look like this, when text is shorter :
<div id="colwrap">
<div id="colLeft" style="float:left;">Short name of file.txt</div>
<div id="colRight" style="float:left">icon1, icon2</div>
</div>
fiddle : https://jsfiddle.net/2jno80ba/
!There is div contains name of file, on every end of file must be container for multiple icons, when text is larger, then container is fixed on end.1
you can use flex-box to achieve this.
check this pen out:
http://codepen.io/anon/pen/aOExbb
I just modified your css a bit:
#colwrap{
overflow:hidden;
background-color: orange;
width:300px;
display:flex;
flex-flow:row;
justify-content:flex-start;
}
#colLeft {
height: 48px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#colRight {
order:2;
background-color: #c3d0ff;
height: 48px;
float: right;
}
and here is a guide to flex-box
set the width of your divs as auto like #colleft{width:auto;}
https://jsfiddle.net/3v5jtcck/3/
in my custom file manager I want to show truncated filenames. It's important to see the beginning and the ending, so just overflow:ellipsisdoesn't do the work.
The tiles where the filename is shown can change their width (inside bootstrap columns). They are rendered with handlebars, so I can manipulate the String before it's rendered (witch a helper). After that, I don't want to use javascript anymore (e.g. eventlisteners which listen to resize)
My Idea: Splitting the string of the filename (regex) while the tile is rendered. So "long_filename_with_number_at_the_end_001.jpg" becomes ["long_filename_with_number_at_the_end_","001.jpg"].
Now I want to include these strings in two spans inside a parent div, while the right span is as large as needed. and the left span fills the rest. The left span shall get the text-overflow:ellipsis property.
I found this answer, which is quite near to mine. I changed a little bit, but I did't get what I expected.
* {
position: relaitve;
}
.outer {
width: 110px;
height: 22px;
border: 1px solid #ccc;
}
#colA {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
background:yellow;
}
#colB {
float:right;
background: pink;
}
<div class="outer">
<div id="colA">long_filename_foo_bar</div>
<div id="colB">001.jpg</div>
</div>
Just switch #colA and #colB in your html document.
<div class="outer">
<div id="colB">001.jpg</div>
<div id="colA">long_filename_foo_bar</div>
</div>
JSFiddle:
http://jsfiddle.net/skeurentjes/0nam7L2q/
Flex based solution:
.filename {
display: flex;
}
.filename .start {
flex-shrink: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.filename .finish {
flex-shrink: 0;
}
/* decorations */
.column {
width: 150px;
border: 1px solid #666;
overflow: hidden;
}
.filename:hover {
display: flex;
background: #ddd;
}
<div class="column">
<div class="filename">
<div class="start">long_filename_foo_bar_</div>
<div class="finish">001.jpg</div>
</div>
<div class="filename">
<div class="start">long_filename_foo_bar_</div>
<div class="finish">123001.jpg</div>
</div>
<div class="filename">
<div class="start">short_</div>
<div class="finish">001.jpg</div>
</div>
</div>
I want to build a container that contains an image on the left side and to its right there is supposed to some information about it, like a headline and some description.
I want the container to be able to expand between some minimum and maximum width dynamically. The images can also have different widths between two boundaries and if the container already has a maximum width, but the headline is longer, the headline should be shortened and there should appear some dots.
I found a way to shorten the headline, like here: http://jsfiddle.net/h0452569/
, but therefore I need to limit the width of the container next to the image. I tried this with the code below, but I can't find a way with CSS to dynamically limit the div width to not extend the container's div!
I would be very happy if anyone had an idea out there!
jsfiddle
HTML:
<div class="container">
<div class="image"><img src="https://farm6.staticflickr.com/5238/14184095861_d3787020c7_t.jpg" width="100" height="71" alt="alt_flickr-7"></div>
<div class="meta-container">
<div class="headline">Some very very very long headline</div>
<div class="description">Some description</div>
<div class="description">Other stuff</div>
</div>
<div style="clear:both"></div>
CSS:
.container {
min-width: 200px;
max-width: 250px;
max-height: 100px;
position: absolute;
border: 1px solid #666666;
white-space:nowrap;
}
.image {
float: left;
display: inline-block;
vertical-align: top;
}
.image img {
max-width: 100px;
max-height: 80px;
vertical-align: top;
}
.meta-container {
overflow: hidden;
text-overflow:ellipsis;
display: inline-block;
}
.headline {
width: 100%;
white-space:nowrap;
}
.description {
font-size:.8em;
}
In the example you refer to, those styles are added to the text element itself. In your design, the styles are given to the parent element.
Solution: add the styles to .headline instead of .meta-container.
.container {
min-width: 200px;
max-width: 250px;
max-height: 100px;
border: 1px solid #666666;
overflow: hidden;
}
.image {
float: left;
}
.image img {
max-width: 100px;
max-height: 80px;
vertical-align: top;
}
.headline {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.description {
font-size: .8em;
}
<div class="container">
<div class="image"><img src="https://farm6.staticflickr.com/5238/14184095861_d3787020c7_t.jpg" width="100" height="71" alt="alt_flickr-7"></div>
<div class="meta-container">
<div class="headline">Some very very very long headline</div>
<div class="description">Some description</div>
<div class="description">Other stuff</div>
</div>
</div>
<p>Next element</p>
In order to break the word use "word-wrap: break-word" in your .headline class, you also need to set a width (in px). For example:
.headline{
width:100px;
word-wrap: break-word;
}