I want to create something like this:
And this is what I tried:
.container {
width: 200px;
white-space: nowrap;
background-color: #E6E9F0;
border: solid 1px black;
vertical-align: top;
display: inline-block;
}
.left,
.right {
display: inline-block;
}
.right {
white-space: break-spaces;
margin: 0;
word-break: break-word;
}
.left {
float: left;
margin-right: 6px;
color: red;
}
<div class="container">
<span class="left">Text</span>
<span class="right">Very very veeeeeeeeeeeeeery veeeeeery very very very long text</span>
</div>
I couldn't figure out how to do it without inserting the first span in the second one, in my example I want both spans to be in the same hierarchy.
How can I solve this?
Why do you have white space nowrap on the container if you just want it to wrap normally? Remove that and all styles after your container apart from your red:
.container {
width: 200px;
background-color: #E6E9F0;
border: solid 1px black;
vertical-align: top;
display: inline-block;
}
.left {
margin-right: 6px;
color: red;
}
<div class="container">
<span class="left">Text</span>
<span class="right">Very very veeeeeeeeeeeeeery veeeeeery very very very long text</span>
</div>
Related
My goal is to let "header-title" and "content" control the "entity" div size - depending if title or content is horizontally larger, the entity fits width to the larger one, but also I would like to make "header-address" shrink to the visible horizontal area. If title and content is small I would like it to show only for example "0x5C9...", and also I want "header-right-side" to stay on the right side with static size. Can anyone help me to make the style working correctly?
.entity {
display: inline-block;
border: solid 1px blue;
}
.header {
width: 100%;
display: inline-block;
box-sizing: border-box;
border: solid 1px blue; display:flex; flex-direction:row;
}
.header-left-side {
display: inline-block;
flex-direction: column;
border: solid 1px red;
}
.header-right-side {
border: solid 1px red;
width: 120px;
}
.header-title {
border: solid 1px red;
}
.header-address {
border: solid 1px red;
text-overflow: ellipsis;
width: calc(100%);
/* Required for text-overflow to do anything */
white-space: nowrap;
overflow: hidden;
}
.content {
border: solid 3px green;
width: 500px;
}
<div class="entity">
<div class="header">
<div class="header-left-side">
<div class="header-title">
My contract title
</div>
<div class="header-address">
0x5C9cD4dDF6F1f4008C7Da7377451223F1503FAc6
</div>
<div class="header-address">
0x179397aabe842d4725bc8aa300772FB6D6969568
</div>
</div>
<div class="header-right-side">
<button>min</button><button>c</button><button>options</button>
</div>
</div>
<div class="content">
bbfffffffffbbfffffffffbbfffffffffbbfffffffffbbfffffffff
</div>
</div>
Remove 500px from width in .content, so it will not be fixed. Use flex-grow for the .header-left-side element.
Then, for the .header-address, you have to wrap its content in a <span>. Like this, you can use position relative and absolute, ellipsis and a max-width, so it will work as expected.
.entity {
display: inline-block;
border: solid 1px blue;
}
.header {
width: 100%;
box-sizing: border-box;
border: solid 1px blue;
display: flex;
flex-direction: row;
}
.header-left-side {
display: inline-block;
flex-direction: column;
border: solid 1px red;
flex-grow: 1;
}
.header-right-side {
border: solid 1px red;
width: 120px;
}
.header-title {
border: solid 1px red;
}
.header-address {
border: solid 1px red;
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;
overflow: hidden;
position: relative;
height: 18px; // required because of the absolute position of the span
}
.header-address span {
overflow: hidden;
position: absolute;
display: block;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
}
.content {
border: solid 3px green;
}
<div class="entity">
<div class="header">
<div class="header-left-side">
<div class="header-title">
My contract title
</div>
<div class="header-address">
<span>0x5C9cD4dDF6F1f4008C7Da7377451223F1503FAc6</span>
</div>
<div class="header-address">
<span>0x179397aabe842d4725bc8aa300772FB6D6969568</span>
</div>
</div>
<div class="header-right-side">
<button>min</button><button>c</button><button>options</button>
</div>
</div>
<div class="content"> bbfffffffffbbfffffffffbbfffffffffbbfffffffffbbfffffffff
</div>
</div>
This question already has answers here:
Setting a <button>'s display as table-cell
(6 answers)
Closed 4 years ago.
I'm trying to group an input and a button. Basically the button need to be on the same row as input with no space between them
Because I need to support IE9, I'm using display: table.
.container{
border: 1px red solid;
width: 35rem;
}
.input-group {
border-collapse: separate;
display: table;
position: relative;
}
.input {
position: relative;
z-index: 2;
float: left;
width: 100%;
font-size: .875rem;
line-height: 1.5;
margin: 0 ;
display: table-cell;
}
.button {
color: #fff;
background-color: #0b0b0b;
border: 0;
padding: .375rem .75rem;
text-align: center;
}
<div class="container">
<div class="input-group">
<input class="input">
<button class="button">Get Data</button>
</div>
</div>
I don't know why width:100% is there on the input. It will take whole width of parent space. I have removed it and its working.!
See the Snippet below:
.container{
border: 1px red solid;
width: 35rem;
}
.input-group {
border-collapse: separate;
display: table;
position: relative;
width:100%;
}
.input-group>div {
display: table-cell;
}
.input-group>div:first-child {
width: 100%;
}
.input {
position: relative;
z-index: 2;
width: 100%;
font-size: .875rem;
line-height: 1.5;
}
.button {
color: #fff;
background-color: #0b0b0b;
border: 0;
padding: .375rem .75rem;
text-align: center;
white-space: nowrap;
}
<div class="container">
<div class="input-group">
<div><input class="input"></div>
<div><button class="button">Get Data Dummy Text</button></div>
</div>
</div>
Update 1:
You can use calc to calculate the width of input text. Can I use?
Update 2:
To make it possible without button width, you might want to wrap both input and button in the div. And apply display:table-cell to both div.
You can test it here (as per the #LGSon's answer)
Try this, I added a position: absolute to button, let me know if that help!
.button {
color: #fff;
background-color: #0b0b0b;
border: 0;
padding: .375rem .75rem;
text-align: center;
position: absolute; /*Added*/
width: 100px; /*Added*/
height: 27px; /*Added*/
}
You can check it here
Is there some useful techniques?
Here is the fiddle
For text centering I tried to use this:
.wrapper div {
position: relative;
top: -8px;
}
To remove bottom canvas margin I tried to use this:
.wrapper canvas {
margin-bottom: -5px;
}
But I always try to avoid negative parameters.
Did you mean vertically align? Like this?
.wrapper {
border: 1px solid green;
display: inline-block;
}
.wrapper div {
border: 1px solid blue;
display: inline;
margin-left: 10px;
}
.wrapper canvas {
border: 1px solid red;
display: inline-block;
vertical-align: middle;
}
<div class="wrapper">
<canvas width="32" height="32"></canvas>
<div class="question">1234567890</div>
</div>
is this what you mean?
canvas {
float: left;
}
You can use this code for horizontally design
<style>
.wrapper {
border: 1px solid green;
float:left;
}
.demo_class{
display: inline-block;
float: left;
}
.demo_class .question{
height: 32px;
line-height: 32px;
}
<div class="wrapper">
<div class="demo_class">
<canvas id="null" width="32" height="32" style="border:1px solid red;"></canvas>
</div>
<div class="demo_class">
<div class="question">1234567890</div>
</div>
This question already has answers here:
Vertically centering a div inside another div [duplicate]
(24 answers)
Closed 7 years ago.
I'm trying to align some DIVs and failing to succeed.
<div class="row">
<div class="name"><h3>Some long name in here</h3></div>
<div class="info">
<div class="delete">X</div>
<div class="price">1000.00</div>
</div>
</div>
This is what I did so far https://jsfiddle.net/uvo2xdxk/
How can I make the .info div to be vertically aligned inside the row?
You can achieve this by display: table-cell;
Remove float from .name and .info and assign display: table-cell; vertical-align: middle; to them :)
.row {
display: table;
width: 450px;
background-color: yellow;
border: 1px solid blue;
}
.name {
background-color: red;
display: table-cell;
vertical-align: middle;
}
.delete {
background-color: green;
display: inline;
margin-right: 25px;
}
.price {
background-color: blue;
display: inline;
margin-right: 5px;
}
.info {
display: table-cell;
width: 150px;
vertical-align: middle;
background-color: ccc;
border: 1px solid green;
text-align: right;
}
<div class="row">
<div class="name">
<h3>Some long name in here</h3>
</div>
<div class="info">
<div class="delete">X</div>
<div class="price">1000.00</div>
</div>
</div>
https://jsfiddle.net/uvo2xdxk/5/
try this one
.row {
width: 450px;
background-color: yellow;
border: 1px solid blue;
display:table;
}
.row {
width: 450px;
background-color: yellow;
border: 1px solid blue;
display:table;
}
assign row display:table; property and its child display:table-cell; and vertical-align:middle; and also remove the float:right; from child
Add to your .info:
.info{
//...
position: absolute;
top: 50%;
transform: translate(0, -50%)
}
And your .row should set:
position: relative;
I had updated your jsfiddle
I have modified your css please check here
.name {
background-color: red;
display: inline;
float: left;
}
.delete {
background-color: green;
display: inline;
margin-right: 25px;
}
.price {
background-color: blue;
display: inline;
margin-right: 5px;
}
.row {
width: 450px;
background-color: yellow;
border: 1px solid blue;
height: auto;
vertical-align: middle;
overflow:hidden;
position:relative;
}
.info {
float: right;
display: inline-block;
background-color: ccc;
border: 1px solid green;
vertical-align: middle;
position:absolute;
right:0;
transform:translateY(-50%) ;
top:50%;
}
Please check if it works for you.
You can check with the below link.
https://jsfiddle.net/uvo2xdxk/7/
.name {
background-color: red;
display: inline;
float: left;
}
.delete {
background-color: green;
display: inline;
margin-right: 0px;
}
.price {
background-color: blue;
display: inline;
margin-right: 5px;
}
.row {
width: 450px;
background-color: yellow;
border: 1px solid blue;
display:table;
}
.info {
height:57px;
display: table-cell;
vertical-align:middle;
background-color: ccc;
border: 1px solid green;
top: 25%;
}
I have been trying to make a line join two words.
Sentence 1 would be on the left and no 2 on the right.everything should be on the same line.
I want the line to be flexible and adjust its width when the browser is re sized, and have so far failed miserably to do this.
It would be similar to this :
see jsFiddle
<h1>Heading</h1>
<h1>This is a longer heading</h1>
CSS
h1 {
overflow: hidden;
text-align: center;
}
h1:before,
h1:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h1:before {
right: 0.5em;
margin-left: -50%;
}
h1:after {
left: 0.5em;
margin-right: -50%;
}
but with only one line joining the words.
Is this what you're after?
Live demo
HTML:
<div class="header">
<div class="headerPart1">Heading</div>
<div class="headerPart2">This is a longer heading</div>
</div>
CSS:
.header {
overflow: hidden;
text-align: center;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
vertical-align: middle;
}
.headerPart1, .headerPart2 {
display: inline-block;
clear: none;
}
I guess this is what you are looking for: Is this http://jsfiddle.net/gSsGy/1/
I've added a width: 50% to the h1 element and then floated it to left.
Demo : LINK
just add:
.header {
overflow: hidden;
text-align: center;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
vertical-align: middle;
}
h1{
display: inline-block;
clear: none;
}
and this div before h1:
<div class="headercontent">