smoksnes
Reputation: 10851
Make absolute positioned element expand to the left
I want to show a list of elements outside of it's containing element.
It currently looks like this, which is fine if there was only one element (row 2). But when I have several elements they should move to the left instead of moving to the right.
The picture below is what I want:
The order isn't that important. What is important is that they should expand to the left, instead of expanding to the right. The numbers (1,2,3,4) should never be placed above the "table". There can be X number of "floating items", and I don't want to hard code it. Below is a snippet with all relevant HTML.
ul.items.table-style > li {
padding: 2px 5px 4px 5px;
border: 1px solid #dddddd;
margin-top: 0;
}
ul.items.table-style {
margin-bottom: 20px;
}
ul.items {
list-style: none;
margin-left: 0;
padding-left: 0;
}
ul.items.table-style > li ul.left-outside {
position: absolute;
margin-left: -20px;
background-color: blue;
list-style-type: none;
padding: 0;
}
ul.items.table-style > li ul.left-outside li {
display:inline-block;
width: 10px;
background-color:grey;
color:yellow;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3"> <!-- Added just to shrink the list in this example -->
<ul class="items table-style">
<li class="row">
<ul class="left-outside">
<li>1</li>
<li>2</li>
</ul>
<div class="col-xs-4">Col 1</div>
<div class="col-xs-4">Col 2</div>
<div class="col-xs-4">Col 3</div>
</li>
<li class="row">
<ul class="left-outside">
<li>1</li>
</ul>
<div class="col-xs-4">Col 1</div>
<div class="col-xs-4">Col 2</div>
<div class="col-xs-4">Col 3</div>
</li>
<li class="row">
<ul class="left-outside">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="col-xs-4">Col 1</div>
<div class="col-xs-4">Col 2</div>
<div class="col-xs-4">Col 3</div>
</li>
<li class="row">
<ul class="left-outside">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="col-xs-4">Col 1</div>
<div class="col-xs-4">Col 2</div>
<div class="col-xs-4">Col 3</div>
</li>
</ul>
</div>
</div>
</div>Upvotes: 0
Views: 417
Answers (3)
Banzay
Reputation: 9470
You need to define right: 100% to make right edge of container on the left of parent.
ul.items.table-style > li {
padding: 2px 5px 4px 5px;
border: 1px solid #dddddd;
margin-top: 0;
}
ul.items.table-style {
margin-bottom: 20px;
}
ul.items {
list-style: none;
margin-left: 0;
padding-left: 0;
}
ul.items.table-style > li ul.left-outside {
position: absolute;
right: 100%;
width: 30%;
background-color: blue;
list-style-type: none;
padding: 0 5px;
text-align: right;
}
ul.items.table-style > li ul.left-outside li {
display:inline-block;
background-color:grey;
color:yellow;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1"> <!-- Added just to shrink the list in this example -->
<ul class="items table-style">
<li class="row">
<ul class="left-outside">
<li>1</li>
<li>2</li>
</ul>
<div class="col-xs-4">Col 1</div>
<div class="col-xs-4">Col 2</div>
<div class="col-xs-4">Col 3</div>
</li>
<li class="row">
<ul class="left-outside">
<li>1</li>
</ul>
<div class="col-xs-4">Col 1</div>
<div class="col-xs-4">Col 2</div>
<div class="col-xs-4">Col 3</div>
</li>
<li class="row">
<ul class="left-outside">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="col-xs-4">Col 1</div>
<div class="col-xs-4">Col 2</div>
<div class="col-xs-4">Col 3</div>
</li>
<li class="row">
<ul class="left-outside">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="col-xs-4">Col 1</div>
<div class="col-xs-4">Col 2</div>
<div class="col-xs-4">Col 3</div>
</li>
</ul>
</div>
</div>
</div>Upvotes: 2
Andrei Fedorov
Reputation: 3977
Use transform: translate() instead of margin. he expects to offset the size of the self element.
ul.items.table-style > li {
padding: 2px 5px 4px 5px;
border: 1px solid #dddddd;
margin-top: 0;
}
ul.items.table-style {
margin-bottom: 20px;
}
ul.items {
list-style: none;
margin-left: 0;
padding-left: 0;
}
ul.items.table-style > li ul.left-outside {
position: absolute;
transform: translate(-100%, 0);
background-color: blue;
list-style-type: none;
padding: 0;
}
ul.items.table-style > li ul.left-outside li {
display:inline-block;
width: 10px;
background-color:grey;
color:yellow;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3"> <!-- Added just to shrink the list in this example -->
<ul class="items table-style">
<li class="row">
<ul class="left-outside">
<li>1</li>
<li>2</li>
</ul>
<div class="col-xs-4">Col 1</div>
<div class="col-xs-4">Col 2</div>
<div class="col-xs-4">Col 3</div>
</li>
<li class="row">
<ul class="left-outside">
<li>1</li>
</ul>
<div class="col-xs-4">Col 1</div>
<div class="col-xs-4">Col 2</div>
<div class="col-xs-4">Col 3</div>
</li>
<li class="row">
<ul class="left-outside">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="col-xs-4">Col 1</div>
<div class="col-xs-4">Col 2</div>
<div class="col-xs-4">Col 3</div>
</li>
<li class="row">
<ul class="left-outside">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="col-xs-4">Col 1</div>
<div class="col-xs-4">Col 2</div>
<div class="col-xs-4">Col 3</div>
</li>
</ul>
</div>
</div>
</div>Upvotes: 1
VilleKoo
Reputation: 2854
You can add transform: translateX to your .left-outside classes
ul.items.table-style > li ul.left-outside {
position: absolute;
margin-left: -20px;
background-color: blue;
list-style-type: none;
padding: 0;
transform: translateX(-100%);
}
ul.items.table-style > li ul.left-outside li {
display:inline-block;
width: 10px;
background-color:grey;
color:yellow;
transform: translateX(-100%);
}
Upvotes: 1
Related Questions
- CSS Absolute position on the right covers other elements
- Make a DIV expandable
- How to Keep element absolute at their location bootstrap 3
- right: 0 won't work with absolute positioning
- Absolute positioning with Bootstrap
- How do i properly position absolute divs within twitters bootstrap css framework
- with bootstrap, adding position absolute changes width of element
- Absolute position element in bootstrap3 - force width to be the same as container
- CSS margin when element inside has position absolute
- align elements to the left