When using the following css selector on a toolbar to require a minimum bottom margin, it causes the toolbar height to be 0 on Chrome 59:
.toolbar {
height: calc(var(--f7-toolbar-height) + max(var(--f7-safe-area-bottom), 10px));
}
I tried the following, hoping Chrome 59 would only use the first height definition:
height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
height: calc(var(--f7-toolbar-height) + max(var(--f7-safe-area-bottom), 10px));
But Chrome 59 still uses only the second height definition which results in 0 height.
The following also doesn't work:
#supports(height: max(0px)) {
height: calc(var(--f7-toolbar-height) + max(var(--f7-safe-area-bottom), 10px));
}
It still tries to apply the height, and causes 0 height.
Is there a backwards compatible way to achieve this height? It would be fine if Chrome 59 simply ignored the height and inherit it from somewhere else, as long as it doesn't cause a 0 height.
The following approach works:
&.supports-css-math {
height: calc(var(--f7-toolbar-height) + max(var(--f7-safe-area-bottom), 10px));
}
And then in javascript, that supports-css-math class needs to be added. If using react or vue, it can be added in the component's template.
Another approach that might be better, but haven't tried yet, would be to add the supports-css-math at the top of the dom, and then define a css variable based on the selector, e.g., --min-toolbar-bottom, which can later be used in the toolbar component.
Related
Currently I have a layout like so
<parent-comp>
<child1> </child1>
<child2> </child2>
</parent-comp>
Parent component have fixed height ( 1000px )
Child 1 have 2 states: Expanded( 200px ) and Collapsed( 10px )
I would like to use these information to calculate and update child2's height accordingly
I do not want to set child2's height to auto ( I need a specific value since this is the requirement to pass it into another library (the virtual scroll) )
How can I achieve this?
I tried ViewChild + ElementRef to get child component's height from parent component but it seems to cause ExpressionChangedAfterItHasBeenCheckedError when I try to update the child component's height
Should the child component output it's current height to the parent or the parent should read it from it's child?
instead of doing it the hard way, you can simply use flex-box, which would take care of doing all the calculations for you.
e.g
.parent {
display:Flex;
flex-direction:column;
flex-wrap:wrap;
height: 1000px;
}
.child1 {
/* expanded */
flex: 0 0 20%;
}
.collapsed {
flex: 0 0 2%;
}
.child2 {
flex: 1;
}
you can apply collapsed classed dynamically with the help of ngclass, hope this helps.
If you want to learn more about flexbox play these free game at https://flexboxfroggy.com/ Hope this helps.
Yes, you're right. You need to Output the value from child to parent and propagate it to desired components and do your calculations.
Here's an example.
If you want to pass this change of height to Components other than the children then I would suggest you use a SharedService to subscribe and make changes to the value(s). Siblings or not, this way you can share data between multiple components.
If you just want to update the height, using Flexbox or Grids is a better alternative.
on my website there are some hexagon SVG´s with different colors and a normal .content class with some style.
What i want, is if the user :hover over the SVG the background-color of .content should get a "specific" color.
#hexagon4_work:hover .content{
background-color: #6EC5D3;
}
#hexagon4_work:hover ~ .content{
background-color: #6EC5D3;
}
#hexagon4_work:hover > .content{
background-color: #6EC5D3;
}
#hexagon4_work:hover + .content{
background-color: #6EC5D3;
}
I have already searched about it, but i do not found any solution for this.
What i found was these operators. But these affect only for a child in a parent. / or not?
I´d like to only use CSS, so if it is not possible only in CSS, please tell me that too. (I am a noobie in JS so dont wonder.) :)
Thanks for all following answers.
- MK
There is no CSS-only solution for your Problem. Check the comment from David.
But you could do something with JavaScript.
Add this to your code.
var hex4 = document.getElementById('hexagon4_work');
hex4.addEventListener('mouseover', function(){
document.getElementsByClassName('content')[0]
.style.backgroundColor = '#6EC5D3';
});
hex4.addEventListener('mouseout', function(){
document.getElementsByClassName('content')[0]
.style.backgroundColor = 'transparent';
});
I tried it on your page and it works. For the other hexagons you should copy this code and modify the selecor in first line and the color in line 4.
My recomendation:
Add the CSS transition: background-color 500ms; to the content div. It would be a nice animation.
While there's no way to do this directly (there are no parent selectors in CSS as of 2017), you can do it by creating a child SPAN, setting z-index and its position to push it behind everything else in the parent, and change its background color (parent background = transparent). Check this out
Essentially what the title says - need to make this wider. Tried several solutions, neither work. Note that the "backdropClass" is applied perfectly and works, but the windowClass doesn't, nor the "size" option. I have tried them independently, nothing. CSS is in the same folder as the working backdrop class"
$modal.open({
templateUrl: 'myTemplate.html',
controller: 'controllingControllerCtrl',
backdrop: 'static',
backdropClass : 'blackBackgroundModal ' +
'blackBackgroundModal.fade blackBackgroundModal.fade.in',
windowClass: 'resizeModalWindow' +
'resizeModalDialog',
size: 'sm'
});
}
}
CSS:
.resizeModalWindow .resizeModalDialog {
width: 5000px;
}
What needs to be done for at least the "size" option to register - I don't really need custom widths.
Edit: Forgot checked links!
Checked this Q first
Then this
And of course docs
bootstrap css has media queries defining the width of a modal based on screen size. to globally overwrite them use !important
like this
.modal {
size: 5000px !important;
}
You should have white space between those two classes will recognize by the css rule.
windowClass: 'resizeModalWindow ' +'resizeModalDialog',
^^^added space here
Add this to your CSS:
.resizeModalDialog .modal-dialog{
width: 5000px;
}
Add the property where you instance the modal
windowClass:'resizeModalDialog',
windowClass will not resize another way.
I received a task at work to create some mini-webpage layout with bootstrap. I decided to base on already done layout (Amoeba). Here is the preview: Amoeba bootstrap link
Well, on localhost almost works except one thing - footer. Just take a look on provided link and then: click Portfolio (from navigation) and then filter the gallery by Photography.
When you will scroll down you will see ugly space. And this is my issue. I dont want that. So i thought that I need a footer OR portfolio div class which will automatically resize to proper size. BUt I dont how how to achieve that. Any tips?
You need only to change the code of modernizr slightly. Change forceHeight to false and will work good.
if (Modernizr.mq("screen and (max-width:1024px)")) {
jQuery("body").toggleClass("body");
} else {
var s = skrollr.init({
mobileDeceleration: 1,
edgeStrategy: 'set',
forceHeight: false,
smoothScrolling: true,
smoothScrollingDuration: 300,
easing: {
WTF: Math.random,
inverted: function(p) {
return 1-p;
}
}
});
}
Im not sure why, but your body element gets some height inline styling. Anyways here is the solution of your problem:
body {
height:100% !important; // inline styles, so you need to add "!important" here
position:relative;
}
#footer {
position: absolute;
width: 100%;
bottom: 0px;
}
You can also add wrapper div if you don't want to add position:relative and height:100%!important properties to your body element. Just see how it works and choose a better option for you.
Hi I want to do a fixed size page, but don't want the page to break or reflow at all if the user resizes the window. Is this a javascript function?
sample: http://www.neimanmarcus.com/
Most people put all the content of there page inside a div with an id, such as 'doc', then they would apply the following rule:
<body><div id="doc">
YOUR PAGE HERE
</div></body>
body {
test-align: center;
}
#doc {
margin: 0 auto;
text-align: left;
width: 940px
}
The "text-align" fixes an IE 6 issue, really you just need to assign a margin to your wrapping document div.
it doesn't need java script function .
but remember : don't use % for declaring width or height for elements in css.(for having a static element that resizing window doesn't effect that).
for example : "width:90%;" ==> replace this with "width:100px;"