I know i can do calc(100% + 15px), but is there way to do
calc("content width" + 15px)?
fit-content and auto didn't work, which kinda makes sense.
I have unknown number of items that i want just to take width they need (inline-block) + some amount of px for justify-content: space-between;
If this can't be done with calc, is there an alternative?
(I'm using scss if that changes anything)
Use padding. The content+padding => determines size without using % percentage for width.
In my scenario, a button added a '>' using pseudo ::after, and was positioned 18px from the right edige.
I also found myself in this situation, unfortunately not having found a solution I used a small JS function that assigns the value
width: calc ($(element).width() + 10px);
Unfortunately, rather than calculating the measure via javascript when loading the page I can not help you.
Related
I am using 100vh for my body content, but how can I make it so it takes away the height of my navbar?
Like
100vh - 50px
Is it possible?
You should be able to do so in LESS with the following
calc(~"100vh - 50px");
If you're happy with just a css solution, here is an example
calc(100vh - 50px);
JSFiddle Link
It is possible with the calc() css function
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
Doesn't work in all browsers. vh/vw/vmin support in this might be even smaller.
except in LESS you have to escape it, to prevent it being calculated by the compiler, like so:
height: calc(~'100vh - 50px');
I need to make ui controls panel, that has 100% width and gradient background. UI elements on this control panel should have width 1000px and should be centered.
For a moment i have two elements:
panel (width 100%, gradient background), global wrapper
panel-wrapper (width 1000px, transparent background), is placed inside "panel" element, contains UI elements.
It works brilliant in all browsers i need, but i really don't like to use two HTML elements, when logically it should be just one. Perhaps it is possible to have one element "panel" with fixed width (1000px) and auto-padding, that will cover all free space to the left and to the right? (i've made an image to show it if my explanation is crazy :))
It is possible?
You could potentially use the calc() function, though it isn't highly browser compliant.
Here is a quick example and more information on compatibility and usage can be found here.
*I made the example in Firefox, didn't test it elsewhere.
Just for a quick code example, the following shows one solution:
div {
width: 100px;
background-color: blue;
height: 100px;
padding-left: calc(50% - 50px);
padding-right: calc(50% - 50px);
}
The challenge is you can't really combine percentages and fixed widths with padding in the traditional sense, since the padding is added to the total width.
If the total width is 100%, and you want the content in the center to be 500px, you can't calculate the padding.
With CC3, though, you can use the box-sizing to change 'where' the padding is placed in the box model.
http://www.css3.info/preview/box-sizing/
Alas, I still don't think that will give you want you want simply due to there still being an unknown variable in play (the width of the container that the 100% width object is in).
In the end, we can sometimes over think these solutions in the name of over-optimization. IN this case, an extra div seems perfectly acceptable and, likely, the proper solution.
Why padding ?
You could set left and right margins to auto and that would make the div centered..
So just set
.panel{
width:1000px;
margin:0 auto;
}
I'm working on a google map page for a jquerymobile site. I've got the map behaving as I'd like, and it displays beautifully, but the map element is too big - I can't figure out how to scale it to fill all the available space between the header and footer.
So I have:
header (let's say it's 30px tall)
footer (let's say it's 20px tall)
Since there are so many different screen sizes for mobile devices right now, I want the map_canvas to be device-height minus 50px tall. Can I do this in css, or do I need to use javascript? (Not averse to that, but it would be great to use pure css...)
You can use height: calc(100% - 50px) in modern browsers.
Due to general viewport wonkyness, auto-height is a slippery issue and not implemented reliably.
I've needed to implement something similar before on my mobile sites, and I found this article on Quirksmode to be infinitely useful - http://www.quirksmode.org/mobile/viewports.html
In your case, you'd want the height to be
document.documentElement.offsetHeight - (header.outerHeight() + footer.outerHeight())
or if you want to hardcode, document.documentElement.offsetHeight - 50. Of course hard-coding the value is a less maintainable way to go.
You could use javascript, or you could use relative heights. For example, set your header's height to say, 10%, the footer to 20%, and then you could set your map's height to 70%.
I have a sidebar DIV on my web page that has buttons. I have the width of the sidebar set as follows:
width: 20%;
but when the browser size is reduce then there's sometime not enough space for the buttons. Is it possible for me to have the width as 20% but also specify a minimum in px?
Yes. This is pretty common, too. Have fun!
And protip: you can always just try and find out ;)
Yes. The W3C CSS recommendation generally does not require that units for different dimensions like width and min-width be the same. (Not quite relevant side note: You can even mix different units for dimensions like padding, e.g. padding: 2px 1em;.)
Using “min width”.
min-width: 20px; for example.
But if you want its width to always be at least the size of whatever is contained, consider using display: table-cell;
i want to set the width of the DIV like
( 100% - 10px )
using CSS expression but have been failing can somebody tell me what is the answer to that
You can't do that unfortunatly, and it can be annoying because you do run into instances where it would be great.
You can use Javascript to work out pixel widths of elements, but this gets messy and very complicated to manage very quickly.
My recommendation is go back to the drawing board and redesign your layout to work around this issue.
If you post specific examples we might be able to help.
You can do exactly this today with CSS3's calc function.
width: calc(100% - 10px);
you could use javascript to get the actual width of the div when you have it at 100% and then reduce it by 10(might i recommend jquery as a greate framework to work with when it comes to javascript), another thing would create a wrapping div with overflow:hidden; and that's 100% and then you apply 100% to the inside div too and add left:-10px; to it, it will create desired effect
Can you give a more concrete example? Just without any more details it seems you just need a left or right margin of 10px on an block element with default (auto) width.