I'm working with a bootstrap based site. I have a problem where we are trying to get the two column heights to be equal despite the size of the content inside the columns, and without setting a column height (to keep it responsive).
I have googled my brains out and decided that the display: table, display: table-cell is the appropriate way to fix this (we support IE9, so Flexbox is OUT, and the negative margin/padding thing breaks responsiveness). I have specific media queries to fix responsiveness based on screen size.
However, I am getting a single pixel of what appears to be padding on the left side of my smaller column in Safari (it looks perfect in IE, Chrome, Firefox and Edge). After looking through the inspector, I can tell that it's not margin or padding causing the pixel, so I'm not sure how to fix it. I tried border-collapse: collapse to no avail. If I remove the display: table or display: table-cell, it looks correct, but I need those to make the columns the same height (see example here). Any ideas? Code is below.
<style>
.row-tbl {
display: table;
}
.col-tbl-cell {
float: none;
display: table-cell;
}
.blue-bg {
background-color: blue;
}
.white-bg {
background-color: white;
}
</style>
<div class="row row-tbl">
<div class="col-md-4 col-tbl-cell blue-bg">
<!-- This displays as a table cell -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-md-8 white-bg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac tempus sem, nec luctus tellus. Integer erat urna, fermentum sit amet porttitor at, rhoncus non arcu. Aenean a libero consectetur metus imperdiet scelerisque at ut nibh. Sed mauris mauris, facilisis nec nulla at, cursus imperdiet magna.</p>
</div>
</div>
I can’t reproduce this issue in Safari 9 on OS X 10.11.2 with the code sample above, but it could be some kind of rounding error.
http://cruft.io/posts/percentage-calculations-in-ie/
You could try applying the left column’s background color to the row itself. If it goes away, then it might be a subpixel rendering issue.
Note: I think you’re missing the col-tbl-cell class on the second column ;)
I ended up pulling the row-tbl class onto a new div under the row and above the column. That worked!
Related
I'm using the AG Grid Community for angular with Material and I'm facing the following issue with the column filter popup panel:
It's all fine when the filtered rows are more than 4 or 5 rows as the panel shows properly without cutting off. However, when the number of filtered rows gets fewer than 2 or even 3, the panel gets truncated. I have inspected the element and tried to find the selector for it but I can't seem to get the z-index set properly. I'm also hesitant to mess around with the overflow properties as the documentation sort of advises against it. The selectors I've tried to override in my styles.css (global) are ag-filter and ag-menu as well as ag-filter-body-wrapper - all to no avail.
I've read the documentation and there's no configuration for this as well. Is there some sass variable or something that I should be overriding instead?
Thanks in advance.
That behavior it is because the filter is showing within the container. Try setting the css position of the filter to fixed. This should allow to the filter to show over the container.
See this plunkr for more info
there is a div outer, like your table wrapper, and a box aka your filter:
CSS:
.box {
width: 100px;
height: 100px;
background: red;
color: white;
}
#one {
position: fixed;
top: 255px;
left: 10px;
background: blue;
}
.outer {
width: 500px;
height: 300px;
overflow: scroll;
padding-left: 150px;
}
HTML:
<div class="outer">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
</p>
<div class="box" id="one">One</div>
</div>
As you can see, the div is showing over the container.
Update 2022: I had the same problem with a newer version of AG Grid, and while trying to solve it I first found this thread. Actually the solution to this problem is described in the AG Grid documentation: You can use popupParent and set it to the body Element as described here:
https://ag-grid.com/angular-data-grid/context-menu/#popup-parent
I'm new to CSS and have a question about expanding the content of an inner DIV to fill the entire outer div.
I have been researching an answer to my problem for hours and have found dozens of similar questions, but none of the suggested solutions work for me. I'm sure it's that I'm misunderstanding something fundamental, but I can't seem to put my finger on it.
I need to have the blue background cover the entire block between "Some other stuff" and "More different stuff" and the text must be centered vertically and horizontally in the blue block - and maintain the same hover qualities and text-decoration rules.
<div>
<span>Some other stuff</span>
</div
<div class="outer-container">
<h2>
<a class="inner-container" href="https://www.google.com" target="_blank">
Lorem ipsum
</a>
</h2>
</div>
<div>
More different stuff
</div>
I have so much trouble with CSS because I don't know how to gracefully describe what I'm wanting - I'm a developer not a designer!
.outer-container {
background-color: #337AB7;
text-align: center;
vertical-align: middle;
position: relative;
}
.inner-container {
background-color: #337AB7;
color: #fff;
height: 100%;
font-size: x-large;
&:focus, &:hover, &:link {
background-color: #286090;
color: #fff;
text-decoration: none;
}
}
If I put the focus, hover CSS stuff in the outer-container the hover mechanics are not consistent.
I hope I'm making sense...like I said, I have a horrible time explaining design stuff.
Any suggestions?
You just need to set background color to outer-container.
When you set background-color to <a> tag, the background color is assigned to the text only.
Here is you updated fiddle.
Here is the snippet.
.outer-container {
text-align: center;
vertical-align: middle;
position: relative;
background: #337AB7;
}
.inner-container {
background-color: #337AB7;
color: #fff;
height: 100%;
font-size: x-large;
}
<div> <span>Some other stuff</span>
</div>
<div class="outer-container"> <a class="inner-container" href="http://www.google.com" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum purus vel iaculis accumsan. Nulla vel massa velit. Proin a nisl vel tortor tincidunt pharetra. Nulla tristique porttitor erat. In laoreet, erat non ultricies vulputate, massa mauris tempor ligula, sed dignissim ex augue sit amet sapien. Donec malesuada massa eget turpis consectetur, at feugiat velit aliquam. Fusce dictum ornare dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer non consectetur nunc, at sollicitudin nibh.</a>
</div>
<div>More different stuff</div>
Why can you not change the background colour to be on the parent .outer-container?
This would solve your immediate issue.
See http://jsfiddle.net/n1gva5b4/
If a was you i would make a div-container and inside the div(innerContainer) insert the a-link-tag. So the Conainer does what its called (contain-something), applies the color as you want it and the link also works fine.
like this:
<div class="outer-container">
<div class="inner-container" >
Lorem ipsum dolor sit
</div>
</div>
Just in case the outer-container responses don't help, an alternative is to set display: block on inner-container. Block-level elements are the ones that take up all available horizontal space on their parent by default (an example might be, one of these answers), and "inline-level" elements like a (by default anyway) can be placed in the middle of a block of text, only affecting its own text without re-flowing any layout around it.
I have a div that sits centralised on the page which has text with an image aligned to the right, as shown below. The problem I'm experiencing is getting the image to slide into view from the right when the user scrolls down and brings the region into view.
I'm able to change the opacity successfully but I'm not able to get it working for how I need, i.e. moving the image from right to left by 50 pixels.
I'm experimenting with the skrollr library. Any suggestions where I'm going wrong please?
Many thanks,
James
code example
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lorem felis, ultricies vitae justo sed, rutrum sagittis quam. Cras sodales metus odio, eu rhoncus elit commodo a
<img src="test.png" align="right" />
</div>
CSS for the div
div {
position: absolute;
left: 50%;
padding: 20px;
margin-left: -485px;
width: 970px;
}
JS
var s = skrollr.init();
you need to give your image the skrller data, something like:
<img style=opacity:0 class="skrollable unrendered" data-bottom-top=right:400px; data-top=right:0; alt="" />
Of course you'll need to adjust to your needs, but the point is that for EVERY element you need to apply the Skrller behavior, you need to give it some data
I have a block of text with unknown width and I would like to place another text right after it that would always stick to the last word. If the first block is one line then setting them both to 'inline' or 'inline-block' is enough, but if the first block is more than one line, the second block always goes to the next line.
Code:
html
<div id="text">sit amet, consectetur adipiscing elit. Donec facilisis eros arcu, sed dictum lorem consequat a. Duis sodales rhoncus felis at convallis.</div>
<div id="new">New</div>
css
div {
float: left;
display: inline-block;
}
http://jsfiddle.net/nmuUd/1/
'New' needs to always stick to the last word of the previous block. How can I do this?
EDIT: To clarify, I cannot change the markup. The content is always in two separate divs.
Like this:
html
<div id="text"> sit amet, consectetur adipiscing elit. Donec facilisis eros arcu, sed dictum lorem consequat a. Duis sodales rhoncus felis at convallis.
<div id="new">New</div></div>
css
#new {
background: red;
}
div {
display: inline;
}
Getting rid of the float:left; on your fiddle seems to do what you're looking for.
Your text is pushed down because if you have an 'inline-block' element, and the text is long enough to fill 100% width of a parent container the second line will also have 100% width. That's why the second div will start rendering below that first div.
If you want your divs in one line you have to give them 'display: inline;' property.
If it's a static and short text, for example name of an author, you can use pseudo-element ':after', like this:
div.text:after{
content: ' put you text here'; /*remember to put whitespace on the beginning*/
background-color: red;
}
but if you want to use 'div' as inline element just use 'display: inline;' without float:
div.text{
display: inline;
}
Hope I helped.
Just remove the float, if the two divs are display: inline that should be enough.
fiddle
you can make use of span
<span id="text"> sit amet, consectetur adipiscing elit. Donec facilisis eros arcu, sed dictum lorem consequat a. Duis sodales rhoncus felis at convallis. </span>
<span id="new">New</span>
Like this
demo
css
#new {
background: red;
}
div {
display: inline-block;
}
Fiddle illustrating the problem - click the button a few times and the box will shrink, revealing the issue.
This issue appears to only happen in Internet Explorer.
Basically, when an element that contains white-space: pre-wrap is resized slowly, IE doesn't recalculate word wrapping, resulting in text being pushed outside the element. Some recalculating does happen, but not all of it. The more the element is resized, it seems, the more recalculation is actually done.
Zooming the page fixes the issue, but is obviously not a practical solution.
How can I force IE to recalculate word wrapping when the container's size changes?
New (ridiculous) HTML Change Solution (but works!)
Because of the odd first line failure, the solution depended upon generating a non-important first line and then accommodating it. This fiddle demonstrates what appears to be a now "bug free" solution for IE9 (some tweaking to account for my pseudo-element/class use would be needed for earlier IE versions).
The HTML requires an excessive amount of wrapping, such that each section of text is "double wrapped." The demo has three different means of gaining the block level wrap, but all use the same fix.
Essential HTML
<div id="cnt">
<p class="ieFixBlockWrap">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt consectetur tortor, sed vestibulum lectus hendrerit at. Praesent fermentum augue molestie lectus pharetra eget cursus erat cursus.
</span>
</p>
<span class="ieFixBlockWrap">
<span>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent fringilla nisl posuere tortor rutrum lobortis.
</span>
</span>
<div class="ieFixBlockWrap">
<span>In risus libero, faucibus ac congue et, imperdiet ac purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam lobortis ullamcorper. Proin risus sapien, pulvinar in adipiscing non, rutrum hendrerit magna. Praesent interdum pharetra vehicula. Integer molestie mi neque.
</span>
</div>
</div>
CSS
#cnt {
white-space: pre-wrap;
border:1px solid black;
line-height: 1.2em; /* set explicitly, see below */
/* prevent shifted :before from interfering with elements preceeding #cnt */
overflow: hidden;
}
.ieFixBlockWrap:before { /* this becomes the first line, but also an extra line gap */
content:'';
display: inline-block;
width: 100%;
}
.ieFixBlockWrap {
display: block; /* just to demo span as block level */
margin: -1.2em 0; /* offset by line-height to remove gaps from :before*/
}
.ieFixBlockWrap:last-child {
margin-bottom: 0; /* last one does not need the bottom margin adjusted */
}
Original HTML Change Solution (still failed on first line)
Wrapping all the text in a single span inside the div set with pre-wrap seemed to make it behave in this fiddle.
It looks like you can force IE to redraw the container by removing the element and then adding it back (unfortunate you have to resort to this, but oh well). Here's a resize function that will do just that, along with a fiddle to see it in action:
var resize = function(element, changeWidth, changeHeight){
changeWidth = parseInt(changeWidth) || 0;
changeHeight = parseInt(changeHeight) || 0;
element.style.width = (parseInt(element.style.width) + changeWidth) + 'px';
element.style.height = (parseInt(element.style.height) + changeHeight) + 'px';
var parent = element.parentNode;
parent.removeChild(element);
parent.appendChild(element);
};