I am trying to append a tooltip to a list/div block of elements - but these elements are set at 100% width. I'd like to have it so the tool tip is only appearing a few px away from the last word in the list/sentence.
Doing it html + css only, you need to wrap each line in a div, like
.gray-container {
display: flex;
flex-direction: column;
width: 100%;
background: red;
}
.line {
display: inline-block;
position: relative;
}
.tooltip {
display: inline-block;
position: absolute;
background: black;
width: 30px;
height: 20px;
margin-left: 10px;
}
<div class="gray-container">
<div class="line"><input type="radio">None<div class="tooltip"></div></div>
<div class="line"><input type="radio">Two</div>
<div class="line"><input type="radio">Three</div>
<div class="line"><input type="radio">Four</div>
</div>
Now for demo purposes and because i don't have any idea of the methods you're using to create the tooltips since you didn't post your code i'm using a div with class="tooltip", but this solves your question of the div being 100%.
Related
In the example below I'm trying to add some inline input range elements that align with the line but also align with the right edge of the outer div. In the actual site the html is code that's been run through prettify so it's nothing but <span> elements inside a <pre> element so whitespace and in particular, linefeeds, is relevant.
In any case I insert these <input type="range"> elements wrapped by 2 divs and I'm trying to get them to align to the content in the same line but on the right of the outer container.
I haven't actually found a solution. Originally I had a normal font size and if I added some extranous content inside the .holders things would appear to align but in reality once I increased the font size it showed they were not actually aligning.
Is there some way to fix this?
I get that normally you might do something like this with table (separate column for the sliders) or a flexbox but that would require parsing all the code to find the linebreaks and then generating a bunch of new html.
.outer {
position: relative;
background: pink;
padding: 1em;
width: 200px;
}
.holder {
display: inline-block;
}
.holder>div {
position: absolute;
display: inline-block;
right: 0;
}
.holder input {
position: absolute;
display: inline-block;
right: 1em;
}
<h1>test</h1>
<div class="outer">
<div>
<span>foo: </span>
<div class="holder">
<div>
<input type="range">
</div>
</div>
</div>
<div>
<span>bar: </span>
<div class="holder">
<div>
<input type="range">
</div>
</div>
</div>
</div>
Note: the code above shows the issue but the real code is whitespace sensative pre and spans which are hard to read. Here it is.
body {
font-size: 35pt;
}
.outer {
position: relative;
background: pink;
padding: 0.2em;
width: 300px;
}
.holder {
display: inline-block;
}
.holder>div {
position: absolute;
display: inline-block;
right: 0;
}
.holder input {
position: absolute;
display: inline-block;
right: 1em;
}
<pre class="outer"><span>foo: </span><div class="holder"> <div><input type="range"></div></div></div>
<span>bar: </span><div class="holder"><div><input type="range"></div></div>
</pre>
As I mentioned above the <pre> and <span> are generated, after which I insert the range inputs.
Yet another wrikle is that on the actual site the <pre> section gets scrollbars if a line is too long (just like S.O. code area) but in that case I still want the input areas at the right of the visible area (if you haven't scrolled).
body {
font-size: 35pt;
}
.outer {
position: relative;
background: pink;
padding: 0.2em;
width: 300px;
overflow: auto;
}
.holder {
display: inline-block;
}
.holder>div {
position: absolute;
display: inline-block;
right: 0;
}
.holder input {
position: absolute;
display: inline-block;
right: 1em;
}
<pre class="outer"><span>longlongline: </span><div class="holder"> <div><input type="range"></div></div></div>
<span>bar: </span><div class="holder"><div><input type="range"></div></div>
</pre>
A screenshot of the final result will probably help.
Normally the sliders are inline (no CSS apart from display: inline-block) but if the window is not wide enough the sliders would get pushed off. So, instead I make them transparent and set them to use absolute positioning so they don't get pushed off. This way you can still both read the code and interact with the sliders.
They appear to align ATM but if you go to the page and make sure your window is less than 450px wide and set the prettyprint.pre font size to say 15pt then you'll see the alignment is just luck and that they aren't actully being "aligned" it's just certain sizes of various things happen to make them appear aligned.
I fully understand they might not actually be a solution except to parse the code and separate each line into its own container but if possible I'd like to use the correct CSS (assuming it exists) to make them align.
.outer {
background: pink;
padding: 1em;
width: 200px;
}
.holder {
display: inline-block;
vertical-align: middle;
}
.holder>div {
display: inline-block;
}
.holder input {
display: inline-block;
}
you can try to add "vertical-align:middle"
.outer {
position: relative;
background: pink;
padding: 1em;
width: 200px;
}
.outer>div{
position: relative;
display: inline-block;
}
span{
vertical-align:middle;
}
.holder {
vertical-align:middle;
display: inline-block;
}
.holder>div {
position: relative;
display: inline-block;
right: 0;
}
.holder input {
position: relative;
display: inline-block;
}
<h1>test</h1>
<div class="outer">
<div>
<span>
foo:
</span>
<div class="holder">
<div>
<input type="range" />
</div>
</div>
</div>
<div>
<span>
bar:
</span>
<div class="holder">
<div>
<input type="range" />
</div>
</div>
</div>
</div>
I want to center .donut-graphs inside .dashboard horizontally, so the space between the right edge of the sidebar and the left edge of .donut-graphs is the same as the space from the right edge of .donut-graphs and the right edge of the screen. I have managed to do so, but I had to remove position: fixed from .navbar. The problem is, I can't do that because my sidebar has to stay on top of the screen when you scroll up/down, and with position: fixed on .navbar, the graphs aren't centered properly.
HTML:
<div class="container">
<div class="navbar">
</div>
<div class="content">
<div class="dashboard">
<div class="donut-graphs">
<div class="dashboard-income">
Div 1
</div>
<div class="dashboard-overall">
Div 2
</div>
<div class="dashboard-spent">
Div 3
</div>
</div>
</div>
</div>
</div>
CSS:
body {
margin: 0;
}
.container {
display: flex;
align-items: stretch;
max-width: 100%;
min-height: 100vh;
}
.navbar {
background-color: #ddd;
flex: 0 0 230px;
position: fixed;
height: 100vh;
width: 230px;
}
.content {
flex: 1;
overflow-x: auto;
text-align: center;
}
.donut-graphs {
display: inline-flex;
border: 1px solid;
margin: 50px auto 0;
position: relative;
text-align: left;
}
.dashboard-income,
.dashboard-overall,
.dashboard-spent {
height: 256px;
width: 357px;
display: inline-block;
}
.dashboard-income {
background-color: green;
}
.dashboard-overall {
background-color: blue;
}
.dashboard-spent {
background-color: red;
}
How can I overcome the issue?
Demo
position: fixed puts element above everything. That element won't attach to any element in body because it is the way that works. It only becomes dependent of viewport
What you want to achive could be done with position: absolute but parent (whose child you want to center) has to be position: relative for this to work.
Read more about positioning elements in css here
.content { padding-left:230px; }
Should do the trick.
Assigning your navbar a fixed position takes it out of the document flow, so when centering your donut graphs the browser doesn't take the navbar into account.
Giving the .content element a padding equivalent to the width of the navbar makes up for this.
The only problem with this approach is that if .navbar changes dimensions, you'll need to change the padding on .content to match.
I am attempting to tile a webpage with div elements of various sizes. However, I am running into an issue with once x number of div elements have filled the width of the screen the following div is placed below the previous 'row', rather than being floated to fit into space between elements in the previous 'row'. The code below better demonstrates what I mean; I'd like the 'game' div to be floated to fit into the space above where it is currently positioned.
h1 {
color: white;
}
.center {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.container {
display: inline-block;
}
.default {
margin: 1em;
float: left;
}
/* For hover text */
.hover_img {
width: 100%;
height: 100%;
position: relative;
float: left;
}
.hover_img h4 {
color: white;
}
.hover_img:hover img {
opacity: .2;
}
.hover_img:hover .center_text {
display: block;
}
.center_text {
position: absolute;
top: 50%;
left: 0;
display: none;
font-weight: bold;
text-align: center;
}
img {
margin: 0;
}
.rectangle-tile-horizontal {
height: 15em;
width: 35em;
}
.red {
background-color: rgba(255, 63, 63, 0.8);
}
#game, #game img {
width: 30em;
height: 30em;
}
#app, #app img {
width: 40em;
height: 35em;
}
<div class="container">
<div class="rectangle-tile-horizontal red center default">
<h1><b>Projects</b></h1>
</div>
<div class="rectangle-tile-horizontal hover_img default" id="app">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
<div class="center_text"><h4>Web App</h4></div>
</div>
<div class="hover_img default" id="game">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
<div class="center_text"><h4>Breakout</h4> </div>
</div>
I'm afraid what you want to do is actually re-order your divs to create a space-filling layout. To the best of my knowledge, using only CSS for this is difficult, if not outright impossible.
I suggest you take a look at this SO post, or perhaps even the Bulma framework is what you want.
If, however, you move away from re-ordering the containers automagically and instead look towards a solution that elastically adapts the width of each container to fill the available space while maintaining its "order" (first, second, third), I am sure CSS will be a viable solution. If you require assistance, please use the search or ask anew.
Create a style for your div class or id like
.className
{display:inline;}
and use it in your each div
Hope this will help you
An example of this
http://jsfiddle.net/JDERf/
Using Bootstrap 3.0.3, I'm attempting to center both horizontally and vertically a div with a hard-coded width and height. The JSFiddle has the latest code in it, also reported here to be consistent with SO's rules regarding JSFiddle.
http://jsfiddle.net/alex_kurilin/pNYg9/
The HTML:
<div class="text-center full-height">
<div class="inline full-height">
<div class="fake-table full-height">
<div class="fake-table-cell full-height">
<div class="content fake-table">
<div class="fake-table-cell">foobar</div>
</div>
</div>
</div>
</div>
</div>
The CSS:
html, body {
height: 100%;
}
.fake-table {
display: table;
}
.fake-table-cell {
display: table-cell;
vertical-align: middle;
}
.inline {
display: inline-block;
}
.text-center {
text-align: center;
}
.full-height {
height: 100%;
}
.content {
background-color: grey;
width: 300px;
height: 150px;
}
What I'm showing in the JSFiddle appears to "work", however for some reason it adds a vertical scrollbar. What's interesting is that changing the body's font-size, font-family and line-height appears to affect the scrollbar, and thus I imagine this has something to do with the height: 100% and the inline-block div.
I'd love a pointer on two on how to make this specific layout happen correctly, as I suspect I'm doing this the hard way.
why not just use content element and remove others:
.content {
background-color: grey;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -75px;
width: 300px;
height: 150px;
}
Why in the following example the height of the inner div is not like wrapper's div ?
Live demo here.
HTML:
<div class="wrapper">
<div class="inner">Hello</div>
<div class="inner">Peace</div>
</div>
CSS:
.wrapper {
background-color: #000;
min-height: 100px;
}
.inner {
display: inline-block;
background-color: #777;
height: 100%;
}
If I change min-height: 100px; to height: 100px;, then it looks OK. But, in my case, I need min-height.
Some properties in CSS inherit the value of the parent automatically, some don't. Minimum height must be explicitly stated when you want it to inherit the parent's value:
min-height: inherit;
I believe this is the output you want: http://jsfiddle.net/xhp7x/
.wrapper {
display: table;
background-color: #000;
height: 100px;
width: 100%;
}
.wrapper2 {
height: 100%;
display: table-row
}
.inner {
height: 100%;
display: inline-block;
background-color: #777;
margin-right: 10px;
vertical-align: top;
}
Had to add a second DIV wrapper2.
Tested on chrome and firefox.
You want to specify both, CSS height is not the same as min-height. You want to specify both height and min-height.
height = When used as a %, this is a percent of the window height
min-height = as you drag the window smaller, the DIV with a % height will continue to reduce until it hits the min-height
max-height = as you drag the window larger, the DIV with a % height will continue to increase until it hits the max-height
http://jsfiddle.net/gpeKW/2/ I've added a sample here with borders.
Slight change to the answer from your comment, you are pretty much correct from your original CSS.
The below HTML will have a minimum div height of 100px. As the size of the inner DIV increases, the wrapper will automatically expand. I have demonstrated this by adding a style attribute to the first inner class.
<html>
<head>
<title>Untitled Page</title>
<style type="text/css">
.wrapper
{
background-color: #000;
min-height:100px;
}
.inner
{
display: inline-block;
background-color: #777;
height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner" style="height:200px">test</div>
<div class="inner">Peace</div>
</div>
</body>
</html>
I know one way to set the div child height the same as its parent div height is to use relative for the parent and absolute position for the child.
.wrapper {
background-color: #000;
min-height: 100px;
position: relative;
}
.inner {
display: inline-block;
background-color: #777;
position: absolute;
height: 100%;
}
But this way will cause some problem, you have to adjust the child element so that it will be displayed properly
P/s: Why don't you set it to the same height as its parent height? I mean, 100% is not x%... just thinking..
Anyway, happy coding ;)
I certainly joined answers and the result using 'min-height' for the -main HTML tag- (class = "main-page-container"):
HTML:
<div id="divMainContent">
<!-- before or after you can use multiples divs or containers HTML elements-->
<div> </div>
<div> </div>
<main class="main-page-container">
<div class="wrapper">
1
<div class="wrapper2">
2
<div class="child">3</div>
</div>
</div>
</main>
<!-- before or after you can use multiples divs or containers HTML elements-->
<div class="footer-page-container bg-danger" > more relevant info</div>
</div>
CSS:
/*#region ---- app component containers ---- */
#divMainContent {
height: 100%;
display: flex;
flex-direction: column;
/*optional: max width for screens with high resolution*/
max-width: 1280px;
margin:0 auto;
}
.main-page-container {
display: inline-table;
height: 70%;
min-height: 70%;
width: 100%;
}
.footer-page-container{
flex:1; /* important in order to cover the rest of height */
/* this is just for your internal html tags
display: flex;
flex-direction: column;
justify-content: space-between; */
}
/*#endregion ---- app component containers ---- */
.wrapper {
background: blue;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
}
.wrapper2 {
width: 90%;
margin: auto;
background: pink;
display: flex;
flex-wrap: wrap;
gap: 20px;
height: 90%;
}
.child {
min-height: 100px;
min-width: 300px;
background: orange;
position: relative;
width: 33%;
}