I'm having an issue trying to get two divs that are side by side the same height when the content for each of the divs are generated using an ng-repeat.
Flex box stops the site being responsive and i can't work out when would be a suitable time to call a Jquery function as the views are nested and the page doesn't actually load when the new html is displayed. I have tried ng-repeat-start and end to no avail.
Ideally once the content has loaded i would the div on the right to be the same height as the div on the left.
Would really appreciate any help with the problem.
Cheers
EDIT - Code Included
<div class="row">
<div class="noSpacing col-xs-6">
<div class="col-xs-12 noSpacing rottnestGreen">
<div ng-repeat="bh in bikeHire" class="row">
<p class="col-xs-6">{{bh.type}}</p>
<select class="inline col-xs-3 noSpacing np" ng-model="bikeHire[$index].quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(bh.type, bikeHire[$index].quantity, bh.price)"></select>
<p class="col-xs-3 blueText">{{bh.price | currency}}</p>
</div>
</div>
</div>
<div class="noSpacing col-xs-6">
<div class="col-xs-12 noSpacing np rottnestGreen">
<div ng-repeat="sf in sAndF" class="row">
<p class="col-xs-6">{{sf.type}}</p>
<select class="inline col-xs-3 noSpacing np" ng-model="sf.quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(sf.type, sf.quantity, sf.price)"></select>
<p class="blueText col-xs-3">{{sf.price | currency}}</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
Is it something like this you are looking for? https://jsfiddle.net/yczgaLgm/2/
Wrapping everything in a container:
<div class="row container">
And then styling the container to use flexing is the way I usually do this
.container {
display: flex;
flex-wrap: wrap;
}
The biggest downside though is IE support, I dont hope you are supporting below IE10?
Related
I'm making a django-based web app that has bootstrap cards with some graphs inside of them. I'm using bootstrap so both the graphs and the cards are responsive; however at some screen sizes, the graphs extend beyond the size of the cards. Is there a way to force everything in a card (or some other container) to say inside the container?
Partial html code. Can post the graph code if helpful - it is written in python + plotly. I'm not sure if the problem is with the graphing or with the html/script.
<div class="container">
<h2 class="pb-2 border-bottom mt-4">Scores for {{ user.username }} </h2>
<div class="row mb-4 mt-4">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-titler">Result</h5>
<p style="color:gray;"> {{last_test_date | safe}}</p>
{{score | safe}}
<!-- <div class="chart" id="bargraph1", style="height: 150px">-->
<div class="chart" id="bargraph1">
<script>
var graphs = {{plot1 | safe}}
</script>
</div>
Learn More
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Results Over Time</h5>
<br>
<!--<div class="chart" id="bargraph2", style="height: 225px">-->
<div class="chart" id="bargraph2">
<script>
var graphs = {{plot2 | safe}}
</script>
</div>
</div>
</div>
</div>
</div>
reference
CSS Units - What is the difference between vh/vw and %?
You can try editing the CSS of bar graph1&2 as out of 100%. the percent at the end can apply to a fixed parent container like card-body
Give 100% width to the graphs.
#bargraph1,#bargraph2{
width:100%;
}
Is there a way using Javascript, to pull a portion of a class name in order (top to bottom) on a web app? I have an issue where I need to get information on a 3rd party web app we are integrating into our site. I can't change their code. What I want to do is take the class name (e.g. class="index solid-shape-large-rating-fair AnalysisCategory" or class="index solid-shape-large-rating-poor AnalysisCategory" etc.) and grab the value after "rating-" in the class name (class="index solid-shape-large-rating-[want this value] AnalysisCategory"). So in the example I have, I would get back, in this order, top to bottom, "fair", "poor" and "excellent". Is this possible? If so how? Please be aware there will be more mark-up between elements in my example, if that impacts the answer? I just cleaned up the non-related code for presentation purposes. They aren't stacked directly on top of each other as in my example.
///////Top Element//////////
<div class="stack-item">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 text-center index-area">
<label tabindex="0">YOUR INDUSTRY BORROWING HISTORY</label>
<div class="index solid-shape-large-rating-fair AnalysisCategory">
MODERATE RISK
</div>
</div>
</div>
</div>
//////////////Middle Element////////////////////
<div class="stack-item">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 text-center index-area">
<label tabindex="0">TENURE OF YOUR BUSINESS</label>
<div class="index solid-shape-large-rating-poor AnalysisCategory">
POTENTIAL CONCERN
</div>
</div>
</div>
</div>
////////////Bottom Element/////////////
<div class="stack-item" style="">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 text-center index-area">
<label tabindex="0">YOUR BUSINESS PROFITABILITY</label>
<div class="index solid-shape-large-rating-excellent AnalysisCategory">
EXCELLENT
</div>
</div>
</div>
</div>
Thank you!
I found this answer on another site.
$(function() {
$('[class*="solid-shape-large-rating-"]').each(function(i, e) {
var result = this.className.match(/solid-shape-large-rating-(.*?)\s+/);
console.log(result[1]);
});
});
I want to display a list of custom cards using ng-repeat directive, but it keeps displaying vertically.
<style>
li{
display: inline
}
</style>
<div ng-init="names=['Jani','Hege','Kai']">
<ul >
<li ng-repeat="x in names">
<div class="row">
<div class="col s12 m2 20 " >
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title" id="dani">{{x}}</span>
<p id="p">I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
What am I doing wrong?
UPDATE:
display: inline-flex;
fixes the problem, but puts the objects one after another on the same row. I want to go to a next row after lets say, 4 objects, so how can i set this up?
Update 2:
here's what i want to achieve:
so after 3 card displayed horizontally the line to increase :)
for li tag use floating to left
li {
float: left;
}
additionaly for ul add list-style-type:none;
The problem is that your repeat is on the line item. You are literally telling it that you want it vertically. Move your repeat to the span tag, you may also need to add display of inline-block and set a width on your span. Try this:
<div ng-init="names=['Jani','Hege','Kai']">
<ul >
<li>
<div ng-init="names=['Jani','Hege','Kai']">
<ul >
<li>
<div class="row">
<div class="col s12 m2 20 " >
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span style="display:inline-block; width:100px" ng-repeat="x in names" class="card-title" id="dani">{{x}}<br>
<span style="display:inline-block" id="p">I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</span></span>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Here is a Plunker. Let me know if this is not what you were trying to do.
I need to find a better solution regarding ng-repeat, $scope variable and infinite $digest loop. I'm sure it's not $watch issue and I'm sure it's in the way I'm updating my $scope variable.
The issue doesn't happen in Chrome. It only happens in Safari and Firefox. This is how I'm doing it. I have a $scope.chartCollection which is dynamically populated with Google Chart objects. The $scope.chartCollection can have 1 or more google chart objects depending on my selection.
In my html template, I have this code,
<div ng-repeat="device in chartCollection">
<div class="col-md-6 padding10px">
<div class="widget enable-top-radius chartProperties">
<div class="widget-title enable-top-radius dark-gray-title">
<h4>
<span class="alignleft">
<i class="fa fa-circle" ng-style="{ color : device.dotColor }"></i><span class="padding5px">{{printerTypeName}}</span><span class="padding5px">|</span><span class="padding5px" popover="{{device.modelOrLocation }}" popover-trigger="mouseenter">{{ device.modelOrLocation }}</span>
</span>
</h4>
<span class="alignright">{{device.location | uppercase }}</span>
<div style="clear: both;" class="padding5px"></div>
</div>
<div class="widget-body">
<div google-chart chart="device.chart" on-select="seriesSelected(selectedItem, $index)"></div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 no-padding chartInfoBox">{{dateForGraph}}</div>
<div class="col-md-12 col-sm-12 col-xs-12 no-padding">
<div class="col-md-4 col-sm-4 col-xs-4 odometerChartFooter">
<div class="odometerFooterFieldValue" ng-bind="device.leftCellNumber | number"></div>
<div class="odometerFooterFieldKey" ng-bind="device.leftCellText"></div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 odometerChartFooter">
<div class="odometerFooterFieldValue" ng-bind="device.middleCellNumber | number"></div>
<div class="odometerFooterFieldKey" ng-bind="device.middleCellText"></div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 odometerChartFooter">
<div class="odometerFooterFieldValue" ng-bind="device.rightCellNumber | number"></div>
<div class="odometerFooterFieldKey" ng-bind="device.rightCellText"></div>
</div>
</div>
</div>
</div>
so that I can display each chart in separate divs. It works really well in Chrome but not in Firefox and Safari.
I'm getting this error in Firefox and Safari
https://docs.angularjs.org/error/$rootScope/infdig?p0=10&p1=%5B%5B%5D,%5B%5D,%5B%5D,%5B%5D,%5B%5D%5D
And my situation is similar to the second example they mentioned which generates a new array. However, in my situation, it will always be a new array.
I was thinking of not using ng-repeat and use $scope.chart1, $scope.chart2 etc but the problem with this approach is that I cannot tell if there will be 1, 10 or 20 charts since everything is generated dynamically. Code will be very messy!
Update:
Here is the code that generates the chart objects
http://pastebin.com/DmQkDHjW
I have this sortable's structure (it's a portlet).
<div id="sortable">
<div class="row">
<div class="window"></div>
<div class="gripper_v"></div>
<div class="window"></div>
</div>
<div class="gripper_h"></div>
<div class="row">
<div class="window"></div>
<div class="gripper_v"></div>
<div class="window"></div>
</div>
<div class="gripper_h"></div>
<div class="row">
<div class="window"></div>
<div class="gripper_v"></div>
<div class="window"></div>
</div>
</div>
'window' elements are sortables. Grippers shouldn't be sortables. I've specified in the Sortable options:
{ items: '.window' }
But I'm seeing that windows are sorted over grippers while I drag, which I don't want to. I want grippers to be invisible to the Sortable.
EDIT: Grippers are used to resize windows in both X and Y axis. With the given html code i will get this portlet.
PORTLET IMAGE
The problem occurs when sorting between windows of the same row (".gripper_v")
I'm not sure exactly what you're trying to do here (a screenshot might help), is the "gripper" the part of the "window" where the user should click to drag?
If that's the case, try adding the gripper within the window element like this:
<div id="sortable">
<div class="window">
<div class="gripper"></div>
</div>
<div class="window">
<div class="gripper"></div>
</div>
</div>