OK, here is the code:
left block
right block
It shows left block on the left part of screen and right block on the right of screen, if a screen is small or wider. And it shows right block under the left block for screens that are smaller than small (as two simple dives). That's clear.
I would like to use ng-if="boolValue" for the right block so that when it is hidden, then the left block is in the middle of the screen, not on the left.
What's the best way to do it?
<div class="row">
<div class="col-sm-6">
left block in the center
</div>
<div class="col-sm-6" ng-if="boolValue">
when right block is hidden because of falsy boolValue
</div>
</div>
What's the technique to make it done? The best thing that comes to my mind is to use ng-if something like this:
<div class="row">
<div class="col-sm-12" ng-if="!boolValue">
left block in the center
</div>
<div class="col-sm-6" ng-if="boolValue">
left block in the center <the same content as above>
</div>
<div class="col-sm-6" ng-if="boolValue">
when right block is hidden because of falsy boolValue
</div>
</div>
but I don't think that's the proper and the best way.
<div class="row">
<div ng-class="{'col-sm-12': !boolValue, 'col-sm-6': boolValue}" ng-if="!boolValue">
left block in the center
</div>
<div class="col-sm-6" ng-if="boolValue">
when right block is hidden because of falsy boolValue
</div>
</div>
<div class="row">
<div ng-class="{'col-sm-6':boolValue,'col-sm-12':!boolValue}">
</div>
<div class="col-sm-6" ng-if="boolValue">
</div>
</div>
Related
I am trying to add a scroll arrow below specific divs that have overflow on them and only when the overflow is active. There are different containers with different heights and I only want this scroll arrow to appear on the ones that have overflow on them, is there a way to do this dynamically?
I have created a JS Fiddle to show my html, so basically when the 'slide' content exceeds the 900px max height it gets overflow but I want it to then display the arrow or the opposite effect and hide the arrow if overflow isnt active!
https://jsfiddle.net/h7r16cah/
<div class="large-12 columns">
<div id="" class="large-9 columns page-content-right">
<div class="slider">
<div class="slide-large-content">
</div>
<div class="slide-small-content">
</div>
</div>
</div> <!---end page content right -->
<div class="large-9 columns">
<div class="scrollarrows-container">
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
</div>
</div>
</div>
</div><!---end large 12 cols -->
Any help would be appreciated, and if you need more information let me know!
Thanks in advance
I'm learning Angular and struggling with something. I'm using a tinder-like library that lets you swipe images left or right. I also have a heart and "X" that will do the same thing.
What's happening is when you swipe left/right, the heart and "X" are being swiped too. I need these to remain stationary. I'm not sure how to do that and still have them render and function normally.
Here's the HTML code:
<div class="ng-swippy noselect">
<div person="person" swipe-directive="swipe-directive" ng-repeat="person in peopleToShow" class="content-wrapper swipable-card">
<div class="card">
<div style="background: url({{person.thumbnail}}) no-repeat 50% 15%" class="photo-item"></div>
<div class="know-label">{{labelOk ? labelOk : "YES"}}</div>
<div class="dontknow-label">{{labelNegative ? labelNegative : "NO"}}</div>
</div>
<div class="container like-dislike">
<div class="circle x" ng-click="$parent.$parent.clickDisike()"></div>
<div class="icon-like" ng-click="$parent.$parent.clickLike()"></div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div><!-- end person-->
If I move the like-dislike container out of the person div, 2 things happen. That container does not render on screen and even if it does, it throws an error.
How can I keep them stationary and keep their functionality as it relates to the app/image they represent?
Thanks in advance.
****EDIT****
Link: http://430designs.com/xperience/black-label-app/deck.php
Try using this css for like-dislike element and place it above the person div
.like-dislike {
position : 'absolute',
top : 10px;
right : 10px;
}
I ended up just removing the $parent.$parent from my ng-click.
On a small screen, div1 and div2 are showing side by side overlapped, and I want div1 content shows first and div2 content to be shown just underneath div1. How do I achieve these requirements with or without media queries?
<div class="row">
<div class="col-xs-6" id="div1">
test column1
</div>
<div class="col-xs-6" id="div2">
test column 2
</div>
</div>
Update your elements' classes to this:
<div class="row">
<div class="col-xs-12 col-sm-6" id="div1">
test column1
</div>
<div class="col-xs-12 col-sm-6" id="div2">
test column 2
</div>
</div>
This way, at viewports >= 768px, they'll be side-by-side and at 767px & below they'll display one below the other.
As mentioned in a comment on the OP, please refer to the documentation, which covers this in greater detail: http://getbootstrap.com/css/#grid
Please, help me with this issue.
I have a sctructure.
<div id="toolbar" class="toolbar overlay-displace-top clearfix toolbar-processed">
...
</div>
<div class="ui left sidebar vertical inverted menu overlay" id="ls">
...
</div>
<div class="ui right sidebar vertical inverted menu overlay" id="rs">
...
</div>
<div class="ui fixed top attached inverted menu">
...
</div>
<div id="page">
...
</div>
When I am clicking on toggle button, I am having problems... Semantic-ui puts all divs to #pusher without #ls and top fixed menu.
Administration toolbar is invisible, because is inside #pusher.
I don't want #rs and toolbar inside #pusher.
<div class="ui left sidebar vertical inverted menu overlay" id="ls">
...
</div>
<div id="pusher">
<div id="skip-link">
Skip to main content
</div>
<div id="toolbar" class="toolbar overlay-displace-top clearfix toolbar-processed">
...
</div>
<div class="ui right sidebar vertical inverted menu overlay" id="rs">
...
</div>
</div>
<div class="ui fixed top attached inverted menu">
...
</div>
How can I solve this problem?
Thanks!!!
I see you have two divs named "ls", I assume the second one was meant to be called "rs", that would be why it is moved into #pusher
We needs add class "Pusher" instead id. Thats all.
Inside row two individual div how can one right hand side dive fixed when scrolling page then fixed and when come footer area then up this fixed div.
This is my code example below:
I want col-md-4 class fixed when come footer content then up.
<div class="container">
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4">
</div>
</div>
</div>
Demo- http://jsfiddle.net/3RkM3/41/
Layout-
<div class="row">
<div class="col-xs-8 content">Content</div>
<div class="col-xs-3 col-xs-offset-1">
<div class="fixed col-xs-4">
Something
</div>
</div>
</div>