The following responsive css grid code produces cells with mismatched sizes. I can't for the life of me figure out how this is possible.
#service-icons {
display: grid;
margin-top: 3rem;
margin-bottom: 3rem;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
justify-items: center;
align-items: center;
}
.service-icon {
position: relative;
display: inline-block;
margin: 1rem;
margin-bottom: 0;
}
The page in question can be found here. (Be sure to shrink the browser window to ensure use of mobile styling.)
Here is a screenshot showing the erroneous result:
As per Zohir's comment under the question, the mismatched sizes can be accounted for by the different widths of the text elements. The larger text size pushes the grid cell size beyond its minimum. Allowing the text element to overflow within a new parent element fixed the problem in practice.
Related
I wanted to give only vertical and horizontal space between grid cell. Is there any attribute to set space between grid cell?
I think something like this should work:
<ion-grid class="grid"></ion-grid>
and the the css:
.grid{
margin: 5px;
}
And I'm pretty sure that styles are going to be applied too by only using a selector in css file:
ion-grid ion-row, ion-col{
margin: 5px;
}
Alternatively you can use padding instead of margin
you can use the padding that ionic provide or what i will do to have more control is the following:
on the page.scss file
my-page ion-col{
margin: 5px;
}
The default behavior of the tooltip on google chart's legend is showing only when the word is broken for being too long.
What I want to do is to always show the tooltip regardless of the word being complete or not. Is this possible?
You could try to overwrite the tooltip functionality to display the text. Made an example using jquery, however it also makes tooltips for title and axis ticks, but should be close to what you want:
function myReadyHandler(){
$('g text').mouseenter(function(e){
if($(this).text().indexOf('...')!= -1) return;
$('.charts-tooltip').hide();
$('body').append('<div style="position: absolute; visibility: visible; left: '+(e.pageX-50)+'px; top: '+(e.pageY+20)+'px;" class="charts-tooltip"><div style="background-color: infobackground; padding: 1px; border: 1px solid infotext; font-size: 14px; margin: 14px; font-family: Arial; background-position: initial initial; background-repeat: initial initial;">'+$(this).text()+'</div></div>');
})
$('g').mouseleave(function(e){
$('.charts-tooltip').hide();
})
}
google.visualization.events.addListener(chart, 'ready', myReadyHandler);
Here is a working example: http://jsfiddle.net/Lwkorqn9/
If I set the size of a child element in percentage, the size will be calculated relative to parent's content-box, independently from the fact that I have set its box-sizing property to border-box.
So if I have something like this:
.parent {
box-sizing: border-box;
padding: 0 100px;
width: 600px;
}
.child {
width: 50%;
}
The width of .child will be 50% of 400px (parent's width after padding has been applied). You can see an example here: JSBin
Main Question
Is there a way to make the width of a child element relative to the
parent's border-box rather than the parent's content-box?
Bonus question
While making my example I noticed a weird behavior in the calculation of the size. Setting the .parent's padding as 0 10% actually gives a padding of 68-odd pixels from each side. Why is that? Isn't 10% of 600px 60px or I am missing something?
The width property is explicitly defined as being relative to the content box and box-sizing on the parent doesn't alter this however there is a trick available. What you need is a border that doesn't consume any space and thankfully that is exactly what the outline property does.
There is one catch: The outline defaults to being outside the content box. Not to worry though because one of outline's related properties outline-offset accepts negative values which will bring our outline inside our content box!
HTML
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="outer">
<div class="inner">
TEST
</div>
</div>
</body>
</html>
CSS
.outer {
position: relative;
width: 100px;
height: 100px;
outline:20px solid red;
border:1px solid black;
outline-offset: -20px;
}
.inner {
width: 50%;
height: 100%;
outline:1px solid yellow;
position: absolute; /* required so inner is drawn _above_ the outer outline */
background-color: blue;
}
JS Bin: http://jsbin.com/efUBOsU/1/
With regards to your "bonus question" percentage widths are based on the container size, not the element size. This is true for width, padding and margin. You're getting a padding of 68px because the container is is 680px. This may seem odd but it comes in very handy when you have a rule like {width: 80%; padding: 10%;} because it guarantees your total object dimensions will be 100% of the container and not some arbitrary value based on your child elements' content.
Note: In future please ask additional questions seperately, especially when they are only marginally related to your primary question.
I am trying to set a height to be relative to the size of the screen (height = 12%), but I don't want it to exceed a certain pixel height (i.e. max-height: 150px). What is the proper css for this. I have tried:
.titleBar {
position: relative;
background-color: #5C755E;
padding: 1%;
height: 12%;
max-height: 100px;
border-bottom: .45em solid #DEB887;
top:0;
left:0;
width: 100%;
}
but this ignores the max-height property. On my large desktop screen the titlebar becomes 200px (much too big).
You need to use min-height instead of height. Height overrides min and max height unless set to auto. Combination of height and min-height (unless height:auto) ignores min/max height.
This should work.
.titleBar {
position: relative;
background-color: #5C755E;
padding: 1%;
min-height: 12%;
max-height: 100px;
border-bottom: .45em solid #DEB887;
top:0;
left:0;
width: 100%;
}
You need to add a height to your parent element, if you have one. So if you add a height to the parent element of 432px, the div will now be at a height of 36px.
Also, a few notes.
You should choose to use either ems or pixels. Don't use both.
If you add the property border-box to the element, the width will show up as 100% of the page, not 100% of the page, and then add the padding, so it turns out to be slightly more.
You might want to add a min-height also.
Hope this helps!
I have a standard CSS menu, made with UL and LI tags. I need them to get to cover the whole page, horizontally (not my real case, but I'll take this to simplify the situation). However, the items are created dynamically and so I'm not able to hardcode any with to LI items, nor margins.
I've seen solutions using JavaScript to set those values but I would really love to avoid them.
Lastly, I've seen a pretty good solution which is setting
#menu {
width: 100%;
/* etc */
}
#menu ul {
display: table;
}
#menu ul li {
display: table-cell;
}
This will create the desired behavior in most browsers... except for IE.
Any ideas?
EDIT: Thanks for the responses. However, as the code that generates the items isn't mine, I'm not able to set inline styles when creating them without using JavaScript later.
You can't set the height or width of an inline element. http://www.w3.org/TR/CSS2/visudet.html#inline-width
Try display:inline-block;
here is the fix for ie:
display:inline-block;
zoom:1;
*display:inline;
If you want to let the element get the whole available space, there is no need to define a priori the width of the menu elements (of course, it will help in equally sizing the li elements). You can solve this problem by working on the display property.
#menu{
display: table;
width: 100%;
}
#menu > ul {
display: table-row;
width: 100%;
}
#menu > ul >li {
display: table-cell;
width:1%
}
Note that width:1% is required to avoid cell collapsing.
If your menu items are being dynamically generated (so you don't know how many there will be prior) then you can add a style="width:xx" attribute to the lis (or in <style> at the top... or where ever you please, really). Where xx should either by width_of_parent_div_in_px/number_of_elements+'px', or 100/number_of_elements+'%'. The lis should also be block-level elements, and floated left.
#menu ul li {
float: left;
clear: none;
display: inline;
padding: 10px;
height: 25px; //how tall you want them to be
width: 18%; //you will need to set the width so that all the li's can fit on the same line.
}
The width: 18% may be about right if you have 5 elements across, accounting for border and padding. But it will vary due to how many elements you have, how much padding, etc.
If you are open to using Flexbox then it isn't hard to do. Full credit for the code I am about to post goes to CSS Tricks as this is their CSS.
Below is an example that includes vendor prefixes.
#menu{
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
}
<ul id="menu">
<li>Home</li>
<li>Store</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
The only issue with Flexbox is if you need to support IE 9 and below, otherwise, I see no reason to not use Flexbox. You can view browser support for Flexbox here.
Here's what worked for me:
#menu{
height:31px;
width:930px;
margin:0 auto;
padding:3px 0px 0px 90px;
color:#FFF;
font-size:11px;
}
#menu ul{
display:inline;
width:930px;
margin: 0 auto;
}
#menu ul li{
list-style:none;
padding:0px 0px 0px 0px;
display:inline;
float:left;
width:155px;
}