I have a rectangular box that can call modal when clicked. Inside the box are labels and an expand icon.
<div class="clickable-box" ng-click="openRetailerGraphDetails()" data-toggle="modal" data-target="#g-retailer-purchases-graph">
<div class="dashboardBox clearfix">
<div class="pull-left dashboardBoxLabel purchases">
<h4 class="dashboardBoxLabeltext">
{{RetailerPurchases}} RETAILER PURCHASES
</h4>
<span class="dashboardBoxLabel2">
For the current month
</span>
</div>
<img class="pull-right expand-icon" src="themes/img/dashboard/expand.svg" />
</div>
</div>
I want to change the opacity of the expand icon inside img tag from 0 to 0.7 when the whole clickable box is hovered. How can I achieve it?
Edit: Here`s the css
.clickable-box {
cursor: pointer;
}
#dashboard .expand-icon {
width: 20px;
margin-top: 13px;
margin-right: -10px;
margin-bottom: -25px;
opacity: 0;
}
You can use the :hover pseudo class:
#dashboard .clickable-box:hover img.expand-icon {
opacity: 0.7;
}
.clickable-box:hover img {
opacity: 0.7;
}
img.pull-right.expand-icon:hover {
opacity: 0.7;
}
CODEPEN DEMO
Related
I have a slider from Ant Design (3.23.6) which generates html:
<div className="ant-slider-rail"></div>
<div className="ant-slider-track ant-slider-track-1" style="left: 45%; right: auto; width: 55%;"></div>
<div className="ant-slider-step">
<span className="ant-slider-dot" style="left: 0%;"></span>
<span className="ant-slider-dot ant-slider-dot-active" style="left: 50%;"></span>
<span className="ant-slider-dot ant-slider-dot-active" style="left: 100%;"></span>
</div>
<div tabIndex="0" className="ant-slider-handle ant-slider-handle-1" role="slider" aria-valuemin="0"
aria-valuemax="200000" aria-valuenow="90000" aria-disabled="false"
style="left: 45%; right: auto; transform: translateX(-50%);"></div>
<div tabIndex="0" className="ant-slider-handle ant-slider-handle-2" role="slider" aria-valuemin="0"
aria-valuemax="200000" aria-valuenow="200000" aria-disabled="false"
style="left: 100%; right: auto; transform: translateX(-50%);"></div>
<div className="ant-slider-mark">
<span className="ant-slider-mark-text" style="transform: translateX(-50%); left: 0%;">0</span>
<span className="ant-slider-mark-text ant-slider-mark-text-active" style="transform: translateX(-50%); left: 50%;">
100k
</span>
<span
className="ant-slider-mark-text ant-slider-mark-text-active"
style="transform: translateX(-50%); left: 100%;"
>
200k
</span>
</div>
</div>
I am trying to move left handle to the right using Cypress 4.5.0:
cy.get('[data-cy=salarySlider]').find('.ant-slider-handle-1')
.trigger('mousedown', { which: 1 })
.trigger('mousemove', 40, 0)
.trigger('mouseup')
handle seems to be selected but there is no movement. No errors too.
Any idea?
Late answer, and for Ant Design v4 slider with marks (.ant-slider-dots) but it could help. So here is how we do it (TypeScript version) :
// helper to grab slider handles by index
const slider = (sliderDot: number): string => ` .ant-slider-dot:eq(${sliderDot})`;
it('tests Ant Design v4 slider', () => {
cy.get(slider(2)).click();
cy.get(slider(3)).click();
// now slider is set on 2-3 range
});
This could be more tricky without marks.
https://ant.design/components/slider/
I want to change label color and cursor type based on ng-model
index.html
<button ng-click="changeType()">Change</button>
<label class="fee-type" ng-style="feeType ==='one' && {'class':'disabled-class'}" for="fixed2">Client Contengency Fee</label>
<label class="fee-type" ng-style="feeType ==='one' && {'class':'disabled-class'}" for="fixed1">Fixed Fee Per Property</label>
The default class is fee-type but when then button get clicked its class should change to disabled-class
index.css
.fee-type {
float: left;
clear: none;
display: block;
padding: 2px 1em 0 0;
color: black;
}
.disabled-class {
color:gray;
cursor: not-allowed;
}
index.js
$scope.feeType= two;
$scope.changeType= function(){
$scope.feeType=one;
}
You should use ng-class instead of ng-style and add condition in ng-class to apply css class in your label.
HTML:
<button ng-click="changeType()">Change</button>
<label class="fee-type" ng-class="{'disabled-class':feeType ==='one'}" for="fixed2">Client Contengency Fee</label>
<label class="fee-type" ng-class="{'disabled-class':feeType ==='two'}" for="fixed1">Fixed Fee Per Property</label>
and controller
$scope.feeType = 'two';
$scope.changeType = function() {
$scope.feeType = 'one';
};
See the fiddle
https://jsfiddle.net/m942h0wm/6/
HTML
<div class="container" ng-app="app">
<div class="main">
<p>Main</p>
</div>
<div class="aside">
<canvas class="chart chart-doughnut"
chart-data="[10,20,40]"
chart-labels="['one', 'two', 'three']">
</canvas>
</div>
</div>
CSS
.container {
display: flex;
flex-wrap: wrap;
}
.container>div {
border: solid 10px;
}
.main {
flex-grow: 2;
flex-basis: 300px;
}
.aside {
flex-grow: 1;
flex-basis: 200px;
}
if you shrink the window so the layout pops to vertical, when you resize back up the layout doesn't pop back
has anyone else found this and solved it?
I found the solution here
Flex items not shrinking when window gets smaller
min-width: 0;
on the items :)
That did not work for my linechart, I had to use :
canvas
{
width: 100% !important;
}
from https://github.com/jtblin/angular-chart.js/issues/614
In my angular.js learning project I want to hide one div and show another when I click a button.
In this code, I'd like the first div to be hidden at the click (or even destroyed?) and the second div to be shown.
Basically I want the user experience of going from page 1 to page 2 in my app.
How do I make this happen?
Index.html
<ion-content ng-controller="StartpageCtrl">
<div class="list card" id="startCard" ng-show="showstartCard">
<div class="item item-image item item-text-wrap">
Card 1
</div>
</div>
<div class="list card" id="secondCard" ng-show="showsecondCard">
<div class="item item-image item item-text-wrap">
Card 2
</div>
</div>
<button ng-click="hideCard()" class="button button-full button-calm button icon-right ion-chevron-right">
Start now
</button>
</ion-content>
controllers.js
.controller("StartpageCtrl", funcion($scope){
$scope.showstartCard = true;
$scope.showsecondCard = false;
$scope.hideCard = function() {
$scope.showstartCard = false;
$scope.showsecondCard = true;
};
});
When I run the page I see "Card 2" and nothing happens when I click the button.
What I wanted to see was "Card 1" and for it to switch to "Card 2" as I click the button...
Solved
I had forgotten to add references to controllers.js in the app.js angular.module as well as the script tag in index.html. It works fine now.
Using angular:
HTML file:
<td>Source Doc..
<div id="mydiv" ng-show="showDetails">
<div id="mydiv-container">
<div id="mydiv-content">
Close
<br>
hello
</div>
</div>
</div>
</td>
css file:
body {
height: 100%;
background-color: #F0F0F0;
font-family: Arial, sans-serif;
}
#mydiv {
width: 100%;
height: 100%;
overflow: hidden;
left: 100px;
top: 150px;
position: absolute;
opacity: 0.95;
}
#mydiv-container {
margin-left: auto;
margin-right: auto;
}
#mydiv-content {
width: 70%;
padding: 20px;
background-color: white;
border: 1px solid #6089F7;
}
a {
color: #5874BF;
text-decoration: none;
}
a:hover {
color: #112763;
}
If you are looking for toggle, then this code might help as there is no need to have any extra CSS or JS functions needed.
<button ng-click="isDetailOpen = !isDetailOpen"
ng-class="!isDetailOpen ? 'ion-ios-arrow-down' : 'ion-ios-arrow-up'"
class="button button-clear button-positive icon-right">
<span ng-show="!isDetailOpen">More Detail</span>
<span ng-show="isDetailOpen">Less Detail</span>
</button>
<div ng-show="isDetailOpen">
<p>Per ad ferri dicta, omnis laudem dicunt duo an. Ex pri solum definitiones.</p>
</div>
I figured it out while working on Angular-Ionic project.
I am new to Boot Strap 3. Working on Responsive Layout.
I have a logo centered aligned and below that a navigation bar which has few links e.g. "About Us" "Contact Us" "FAQ", etc.
My Requirement is
Above 1024 resolution the navigation bar should appear below logo in a bar.
Below 1024 resolution it should be collapsed and viewed on right hand side of logo.
Please advise.
1024px is not a breakpoint in the Bootstrap default configuration. You can customize the breakpoint of when the mobile navbar kicks in at the http://getbootstrap.com/customize/ but it affects when everything breaks down to mobile. The default is 768px. So in the un-modified Bootstrap default everything (all forms, collapse, navbar-text, and so on) has to be changed along with the max-width of same, when applicable, so that is 767px. If you don't use LESS then this is a pain.
This only works if you adjust all the CSS break the navbar at the points indicated in the paragraph above. In the Bin below, that's been done, you will need to search for 1023px and 1024px to see where those are located in your installation of Bootstrap. Make a backup. Also, when you update to 3.1.0 in a few days, you'll need to do this again unless you use LESS, which will make short work of this.
DEMO: http://jsbin.com/AsaRofuW/1/
EDIT: http://jsbin.com/AsaRofuW/1/edit
This is the HTML structure to center a logo below the navigation. It does not differ from the docs, except that it adds the image.
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="yourlink.html" class="navbar-brand">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png" alt="company name">
</a>
</div><!--/.navbar-header-->
<div id="nav-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Anchor 1</li>
<li>Anchor 2</li>
<li>Anchor 3</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Test</li>
<li>Another link</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul><!--/.navbar-nav-->
</div><!--/.nav-collapse -->
</div><!--/.container-->
</div><!--/.navbar-->
CSS
This CSS uses the min-width 1024px. For default Boostrap 3.0.3 CSS this min-width is 768px. These add styles that differ from yours and the default bootstrap, you can remove, adjust or whatever.
/* logo container padding on right so it doesn't hit the toggle */
.navbar-brand {
text-decoration: none;
padding-right: 80px;
float: left;
width: 70%; /* adjust as needed */
}
/* logo image */
.navbar-brand img {
max-width: 100%;
min-width: 90px;
max-height: 50px;
}
/* so that the navbar has some bottom white space */
.main-page {
margin-top: 20px
}
.navbar-toggle {
position:absolute;
right:0;
top:10px;
}
#media (min-width:1024px) {
.navbar-header {
width: 100%;
text-align: center;
position: absolute;
left: 0;
bottom: -120px;
/*logo position */
}
/* hide logo after scroll past navbar height */
.showlogo {
display: none
}
.navbar-collapse {
float: left;
width: 100%;
margin: 0;
position: relative;
margin-top: -50px;
padding-top: 50px;
}
/* brand for tablet and up */
.navbar-brand {
text-align: center;
float: none;
width: 100%;
padding: 0;
}
.navbar-brand img {
max-height: 80px
}
/* centered navigation */
.nav.navbar-nav {
float: left;
background: transparent!important;
}
.nav.navbar-nav > li:not(.dropdown) > a:after {
content: "/";
display: inline-block;
padding-left: 30px;
margin-right: -30px;
}
.nav.navbar-nav > li:last-child:not(.dropdown) > a:after {
content: ""
}
.nav.navbar-nav > li.active > a,
ul.nav.navbar-nav > li.dropdown.open > a.dropdown-toggle {
background: transparent;
position: relative;
}
.nav.navbar-nav li.dropdown > ul {
left: 15px
}
.nav.navbar-nav {
clear: left;
float: left;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
.nav.navbar-nav > li {
position: relative;
right: 50%;
padding-left: 15px;
padding-right: 15px;
}
.nav.navbar-nav li {
text-align: left
}
/* page styles */
.main-page {
margin-top: 150px
}
}
Note: Responsive utilities won't work inside your navbar because the media queries are changed. Lots more work to fix those, which you will need to figure out. Probably requires making two sets (about 400 more lines of CSS and isolating with a .navbar preceding the class).
Since you're new to bootstrap, I think sticking to an existing breakpoint would be wise, like you have in your example link.
Try putting the logo in your html twice, and show/hide either one with css via media queries matching that same breakpoint. See: http://bootply.com/103276.