I am trying to make a dashboard to represent a few charts and some numbers. I have a parent div which has a class for it. Inside this div their are divs for charts and numbers. Now if the div for charts inherits the class from the parent that is fine considering the size of the charts. However the divs which display number should be of smaller size and I have applied another class for it. But the divs for numbers always take the parents div style . Is their a way the child divs would not take the parents div class.
Below are the images on how I am getting it now and how I am trying to get to.
CURRENTLY :
HOW IT SHOULD BE:
Below is the code on how it is currently.
<div class="col-md-6 " style=" padding-bottom: 15px;" ng-repeat="obj in tab" ng-include="'chartstemplate'">
<div class="col-xs-3">
<div ng-if="charts_type =='Number'" class="block" style=" padding-bottom: 30px;font-size: 45px;font-weight: 700; margin-right: -70px;">
<!-- <div ng-if="charts_type =='Number'" style=" height: 70px;font-size: 45px;margin-top: 30px;font-weight: 700;margin-left:180px; width: 16.66667% !important;">-->
<dash-board ng-if="obj.chart_data" chart-data="obj.chart_data" />
</div>
</div>
<div class="svg-container" ng-if="charts_type =='Bar'" style="width: 440px; height: 430px;">
<bars-chart ng-if="obj.chart_data" chart-data="obj.chart_data" />
</div>
<div class="svg-container" ng-if="charts_type =='Bar'" style="width: 440px; height: 430px;">
<bars-chart ng-if="obj.chart_data" chart-data="obj.chart_data" />
</div>
<div class="svg-container" ng-if="charts_type =='Bar'" style="width: 440px; height: 430px;">
<bars-chart ng-if="obj.chart_data" chart-data="obj.chart_data" />
</div>
</div>
Either specifically override the inherited propert, or look into the :not() pseudo selector
I think there is a problem with your column structure. I can show you how your structure can be -
<div class="col-md-6">
*charts*
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
*number*
</div>
<div class="col-md-6">
*number*
</div>
</div>
<div class="row">
<div class="col-md-6">
*number*
</div>
<div class="col-md-6">
*number*
</div>
</div>
</div>
Related
<div class="container container-fluid">
<div class="row">
<div class="col-lg-6">
<app-profile [conId]="conId"></app-profile>
</div>
<div class="col-lg-6">
<app-sales [conId]="conId"></app-sales>
</div>
</div>
</div>
I have no idea why this is happening.
Could it possibly be because I'm wrapping Angular component tags in the Bootstrap rows and columns? I'm almost certain I've done something like this before and it worked.
I've attached a picture of what's happening and highlighted where it's over lapping.
Edit:
Seems to look good if I remove the component tags and add some background color. So it may actually have something to do with the components themselves?
<div class="row">
<div style="background-color: red; height: 20px;" class="col-lg-6">
</div>
<div style="background-color: yellow; height: 20px;" class="col-lg-6">
</div>
</div>
Columns
Is there a way to avoid such use of ng-repeat.
To fix the issue ,I used two ng-repeat using the option limitTo to display each 3 element separately.
What I want to do is ,to insert my elements and after each 3 elements ,So I add
<div class="row"> </div>
Below is my code:
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row l-b-margin">
<div class="col-md-4" ng-repeat="name in Courses|limitTo:3">
<div class="well well-white">
<img alt="R Programming" class="center-block l-b-margin"
height="100" ng-src="{{name.logo}}" width="100" />
<h6 style="text-align: center; color: #516979; font-size: 21px">{{name.name}}</h6>
<p class="text-space l-b-margin">Write your first code here</p>
<a class="rounded-button cta-border-button center-block m-button"
href="courses/introduction-to-r">Start Course</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4" ng-repeat="name in Courses|limitTo:-3">
<div class="well well-white">
<img alt="Data Manipulation" class="center-block l-b-margin"
height="100" ng-src="{{name.logo}}" width="100" />
<h6 style="text-align: center; color: #516979; font-size: 21px">{{name.name}}</h6>
<p class="text-space l-b-margin">Write your first code here</p>
<a class="rounded-button cta-border-button center-block m-button"
href="courses/data-table-data-manipulation-r-tutorial">Start
Course</a>
</div>
</div>
</div>
</div>
</div>
The simple way to do is use ($index+1)%3==0 with ng-if and put the below element at the end of ng-repeat.
<div class="row" ng-if="($index+1)%3==0"> </div>
Plunker
Hope it helps :)
What you're seem to be doing is trying to prevent this situation from happening: (some blocks shifts to the next row if not all have equal heights)
If that's the case you can (and should;) ) fix it via simple css: (just add a custom class to the div your iterating over)
.my-block:nth-child(3n+1) {
clear: left;
}
I have managed to create a page that looks like this:
<div class="container">
<div class="row fullscreen">
<div class="col-md-6 pink-panel">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12 gray-panel">
</div>
</div>
<div class="row">
<div class="col-md-6 orange-panel">
</div>
<div class="col-md-6 black-panel">
</div>
</div>
</div>
</div>
</div>
You can view it here
The problem I have is that I would like to have a small margin between each panel (right and top). If I add top margin I get this:
http://codepen.io/r3plica/pen/jPVQqy
which you can see makes the rows not line up anymore, which is not what I want. Similarly, if I add a right margin, predictably I get this:
http://codepen.io/r3plica/pen/NqbErr
Now I know the reason for both these issues. I could try and write some JavaScript to help me fix the issue, but I would prefer to solve this in pure CSS.
Has anyone encountered this issue before and solved it?
you could nest your color-panels
<div class="container">
<div class="row fullscreen">
<div class="col-md-6">
<div class="col-md-12">
<div class="pink-panel">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="gray-panel">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="orange-panel">
</div>
</div>
<div class="col-md-6">
<div class="black-panel">
</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/0z76regv/
You must remember that bootstrap uses specific margins and paddings for its layout (e.g. negative margins for row classes) To fit elements in desired way you should remember that each col-* block has its width described in percentage.
I would suggest two solutions:
Overloading default percentage for columns if you don't mind changing 5px to arbitrary values. You could e.g. set col-md-6 classes to use only 49.5% of its width and remaining 0.5% for margins.
http://codepen.io/anon/pen/QbGJgp
.col-md-6 {
width: 49.5%;
margin-right: 0.5%;
}
.row {
margin-bottom: 0.5%;
}
Using calc() function to substract aforementioned 5px from proper elements. More info: https://developer.mozilla.org/en-US/docs/Web/CSS/calc, however this functionality isn't very compatible with older browsers: http://caniuse.com/#feat=calc.
http://codepen.io/anon/pen/yNVQoz
.col-md-6 {
width: calc(50% - 5px);
margin-right: 5px;
}
I have the following page and I want the textarea width to take up the rest of the width of the page but the width style isn't changing the size at all and I'm not sure why. If I change the txtChatMsg textarea width style to anything nothing changes visually.
<div class="container-fluid">
<div class="row" style="margin-top: 10px; background-color: aqua;">
<div id="divPortrait" class="col-md-3 text-center">
<img src="~/Content/good_guy.png" />
</div>
<div id="divChat" class="col-md-9" style="background-color: gray;">
<div class="row">
<div id="divMessages">
<!--DYNAMICALLY ADD DIVS FOR EACH CHAT MSG INSIDE HERE-->
<div>
Test Message here
</div>
</div>
</div>
<div class="row" style="background-color: red;">
<textarea id="txtChatMsg" class="form-control" style="width: 100%;" rows="2" placeholder="Write a reply..."></textarea>
</div>
<div class="row text-right" style="margin-top: 5px;">
<button type="button" class="btn btn-default">Send</button>
</div>
</div>
</div>
As dm4web stated, there's something external to the code that you you posted that is causing this behavior. To prove it, here's a JSFiddle where the style on the txtChatMsg element has been changed to width: 50%.
You could try inspecting the txtChatMsg element in your browser to see if there's any styles overriding the CSS width rule. I'd also check to see if there's any Javascript that is potentially targeting this div and overriding the width.
The following is my HTML:
<div class=container">
<div class="row">
<h2 class="text-center">Enter your name below</h2>
<div class="col-md-6 center">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
<div class="col-md-6 center">
<h3>Profile name: N/A</h3>
<h3>Status: Waiting for user input</h3>
</div>
</div>
</div>
My css is the following (along with bootstrap):
.profile-picture
{
max-width: 200px;
max-height: 200px;
}
.center
{
margin: 0 auto;
float: none;
}
This produces the following output:
The way I want it to display is as shown below:
How can I achieve this? Shouldn't they get displayed on the SAME line seeing as they are part of the same row? Each has a length of 6 so why don't they horizontally align?
The problem is you're removing the necessary float on the columns (by setting float:none to .center). Remove that .center class altogether, it's not needed. You are also missing row divs...
Note, I added a row around the the h2 tag as well. For ease-of-use and proper formatting, that tag needs to be wrapped as well. Helps keep the formatting in check. ;)
Also, you shouldn't have two <h3> tags one after another like that. Use <p> instead of the second h3 - or better yet, just use one <h3> tag and use <br /> to break the one h3 into two lines (see below).
<div class=container">
<div class="row">
<h2 class="text-center">Enter your name below</h2>
</div>
<div class="row">
<div class="col-md-6">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
<div class="col-md-6">
<h3>Profile name: N/A <br />
Status: Waiting for user input</h3>
</div>
</div>
</div>
Never apply any styles or classes to elements with grid classes, if you're not really know what you are doing. Use a nested div instead if you need to change something:
<div class=container">
<h2 class="text-center">Enter your name below</h2>
<div class ="row">
<div class="col-md-6">
<div class ="center">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
</div>
<div class="col-md-6">
<div class ="center">
<h3>Profile name: N/A</h3>
<h3>Status: Waiting for user input</h3>
</div>
</div>
</div>
</div>
With Bootstrap, you have to include a div with an class of row, so something like this:
<div class="row">
<div class="col-md-6 center">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
<div class="col-md-6 center">
<h3>Profile name: N/A</h3>
<h3>Status: Waiting for user input</h3>
</div>
</div>
See Bootstrap's documentation on their grid system.