I have a div and I want to show it on bottom of click of another div just like the popover but with position relative to my first set of divs..
I am using angular to loop through the divs.I am trying the following code but doesnt seem to be working.. Is there any way using jquery or css tweaking i can achieve this?
*EDIT - The output needed is like in a row i"ll display say 3 options, in next row another 3. If i click on any option . The hidden div should appear just below the option I clicked and in between first and second row.
My code
My Controller code: -
app.controller('MyCtrl', ['$scope',
function($scope) {
$scope.options = [{
name: 'First Option',
value: '1st answer'
}, {
name: 'Second Option',
value: '2nd answer'
}, {
name: 'Third Option',
value: '3rd answer'
}, {
name: 'Fourth option',
value: '4th answer'
}];
}
]);
.btn-option {
width: 30%;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.change-answer {
width: 30%;
min-height: 100px;
background-color=#f6f6f6;
border 1px solid #DDD;
position: relative;
clear: both;
}
I have a div and I want to show it on bottom of click of another div. I am using angular to loop through the divs. My HTML code
<div class="clearfix">
<div ng-repeat="option in options">
<div class="btn-options">
{{option.name}}
</div>
<button class="change-answer">Show Me just below the option on clicking any of the option.{{option.value}}
</button>
</div>
</div>
Related
I am using BalkanGraph plugin and I'm trying to align the first parent node of the orgchart to the top of the svg instead of the center of it.
I tried to set a negative "margin-top" and increases the height of the whole svg, but then the click goes with it, and it doesn't work well.
My only css is this:
#tree {
width: 100%;
height: 630px;
border: 1px solid lightgray;
background-color: #fff;
}
and the things I am using in Orgchart are these:
var chart = new OrgChart(document.getElementById("tree"), {
mouseScroolBehaviour: BALKANGraph.action.zoom,
nodeMouseClickBehaviour: BALKANGraph.action.none,
scaleInitial: BALKANGraph.match.boundary,
collapse: {
level: 2,
allChildren: true
},
});
Set align option to BALKANGraph.ORIENTATION
var chart = new OrgChart(document.getElementById("tree"), {
align: BALKANGraph.ORIENTATION,
...
});
I need to center a google line chart.
The problem is, I cannot use align = "center" because it causes my tooltip hover to lag behind, I'm not sure why.
I found a way to center the chart in the inspector by removing position: relative two divs deep in my chart div.
I thought to override this with
#electricalLineChart div div{
position: static!important
}
But it ignores this code even with !important
I haven't found anything in the documentation that addresses positioning. I tried using legend just for kicks but it doesn't seem to do anything.
Here is my chart code:
// line chart
var linechart1 = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'electricalLineChart',
dataTable: joinedData,
options: {
colors: ['#4DC3FA', '#185875'],
animation: {
duration: 1000,
easing: 'out',
},
width: 800,
height: 500,
legend: { position: 'static'},
title: 'Line Chart',
explorer: {},
hAxis: {
title: 'Month'
},
vAxis: {
format: formatPattern
//title: 'Amount Billed ($), Consumption (kWh)',
}
},
});
RELEVENT HTML:
<div style="overflow-x:auto;">
<table class="container">
<tbody id="electrical-tables">
<tr id="odd-cells">
<td>
<div id="electricalLineChart"></div>
</td>
</tr>
.... other rows removed for clarity
</tbody>
</table>
</div>
RELEVENT CSS:
#electricalLineChart, #Request_line_chart1{
width: 80%;
margin: auto;
}
Essentially, the third div down in the image with dir= "ltr" needs to be position: static not position: relative.
the problem, <div> elements are block elements, which means they expand the total width of their parent element.
even though the chart does not take up the entire width,
the <div> still expands to the width of the parent.
to prevent this behavior, add the following css to the <div>,
which will allow it to be centered...
display: inline-block;
e.g.
#electricalLineChart, #Request_line_chart1{
width: 80%;
margin: auto;
display: inline-block;
}
I'm using treepanel object in ExtJs and I want to create two div side by side inside treepanel items. Is it possible to set one of them's width fluid and the other's width auto ? Actually, html and css codes work properly but when I put them inside treepanel item's text property it's not working. Where I am doing a mistake ?
Here is a part of my Extjs Code;
{
xtype: 'treepanel',
cls: 'wikiTreePanel',
root: {
text:
'<div class="treeItemTitleWrapper">'+
'<div class="countSide"><span>12</span></div>'+
'<div class="titleSide">Main Wiki Title Main Wiki Title Main Wiki Title</div>'+
'</div>',
expanded: true,
}}
Here is my html and css code;
.treeItemTitleWrapper{
display: inline-block;
width: 100%;
height: 26px;
overflow: hidden;
}
.treeItemTitleWrapper .titleSide{
background: orange;
line-height: 26px;
height: 26px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.treeItemTitleWrapper .countSide{
float: right;
height: 26px;
background: pink;
}
<div class="treeItemTitleWrapper">
<div class="countSide"><span>12121212</span></div>
<div class="titleSide">Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title</div>
</div>
How can I do that. Thanks for your assistance.
You input is a little unclear. As per my understanding if you want to reduce the title to few characters, you can use the below method.
Ext.util.Format.ellipsis('Custom Title', 6);
Ext.util.Format.ellipsis
I have two html elements and I want to bind the size of one to the size of another like:
<div id="elem1"> </div>
<div style="height:some binding expression to the height of elem1;
width:another binding expression to width of elem1"></div>
Is this even possible? The binding only needs to happen once.
Use the ng-style directive on the second element. You can set styling on the elements via object form, and is automatically updated when the value changes.
On page load, calculate the height of elem1 and set it to a scope variable, lets say:
$scope.elemStyle = {
height: calculated_elem1_height
}
Then your second element
<div ng-style="elemStyle"></div>
Every time you update the variable $scope.elemStyle, the DOM will be updated.
EDIT
calculated_elem1_height needs to be a string, Eg: "100px"
$timeout will ensure the DOM is loaded
var test = angular.module("myApp", []);
test.directive('equalTo', function($timeout) {
return function(scope, element, attrs) {
$timeout(function() {
var e = angular.element(document.querySelector(attrs['element']))[0]
element.css("width", e.offsetWidth + "px")
element.css("height", e.offsetHeight + "px")
}, 0);
};
});
#elem1 {
background: red;
display: inline-block;
width: 200px;
height: 150px;
}
#elem2 {
background: black;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div id="elem1"> </div>
<div id="elem2" equal-to element="#elem1"></div>
</body>
I am using angularjs and zurb foundation. I have ng-repeat creating a row for each item in items. Each row itself has two rows within. I am using position relative to move the second inner row up behind the first inner row. The first row has z-index 1 to move it on top. The goal is to create a menu that is hidden behind a div initially.
Seems to work except for one flaw. The problem I am having is that it seems that the directive has its height set to the initial height of its content. So the directive is 12em tall while the content is only in the top half.
Forcing the directive to be 6em tall works for the first item but the subsequent ones have the content of the back row all jibbly wibbly! (I believe that is the scientific term)
Any help would be appreciated. Smashing my head against the keyboard is usually my 'go to' in these situations, but it hasn't helped in this case.
Sample
//index.html
<div ng-repeat='item in items'>
<div directive></div>//ends up 12em
</div>
//directive.html
<div class="row front">//6em tall
//content
</div>
<div class="row back">//moved 6em up
//Menu with buttons
</div>
//style.css
front: {
height: 6em;
z-index: 1;
}
back: {
height: 6em;
position: relative;
top: -6em;
}
The problem is that you are trying to position two divs with relative positioning. They don't need to be relative since they are intended to occupy the same space.
Make the parent div use relative positioning:
.parent { position: relative; }
.front { position: absolute; top: 0; height: 6em; }
.back { position: absolute: top:0; height: 6em }
https://docs.angularjs.org/api/ng/directive/ngRepeat
This is how I would do it:
app.directive('row front', function() {
return {
restrict: '6pm',
scope: {
collection: '=',
columnCount: '='
},
transclude: true,
template: '<div><div class="column" ng-repeat="col in cols">' +
'<div ng-repeat="item in col" ng-transclude></div>' +
'</div></div>',
link: function( scope ) {
var partition = function partition( size, items ) {
if ( items.length === 0 ) { return []; }
return ([items.slice( 0, size )]).concat( partition( size, items.slice( size )));
};
var relativenize = function() {
if ( !scope.columnCount ) { return; }
scope.cols = partition( scope.columnCount, scope.collection );
};
scope.$watch('columnCount', columnize );
scope.$watch('collection', columnize );
}
};
});