So, I have a list of items which are displayed inline-block. What I'ld like is when you click on a cell, the lines under it go down. Problem is, simply adding a margin-bottom won't work, like showed with this fiddle.
See, the one which should be opened is left alone on her line. What I'd like is something like that:
Any idea?
The default alignment of inline-block elements is baseline, meaning tall and short items will align the bottom of the text line. If you give the <li> elements vertical-align: top, i believe you get what you want;
li {
list-style-type: none;
display: inline-block;
width: 20px;
height: 20px;
background-color: red;
margin-top: 4px;
vertical-align: top; /* added */
}
http://jsfiddle.net/j93H5/3/
you need to add vertical alignment for your margin-bottom and then a margin-top to vertically space your lis:
vertical-align: top;
margin-top: 4px;
http://jsfiddle.net/j93H5/1/
as #Bergi said, splitting into multiple lists is probably the least sloppy way to do this and most likely the more appropriate method, but we don't really know the context.
You can use pseudo-elements to push elements out of the way:
li.space:after {
content: ' ';
display: inline-block;
height: 20px;
}
View jsfiddle
Related
I want to make a div scrollable when its touching the bottom div.
I tried this:
margin-bottom:30px;
position: relative;
overflow: auto;
but it didn't work.
I created a fiddle tho show you my problem:
https://jsfiddle.net/wp3wvuj2/1/
For explanation: When you type in in a input field a new field is added to the div (This function is simplified). I want that before the input fields touch the element below (the START-div) it gets scrollable (overflow: auto).
Somebody have an idea?
Edit:
I noticed that nobody understands my problem.
I'll try to explain it better:
I have list where players add their names. The list has minimum 4 players maximum ∞.
The start buttonis placed at the bottom. The problem is in a iphone 5 it looks like this:
And now if i would add another player input field it would Overlap with the START-Button. Thats the reason why I want it scrollable now. I already get that work with a fixed height, but i want it responsive!
Because on a iPad for example it looks like this:
And I want prevent an overlap with the start button like this:
So it should get scrollable before it overlaps (dependent on the display size).
Updated JS fiddle, try this, i have updated CSS part in your code
https://jsfiddle.net/wp3wvuj2/2/
.main_input {
width: 209px;
top: 70px;
margin: auto;
margin-bottom:30px;
/* position: relative */
overflow: auto;
height:216px; //Give some height always to apply overflow auto
}
.main_start {
width: 100%;
margin: auto;
/* position: absolute */ //Not required
bottom: 20px;
font-family: Pamela;
font-size: 36px;
text-align: center;
}
I've only changed the styles on class main-input
.main_input {
width: 226px;
height: 234px;
top: 70px;
margin: auto;
margin-bottom:30px;
position: relative;
overflow-y: auto;
}
EDIT:
Please note for this solution to be able to work, I needed to remove the Top and Bottom positions of some elements as they were breaking the layout. Please use Margins or Paddings to get that styling you desire.
This now works to scroll once the space runs out on the page.
https://jsfiddle.net/wp3wvuj2/5/
I am using bootstrap-treeview to try to make a nice treeview within my MVC project. This control is available on NuGet so its easy to get started with it. The left hand div shows the tree and the right hand div shows the content of each element when clicked:
<body>
<div id="tree" style="position:absolute; width: 20%; height: 100%; overflow: scroll"></div>
<div id="content" class="list-group-item node-tree" style="position: absolute; left: 20%; width: 80%; height: 100%">This is where content goes once you click on a file or folder element.</div>
</body>
There is a slight problem, though. The content of the div with the ID = tree gets cut off:
Ideally, I would like these list elements to overflow to the right, beyond the size of the div with the ID = tree, as you can tell, because I have set overflow: scroll, so I do not want any text to wrap to a new line.
On runtime, it appends list elements as follows...
These list elements seem to have the following CSS:
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}
I have tried adding white-space: nowrap; to this CSS, which makes the text do what I want (and overflow with a scrollbar), but the background and border of each list element stay at the width of the parent (which is not what I want; I want them to also overflow all scrollable width just like I did with the text)!
What can I do to make each element of this list properly overflow past the bounds of the parent div they all exist under?
Edit: I've tried putting overflow:visible on all parent levels as well, but it did not work. It removed the vertical scroll bar and kept all list item background borders still restricted to the width of the tree div. I also found that setting width = 10000px on the .list-group-item CSS partially gives me what I want as well, but obviously this makes the backgrounds too wide and the scroll bar becomes too elongated. I want the width of all list elements to be equal to the width of the widest overflowing content.
I figured it out. I had to change the display to table-row-group and I had to add white-space: nowrap:
.list-group-item {
position: relative;
display: table-row-group;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
white-space: nowrap;
}
Add overflow:visible to the parent element(s). You may need this at multiple levels, as each parent element could potentially restrict the content.
I want to create a tool-tip that will have flexible size according to the text length. For example, I have the following tool-tip:
Now, for this text, the width is OK (fixed in the css). But, when I have a very smaller string:
the tool-tip looks too big. My question is: how do I make the tool-tip flexible according to the text length? Is there a way to do this in the .css maybe? I work with d3.js, so an answer from this point of view would be acceptable too.
Thank you in advance for your answer!
EDIT: I use this tutorial in order to accomplish my goal, my code is something like that (not exactly, but close enough). It would be best to provide an answer based on that example, since my code is too big to post here.
You can do that with CSS, just use min-width and max-width together instead of width
Also you can simply remove width from your CSS or change it into width: auto;
the css for the tooltops looks like this (according to your link)
div.tooltip {
position: absolute;
text-align: center;
width: 60px; /* Width and Height are fixed */
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
Try removing the width property of the CSS. Above you can see that this is set to a fixed-width of 60 pixels.
This may be best CSS for this. It will adjust its size according to text inside it
div.tooltip{
position: absolute;
white-space: pre-line;
pointer-events: none;
visibility: visible;
background-color:White;
text-align: left;
padding: 5px 0;
display: block;
z-index: 1;
border: 0.5px solid black;
}
I am trying to slide up a list element and reveal more content which appears to be hidden "under" the list element, but when the animation occurs all other list elements jump down slightly. When I remove the content under the list element but leave the animation everything works fine.
How can I make this work without effecting the other elements in the list?
It is difficult for me to explain this, so here is a fiddle of what I am talking about: http://jsfiddle.net/YNBxz/1377/
click on any one of the blocks in the view section to see the animation.
If you comment out the jQuery(this).children('.block-content').slideToggle(500); you can see what it SHOULD look like during the animation.
You need to change the positioning of .block-content to position: absolute. That will fix the sliding of the other li elements. Then, to fix the positioning of the .block-content, remove width: 100%, change the right positioning to right: 0, and add top: 45px. The css for .block-content is then:
.block-content {
font-size: 12px;
font-family: Helvetica, sans-serif;
display: block;
background: #333;
padding: 10px;
position: absolute;
top: 45px;
right: 0px;
height: 120px;
}
Also, if you want the bottom of .block-content to line-up with the bottom of the li's, change the jquery to animate to 140px, not 115px.
You can see the results: http://jsfiddle.net/YNBxz/1379/
So I have this navbar I'm making; I have a Jsfiddle to demonstrate. If you hover over an element, the sublist appears, but if you look carefully, its left edge is just 1 pixel in front of the navbar element that summoned it.
Is there any CSS rule I can add to get rid of this i.e. move the sublist back a pixel? I know it is possible to achieve this with JS (get every navbar element, calculate its distance from the left, take its sublist and give it a left value of one less than that of the element), but for now I'd like to avoid it for now.
I'd prefer a CSS solution if possible, but of course it it isn't, please tell me and, if you can, provide a JS alternative.
jus add margin-left: -1px; to your #nav li:hover ul to push it 1 pixel to the left.
see it working here.
Negative margins to the rescue
http://jsfiddle.net/pZy8V/4/
#nav li:hover ul {
display: block;
position: absolute;
margin: 0 0 0 -1px; /* margin: 0; */
list-style: none;
padding: 0;
}
#nav li:hover li {
float: none;
}
If you remove all of your borders the problem goes away. So the answer may lie in redesigning your HTML/CSS border usage
See this revided JSFiddle
If you just want a quick and dirty fix you can add the following to your original CSS
#nav li {
float: left;
position:relative;
left:-1px;
}