I have a function that creates a grid of divs that are generated and sent to a container div when the document loads (or when the user resets it). Everything seems to be about the way that I like it, except that there is a gap between each "row" of divs. I'd like it to be a perfect grid, with each square flush with each other. I've tried modifying borders, outlines, padding and the like with no success. I'm convinced there has to be a way to make this work that is less complicated than I am making it out to be. jsfiddle example: https://jsfiddle.net/psyonix/1g9p59bx/84/
var d = ("<div class='square'></div>");
function createGrid(numSquares) {
var area = $('#g_area');
var n = 0;
var squareSize = (area.innerWidth() / numSquares);
for (var i = 0, len = (numSquares * numSquares); i < len; i++) {
area.append(d);
}
$('.square')
.height(squareSize)
.width(squareSize)
#g_area {
background-color: #C8C8C8;
position: relative;
width: 580px;
height: 600px;
border-radius: 5px;
margin: 0 auto;
overflow: hidden;
}
.square {
display: inline-block;
position: relative;
background-color: #C8C8C8;
outline-color: #000000;
outline-width: 1px;
outline-style: solid;
}
You just need to either remove a outline-width from .square or give it some 2px or 3px value.
.square {
display: inline-block;
position: relative;
background-color: #C8C8C8;
outline-color: #000000;
outline-width: 3px; //or 2px or just remove it as I have done in my DEMO
outline-style: solid;
}
DEMO HERE
You are using inline-block on the square elements, so the square elements will act like the words inside a paragraph, and will be laid out as in lines of a sentence. These lines will have line-height just as in normal sentences, so one way is to reset the line-height of the parent holding these square words.
#g_area {
background-color: #C8C8C8;
position: relative;
width: 580px;
height: 600px;
border-radius: 5px;
margin: 0 auto;
overflow: hidden;
line-height: 0px;
}
This way you can JAM the lines as you are not exactly looking for lines as in normal sentences.
Another way is to avoid using the inline-block and using block and float to attain the same. Block display doesn't have the issue of line-height or white-spaces between elements.
.square {
display: inline-block;
position: relative;
background-color: #C8C8C8;
outline-color: #bc0000;
outline-width: 1px;
outline-style: solid;
display:block;
float:left;
}
Related
Using this codepen, I want to show the tooltip that can auto-resize. What I mean is, if there is a long text to be displayed as the tooltip message, can the tooltip box be resize to adjust the message in multiple lines? I know that ideally tooltip is supposed to be a few words at best, but still, I'm just curious to explore it.
Current:
Expected
Should I change the displayattribute? I tried changing to flex, inline, inline-flex, etc. but none worked. Even tried with width: auto but I think that will require some more logic.
body {
font-family: sans-serif;
}
[data-title] {
outline: red dotted 1px; /*optional styling*/
font-size: 30px; /*optional styling*/
position: relative;
cursor: help;
}
[data-title]:hover::before {
content: attr(data-title);
position: absolute;
top: calc(100% + 10px);
display: inline-block;
padding: 3px 6px;
border-radius: 2px;
background: #000;
color: #fff;
font-size: 12px;
font-family: sans-serif;
word-break: break-word;
max-width: 150px;
}
[data-title]:hover::after {
content: '';
position: absolute;
bottom: -10px;
left: 8px;
display: inline-block;
color: #fff;
border: 8px solid transparent;
border-bottom: 8px solid #000;
}
<h1>Styling html title tooltip</h1>
<span data-title="Here is some extra long text that should break the line">Hover me</span>
I changed bottom: -26px; to top: calc(100% + 10px);.
I removed white-space: inherit;.
I added word-break: break-word;.
I added max-width: 150px;.
Currently the width of the tooltip is limited by either max-width or the width of the span. You could add min-width but that could leave a lot of blank space if the text isn't long enough.
These changes should position the tooltip and the little arrow pointer thingy correctly so the neither overlap.
Change from no wrap to wrap
[data-title]:hover::before {white-space: wrap; }
could you please tell me how to remove margin from drop down as shown in image . I need to display
dropdown down as shown in image .But there is some margin coming from some where .How to make dropdown same as shown in image
here is my code
http://codepen.io/anon/pen/BoNwqa
/* Styles here */
.dropdown_border{
border: 1px solid #e4e5e7;
height: 35px;
text-align:center;
color:blue;
}
.dropdown_padding {
padding: 2em 3.5em 0em 3.5em;
}
.dropdown_image_class {
height: 35px;
width: 35px;
margin-top: -6px;
border: 1px solid #e4e5e7;
float: right;
}
Use the following CSS property:
.dropdown_border {
padding: 5px 0 !important;
}
EDIT
As Praveen suggested, Use this instead:
.col.dropdown_border {
padding: 5px 0;
}
The .col has a padding of 5px. Instead of targetting all the .col, give this:
.col.dropdown_border {
padding: 5px 0;
}
So that it affects only the .dropdown_border class. This way, the .col with the class .dropdown_border has padding both at top and bottom and not on the sides.
Hope this helps.
.col.dropdown_border {
padding: 5px 0;
border-right: 0px;
}
By the way, the dropdown image already got border left and right.
For my editor I need a vertical line to run from the bottom of draggableNode (the blue box) to the bottom of the page. When the text inside of the div draggableNode exceeds one line, the vertical line is shifted down as well, see below:
I can see that the vertical line is dependent on the end of the text whereas I would like it to be dependent on the bottom of draggableNode, regardless of how many lines the text is. How could I go about doing that?
CSS
.draggableNode {
width: 100px;
height: 36px;
margin: 0;
margin-left:15px;
position:absolute;
background-color: #29e;
color: white;
z-index:9995;
border-radius: 0.5em;
padding: .5em;
}
.verticalLine {
border-left: 3px solid #000000;
position: relative;
margin-left:50px;
z-index:-1;
height: 613px;
width:0;
margin-top: 8 px;
}
I am not sure why my dropdown-menu, and my drop-down list width is not perfectly align. I set both of their width to be: width:300px;
It looks like this right now :
Here is what I have in JSFiddle
Since your .dropdown is inside the container #dd, its initial x-axis wont be the same as the parent, if the parent has any of the css layout enhancement applied which effect its width, like border or padding etc.
To solve this, you shall have to negate the effect of that padding or border, by applying a respective negative starting point on x-axis.
so just make the following change to your code.
.wrapper-dropdown-1 .dropdown {
position: absolute;
top: 100%;
left: -1px; /* <--- This is the change */
right: 0;
background: white;
list-style: none;
font-weight: normal;
opacity: 0;
pointer-events: none;
width: 300px;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
If you add left: -1px; to your .wrapper-dropdown-1 .dropdown style it works the like it should. See bellow the added style rule
.wrapper-dropdown-1 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: -1px;
right: 0;
I'm trying to create a div with a fluid-width textarea inside it. The width of the div should be at least 3em, at most 12em, and otherwise the exact same width as the textarea. I've got this working. See fiddle.
When the textarea fills up the div, it creates a line break rather than overflowing to the left, which is the effect I'm going for. Any ideas how to achieve this?
Edit: This code is based on A List Apart's article on Expanding Text Areas.
html
<div><pre><span></span><br></pre>
<textarea autofocus placeholder='Note'></textarea>
</div>
css
div {
border: 1px solid grey;
position: relative;
display: inline-block;
/* overflow: hidden; */
height: 1.3rem;
min-width: 3rem;
max-width: 12rem;
}
textarea {
border: 1px solid blue;
resize: none;
background: rgba(0,0,255,.5);
padding: 0;
width: 100%;
}
textarea, pre {
position: absolute;
top: 0;
right: 0;
height: 100%;
margin: 0;
/* visibility: hidden; */
}
pre {
border: 1px solid pink;
position: relative;
max-width: 100%;
}
* {
font: 1rem arial;
}
js
var textarea = document.querySelector('textarea');
var span = document.querySelector('span');
textarea.addEventListener('input', function() {
span.textContent = textarea.value;
});
In your CSS use:
white-space: nowrap;
overflow: hidden;
Edit this is deprecated:
Can you set wrap="off" as an attribute on the textarea?
edit: to say overflow: hidden; (per comment below) original: overflow: auto;