I am getting started with bootstrap grid and am trying to get this layout ready.[![enter image description here][1]][1]
I am a bit confused about how to divide the the three main columns into separate parts so I can place the corresponding text/images as shown in the figure
I started creating a basic layout but I am not able to get it to the right point:
<div class="row" style="border: 1px solid;">
<div class="col-xs-4">
<div class="col-xs-12 col-md-offset-4">
XXX
</div>
<div class="col-xs-12 ">
<div class="col-xs-12 ">
first column second
</div>
<!--<div class="col-xs-12 ">
first column second
</div>-->
</div>
</div>
<div class="col-xs-4" style="border: 1px solid;">
<div class="col-xs-12 ">
second column first
</div>
<div class="col-xs-12 ">
second column second
</div>
</div>
<div class="col-xs-4" style="border: 1px solid;">
<div class="col-xs-12 ">
third column first
</div>
</div>
</div>
I tried to centralize the first row in the first column which seem to look OK. But then, I am not able to divide the second row into separate columns. And similar issues will be there for 2nd and 3rd columns. Can you give some pointers on how to go about getting the attached layout?
Bootstrap works using a 12 column layout. So if you would like 2 equal columns you would need to set each value as 6.
Using your example for the second column you would put
<div class="col-xs-4" style="border: 1px solid;">
<div class="col-xs-6 ">
second column first
</div>
<div class="col-xs-6 ">
second column second
</div>
</div>
Thanks
Related
Hi I create team (It works), but I want to calculate prices. When you choose player (his price is available), I want to subtract from default price. So default price is 100 and if you choose player who cost 5, angular calculate to 95 and then send to database.
extract of HTML of one player:
<mat-form-field>
<mat-select placeholder="Goalkeepers" formControlName="goalkeeper">
<mat-option *ngFor="let player of goalkeepers" [value]="player.id">
{{player.name}} {{player.surename}} ({{player.price}}M)
</mat-option>
</mat-select>
<mat-error *ngIf="form.get('goalkeeper').invalid">Pleasse enter a goalkeeper.</mat-error>
</mat-form-field>
And than I have badget of team:
<p *ngFor="let userTeam of userTeamDetails">
<span *ngIf="userTeam.badget">
Tvoje dostupne peniaze: {{userTeam.badget}}M €
</span>
</p>
I tried to make {{userTeam.badget - player.price}}, but userTeam was not known and I don´t want to see in every player price.
What possibilities I have to calculate this? I don´t have any idea. Thanks.
You can use ng-container in conjunction with ngIf to conditionally display the calculated price only when the team and its budget exists. Example:
<mat-option *ngFor="let player of goalkeepers" [value]="player.id">
{{player.name}} {{player.surename}} ({{player.price}}M)
<ng-container *ngIf="userTeam?.badget">{{userTeam.badget - player.price}}</ng-container>
</mat-option>
I have a large excel data sheet with thousands of rows and its filled with html codes with less than and greater than tags containing codes and other real information is outside of tags. Like;
Cables Supported </TD> <td class="specDetail fs18" data-selenium="specDetail"> RG-6 coax </TD> </TR> <tr> <td class="specTopic fs18" data-selenium="specTopic"> Weight Supported </TD> <td class="specDetail fs18" data-selenium="specDetail"> 80 lb (36 kg) </TD> </TR> </TBODY> </TABLE> <table class="specTable" data-selenium="specTable"> <tbody data-selenium="specBody"> <tr> <th class="specHeader Header" colspan="2" data-selenium="specHeader"> <a name="shipping" class="fs32 OpenSans-300-normal" id="shipping" data-selenium="specHeaderLink">Packaging Info</A> </TH> </TR> <tr> <td class="specTopic fs18" data-selenium="specTopic"> Package Weight </TD> <td class="specDetail fs18" data-selenium="specDetail"> 0.05 lb </TD> </TR> <tr> <td class="specTopic fs18" data-selenium="specTopic"> Box Dimensions (LxWxH) </TD> <td class="specDetail fs18" data-selenium="specDetail"> 3.3 x 2.0 x 0.2" </TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <div class="rightPanel"> <div class="video-container"> <div class="content" data-selenium="content"> <script src="//players.brightcove.net/1661991858001/N1cfLQmFe_default/index.min.js" type="text/javascript"></SCRIPT> </DIV><!-- end content --> </DIV> </DIV> </DIV>
I need to remove everything inside "<" ">" including the less than and greater than characters. So at the end, result should look like this:
Cables Supported RG-6 coax Weight Supported 80 lb (36 kg) Package Weight 0.05 lb
Box Dimensions (LxWxH) 3.3 x 2.0 x 0.2"
Data to columns won't with that large data. It just doesn't fit. I'm stuck.
i cant write the formula properly freehand and dont currently have access to excel so this may need some name function name changing and possibly attribute order changing but it would look something like
=replace(a1, left(right(a1, find(a1,"<")),find(a1,">")),"")
which should do the following in pseudo code
s = string
m = position of first >
n = position of first <
o = the text to the left of the m'th letter of s
p = the text to the right of the n'th letter of o
replace p from s with ""
then copy the column with the formula in and past special (values) into the original string column until there are no more < or > (or record a macro to do that then either spam the key or edit it and surround the macro with a loop.
I understand how the Bootstrap grid layout works, but I did not see how to handle the rows.
On a medium screen, given rows with col-md-2 there are six columns of data. As I shift to smaller screens I would like a col-sm-3 to show four columns of data, and consequently col-xs-6 to reduce that down to two columns of data on mobile.
The data is pulled from mysql, so each column will be different in length (and thus also height). How am I supposed to handle the row <div class="row">? Since in xs the row will be for two columns, in sm it will be for four columns and in md it will handle six columns?
I tried removing the row completely and things do not line up properly. Any ideas?
Bootstrap handles this exactly the way you want - it will wrap the 'extra' div columns on the smaller devices. So, the term 'row' is a bit misleading in that it might span several horizontal rows if you are on a smaller device.
You can optionally insert a special clear in between the columns if you have varying heights and you want the tops of the next HORIZONTAL row to line up, e.g.:
<div class="clearfix visible-xs-block"></div>
Note that the above would insert a clear ONLY on XS devices since 'visible-xs-block' is included in the class list. If you column elements are the same height, however, this is superflous as the next row will just wraps pleasantly under the previous.
here is a helptile to the the bootstrap documentation example you are looking for:
I've created a Plunkr for discussion: https://plnkr.co/edit/VlnWhSqyKUdbPCKz4IMh?p=preview (resize to see the responsive behavior)
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-6"><b>Col 1: </b>Lorem Ipsum is simply dummy...</div>
<div class="col-md-2 col-sm-3 col-xs-6"><b>Col 2: </b>Lorem Ipsum is simply dummy...</div>
<div class="col-md-2 col-sm-3 col-xs-6"><b>Col 3: </b>Lorem Ipsum is simply dummy...</div>
<div class="col-md-2 col-sm-3 col-xs-6"><b>Col 4: </b>Lorem Ipsum is simply dummy...</div>
<div class="col-md-2 col-sm-3 col-xs-6"><b>Col 5: </b>Lorem Ipsum is simply dummy...</div>
<div class="col-md-2 col-sm-3 col-xs-6"><b>Col 6: </b>Lorem Ipsum is simply dummy...</div>
</div>
I'm not sure, but I think your question is about how to distribute content into different divs. So, in
md: all content in 6 columns
sm: all content in just 4 columns
xs: all content in just 2 columns
Is this the right understanding? If so, it's not possible to achieve this with Bootstrap 3's grid system.
I have a report in Sharepoint that I want to show the "End Date" field only if there is an end date. I'm using Knockout
<td class="ms-vb">
<b>End Date:</b>
</td>
<td class="ms-vb">
<span data-bind="text: EndDate"></span>
</td>
I just want this part of the report to only be visible if the endDate is populated. Otherwise I don't want it to be seen in the report.
I'm not sure what other information to provide, I think that's sufficient for you to understand my question.
Thanks,
When using knockout.js, you can use the visible binding to hide some content based on the end date:
<tr data-bind="visible: EndDate() != null">
<td class="ms-vb">
<b>End Date:</b>
</td>
<td class="ms-vb">
<span data-bind="text: EndDate"></span>
</td>
</tr>
You can use the visible binding, documented (with examples) here.
How much row do you recommend to use in this layout?. I think I'm doing something wrong because I can not get the location of the SPAN 4 SPAN 4 INTO ROW
http://imgur.com/ZdrHrTN
There is no problem doing what you want, you just need to be carful with the HTML when you have nested columns. Here's a working example with fluid rows http://jsfiddle.net/panchroma/yYFMT/
When using fluid rows, note that spans of the nested columns add to 12 and the HTML is
<div class="row-fluid">
<div class="span8">
<div class="row-fluid">
<div class="span6">nested col</div>
<div class="span6">nested col</div>
</div> <!-- end nested row -->
</div> <!-- end span 8 parent -->
<div class="span4">
span 4
</div>
</div> <!-- end row -->
If you don't have fluid rows, the spans of the nested columns add up to the width of the parent, eg
<div class="row">
<div class="span8">
<div class="row">
<div class="span4">nested col</div>
<div class="span4">nested col</div>
</div> <!-- end nested row -->
</div> <!-- end span 8 parent -->
<div class="span4">
span 4
</div>
</div> <!-- end row -->
Here's a working example of with non-fluid rows: http://jsfiddle.net/panchroma/MX6GK/
Good luck!