im new in web design,i have a kendo chart,when the number category axes is 12 or less,its fine and readable, problem starts when number of category axis increase to 20 or more,in this case what could be the solution?below is the css and also the screenshot of what happens when the number of entries increase,
Here is the CSS:
<div style="width:1200px;margin-top:20px">
<div id="faultstatSubCat" style="width:40%;float:left;margin-left:35px;">
</div>
<div id="faultStatTurbineName" style="width:60%;float:right">
</div>
</div>
The chart is the one with 60% of width and floated right ,left one is another chart,i attached the careen shot also
Related
I'm new in Angular and Bootsrap 4, and I'm having trouble setting up the layout for a dashboard I'm currently working on. I have a series of cards that need to be arranged in a particular way, as follows:
I have a row, in which I have put a col-12 div, and inside I have placed all the cards (1,2 and 3 are static content, the others are loaded with a ngFor, from a list that comes from the database).
The problem with this is that since card 1's has double height relative to all the others, cols for 2 and 3 are the same height as the col for card one. The result is as follows:
Is there a way to fix this using my approach, say, having the extra empty space in the colums for the cards 2 and 3 taken away, and place the other cards in there? Or should I use a completely different approach?
edit: Here's the code I've used.
<div class="col-lg-12">
<div class="row">
<div class="double-card-col">
<app-tool-card-double-1></app-tool-card-double-1>
</div>
<div class="cards">
<tool-card-2></tool-card-2>
<tool-card-3></tool-card-3>
</div>
<ng-container *ngFor="let tool of tools; trackBy: trackBy">
<tool-card></tool-card>
</ng-container>
</div>
I am download an 1200px grid css from here: http://1200px.com/
I thought, it is really simple to just create a two column page layout.
So let's say:
<div class="container_15">
<div class="clearfix">
<div class="grid_7">
test
</div>
<div class="grid_7">
test
</div>
</div>
</div>
and it's not good, there are space after second div.
Tried to play with push, etc... no success.
I've downloded the PSD and I saw, there are 15 columns. I am wondering, how can I create a two / three / four columned layout?
Can somebody help me with this?
I've not had direct experience with this grid system but you could always change the settings on the site and download a new version of the css file. 12 columns is a good number as you can easily create the 2, 3 & 4 column layouts.
You are specifying a 15 column grid (.container_15) and then using two columns that only add up to 14 columns.
So of course you are going to have a gap after the second column - a one column gap....
I've got a form tool with two lists and a set of tools between them that is laid out in three columns on larger screens like so...
<div class="row">
<div class="col-md-5">
AVAILABLE LIST (1)
</div>
<div class="col-md-2">
MOVEMENT BUTTONS (2)
</div>
<div class="col-md-5">
SELECTED LIST (3)
</div>
</div>
... as you can see, for the xs and sm viewports, the layout should switch to a full width stacked list. What I would like to do is to swap the positions of the MOVEMENT BUTTONS and SELECTED LIST columns on those smaller view ports so that the tools are the last row (1-2-3 => 1-3-2).
The problem I'm having is that when I add classes like col-xs-pull-* col-sm-pull-* to the SELECTED LIST, and col-xs-push-* col-sm-push-* to the MOVEMENT BUTTONS columns, the buttons column dissapears and the selected list is out of alignment. I've tried corresponding col-*-push/pull values of 1 (because anything should swap them when they're full width, shouldn't they?) and 12 (just in case), both have the same unintended result.
How can I apply push/pull modifier classes to the two columns in question to achieve reordered stacking on xs and sm viewports?
One important thing to realize about Twitter Bootstrap is that they take a mobile-first design mindset. This means that classes that apply to extra-small screens will apply all the way up to large screens unless you overload them.
This is also true for the push and pull classes. So what you need to do is layout the buttons the way you intend for them to be in a small screen and then push/pull them in larger screens to where you want them.
In other words, put the buttons in your HTML where you want them in small screens and use the push/pull medium classes to move them in larger screens.
Edit
I've created a Bootply demonstrating the concept of pushing and pulling. See if that makes sense.
The gist of it is this:
<div class="col-md-5">
AVAILABLE LIST (1)
</div>
<div class="col-md-5 col-md-push-2">
SELECTED LIST (3)
</div>
<div class="col-md-2 col-md-pull-5">
MOVEMENT BUTTONS (2)
</div>
A push class moves an element to the right a number of columns and the pull class moves an element to the left a number of columns. For example, if you want to switch two elements, the first of size 3 and the second of size 6, you will need to push the first 6 columns and pull the second 3 columns, effectively switching their positions.
The new Bootstrap three documentation explains the grid behaviour as "Horizontal at all times" for extra small devices. What does this mean? Surely on a small device all columns would be stacked vertically upon one another? What's failing me here is my (lack of) understanding of what a grid is.
I'm coming from a non-designers perspective, and trying to iterate over a number of products into a responsive grid. The number of columns within each row will change dependant on whether an odd or even number of products is being displayed. <-- Bootstrap, and alike seems simple with static content over dynamic pages. For example, must we insert empty <div class="col-xs*"></div> to make it up to 12?
What "Horizontal at all times" means is that there is no breakpoint at which col-xs-* will change from being floated to stacked. For example:
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
In this example, there will always be two columns of equal size, whether you are on a phone, tablet, or desktop. For contrast:
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
In this example, the columns will be stacked until the viewport of the device is >=768, at which point it will switch to two columns of equal size.
The question you might be asking yourself is "Why all of these variations?" Well, what these options give us is the ability to customize the layout on various devices without having to get our hands dirty in CSS. For example, if I wanted two equal columns on a phone, but a 75/25 split on tablets and up, I would do the following:
<div class="col-xs-6 col-sm-8"></div>
<div class="col-xs-6 col-sm-4"></div>
If you wanted stacked on phones, equal on tablet, and 75/25 on desktop, then do this:
<div class="col-sm-6 col-md-8"></div>
<div class="col-sm-6 col-md-4"></div>
Because you are not explicitly specifying a grid for the phone, it is going to revert to stacked.
To get a solid feel, throw some simple grids together, and then start resizing your browser. You should be able to see how it changes much more easily than in the docs themselves.
EDIT
Thought of one other example that might be of interest: two equal columns at both phone and tablet, then 75/25 and desktop. The code:
<div class="col-xs-6 col-md-8"></div>
<div class="col-xs-6 col-md-4"></div>
This is actually a great illustration of "Horizontal at all times." Because we are not specifying a col-sm, col-xs continues to be enforced until we hit the desktop breakpoint, which is set at >=992.
I am creating an HTML web page, which comprises of three vertical columns. The columns contain different content - including form elements (selects etc).
However, I would like the text lines to "line up" accross all three columns (not sure if I'm using the correct terminolgy here).
At the moment, the text in columns 1, 2 and three (using the 1st column text as a reference), are not "lined up" - that is to say that if a virtual horizontal line was to be drawn accross the three columns, the text on column 1 would be on the line (since it is the reference column), and the text in columns 2 and 3 are NOT on the same horizontal line.
Is there a CSS rule I can use to ensure that the texts "line up" accross all columns - even though some columns may contain form controls, images etc?
that's normal to have them not lined up, they might have titles and other content in between, but anyways if you want to line things up equally you do line-height:25px; /or whatever you want/, it would be easier if you pasted some code here or at jsfiddle.net
A simple solution would be to split your columns on the horizontal as well. So, instead of having:
<div class="col1">forms, images + text</div>
<div class="col2">forms, images + text</div>
<div class="col3">forms, images + text</div>
you can have the following:
<div class="top-col1">forms, images</div>
<div class="top-col2">forms, images</div>
<div class="top-col3">forms, images</div>
// I assume the columns are floated so you'll probably have
// something like <br class="clear"/> here
<div class="bottom-col1">text</div>
<div class="bottom-col2">text</div>
<div class="bottom-col3">text</div>