My web page has a table and for one element i have to apply grid property of foundation. I have to divide the row into two columns having size 10 and 2. First column is an input field and second is a drop down icon, But when I try to do it 2nd column is going down after first column.
<table class="inner-table">
<tr>
<td width="20">plan </td>
<td width="50">Mobile</td>
<td width="15">20%</td>
<td width="15">50%</td>
</tr>
<tr>
<td>dsffgh</td>
<td>Mobile</td>
<td>20%</td>
<td>50%</td>
</tr>
<tr>
<td>Plan</td>
<td>
<div class="row">
<form class="project-name">
<div class="small-11 columns">
<input type="text" name="projectName">
</div>
<div class="small-1 columns">
<a href="#" data-dropdown="drop1"><img src="images/Rectangle-13.png" alt="dropdown-menu" height="10em" width="10em">
</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li>10</li>
<li>15<li>
<li>20</li>
</ul>
</div>
</form>
</div>
</td>
</tr>
<tr>
<td id="dot-emp3" class="show-more">
...
</td>
</tr>
</table>
http://codepen.io/anon/pen/MaaOxG
Related
Trying to put two tables next to one another. One col-md-4 and the other col-md-8 I want the 4 to be on the left and the 8 to be on the right. Left table being game messages and buttons while the right table is the tic tac toe board. My understanding is when using bootstrap I just need columns to add up to a total of 12.
</head>
<body class="bodyNormal">
<div class="container">
<div class="row">
<div class="col-md-12" style="text-align: center">
<h3 class="mainimg">Tic Tac Toe Game</h3>
</div>
</div>
<div class="row bg-white">
<div class="col-md-4">
<table class="table">
<tbody>
<tr>
<th>
<button class="btn" id="newGame">🔄 New game</button>
</th>
</tr>
<tr>
<th>2</th>
</tr>
<tr>
<th>
<h2 class="player1Turn hidden">Player 1 Turn</h2>
<h2 class="player2Turn hidden">Player 2 Turn</h2>
</th>
</tr>
</tbody>
</table>
<div class="col-md-8">
<table>
<tr>
<td class="grid">7<img src="X.jpg"</td>
<td class="vert grid">8<img src="O.jpg"</td>
<td class="grid">9<img src="X.jpg"</td>
</tr>
<tr>
<td class="hori grid">4<img src="O.jpg"</td>
<td class="vert hori grid">5<img src="X.jpg"</td>
<td class="hori grid">6<img src="O.jpg"</td>
</tr>
<tr>
<td class="grid">1<img src="X.jpg"</td>
<td class="vert grid">2<img src="O.jpg"</td>
<td class="grid">3<img src="X.jpg"</td>
</tr>
</table>
</div>
</div>
</div>
<br />
<script src="index.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
You forgot one div close for col-md-4
</table></div> /*Close Here One div*/
<div class="col-md-8">
https://jsfiddle.net/lalji1051/y0k4bs6p/3/
Problem is you forgot to close div for col-md-4.
Updated code
<div class="container">
<div class="row">
<div class="col-md-12" style="text-align: center">
<h3 class="mainimg">Tic Tac Toe Game</h3>
</div>
</div>
<div class="row bg-white">
<div class="col-md-4">
<table class="table">
<tbody>
<tr>
<th>
<button class="btn" id="newGame">🔄 New game</button>
</th>
</tr>
<tr>
<th>2</th>
</tr>
<tr>
<th>
<h2 class="player1Turn hidden">Player 1 Turn</h2>
<h2 class="player2Turn hidden">Player 2 Turn</h2>
</th>
</tr>
</tbody>
</table>
</div>
<div class="col-md-8">
<table>
<tr>
<td class="grid">7<img src="X.jpg" </td>
<td class="vert grid">8<img src="O.jpg" </td>
<td class="grid">9<img src="X.jpg" </td>
</tr>
<tr>
<td class="hori grid">4<img src="O.jpg" </td>
<td class="vert hori grid">5<img src="X.jpg" </td>
<td class="hori grid">6<img src="O.jpg" </td>
</tr>
<tr>
<td class="grid">1<img src="X.jpg" </td>
<td class="vert grid">2<img src="O.jpg" </td>
<td class="grid">3<img src="X.jpg" </td>
</tr>
</table>
</div>
</div>
</div>
so after the text containing the emergency hotlines were aligned properly, I just cant seen to place the text under the image in order to present the data three in a row (I tried col-4 but json messed it up). My goal is image, then content of the numbers directly below it. I tried: text-align, float, display, media. any help would be appreciated thank you.
heres the current situation:
enter image description here
UPDATE: here is the JSfiddle of the question, placeholders are used to show the positioning. https://jsfiddle.net/ktbmLaq8/
<div class="module-text" ng-controller="VolunteerAidCtrl">
<p class="services-margin">In an emergency, please contact the appropriate service in their respective ASEAN countries for the proper response. These numbers can be called either on landline and mobile and consist of the Police Department, Fire Department, and the Hospital Ambulance. </p>
<hr>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." ng-model="search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
<hr>
<div class="row">
<div class="col-md-6" ng-repeat="service in services | filter:search">
<div class="media">
<div class="media-left">
<img class="flagsize" ng-src="{{service.flagimgurl}}">
</div>
<div class="media-body">
<h4 class="media-heading country-title" ng-bind="service.country"></h4>
<table class="table">
<tr class="remove-border">
<td ng-bind="service.hl1"></td>
<td class="text-left">
<div ng-bind="service.hl1num1"></div>
<div ng-bind="service.hl1num2"></div>
<div ng-bind="service.hl1num3"></div>
</td>
</tr>
<tr class="remove-border">
<td ng-bind="service.hl2"></td>
<td class="text-left">
<div ng-bind="service.hl2num1"></div>
<div ng-bind="service.hl2num2"></div>
<div ng-bind="service.hl2num3"></div>
</td>
</tr>
<tr class="remove-border">
<td ng-bind="service.hl3"></td>
<td class="text-left">
<div ng-bind="service.hl3num1"></div>
<div ng-bind="service.hl3num2"></div>
<div ng-bind="service.hl3num3"></div>
</td>
</tr>
<tr class="remove-border">
<td ng-bind="service.hl4"></td>
<td class="text-left">
<div ng-bind="service.hl4num1"></div>
<div ng-bind="service.hl4num2"></div>
<div ng-bind="service.hl4num3"></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_cambodia.png">
<table class="services">
<tr>
<td class="country-title">Cambodia</td>
</tr>
<tr>
<td>Fire</td>
<td>:114</td>
</tr>
<tr>
<td></td>
<td>:023 723 555</td>
</tr>
<tr>
<td>Police</td>
<td>:117</td>
</tr>
<tr>
<td></td>
<td>:023 366 841</td>
</tr>
<tr>
<td></td>
<td>:023 720 235</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:119</td>
</tr>
<tr>
<td></td>
<td>:023 724 891</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_indonesia.png">
<table class="services">
<tr>
<td class="country-title">Indonesia</td>
</tr>
<tr>
<td>Police</td>
<td>:110</td>
</tr>
<tr>
<td></td>
<td>:112</td>
</tr>
<tr>
<td>Fire</td>
<td>:113</td>
</tr>
<tr>
<td>Ambulance and Rescue  </td>
<td>:118</td>
</tr>
<tr>
<td>Medical Emergencies</td>
<td>:119</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_laos.png">
<table class="services">
<tr>
<td class="country-title">Laos</td>
</tr>
<tr>
<td>Fire</td>
<td>:190</td>
</tr>
<tr>
<td>Police</td>
<td>:191</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:195</td>
</tr>
</table>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_malaysia.png">
<table class="services">
<tr>
<td class="country-title">Malaysia</td>
</tr>
<tr>
<td>Fire and Rescue</td>
<td>:994</td>
</tr>
<tr>
<td></td>
<td>:114</td>
</tr>
<tr>
<td>Ambulance/Police  </td>
<td>:999</td>
</tr>
<tr>
<td></td>
<td>:112</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_myanmar.png">
<table class="services">
<tr>
<td class="country-title">Myanmar</td>
</tr>
<tr>
<td>Fire</td>
<td>:191</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:192</td>
</tr>
<tr>
<td>Police</td>
<td>:199</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_philippines.png">
<table class="services">
<tr>
<td class="country-title">Philippines</td>
</tr>
<tr>
<td>Disaster Risk    </td>
<td>:(02) 911-1406</td>
</tr>
<tr>
<td></td>
<td>:(02) 912-1406</td>
</tr>
<tr>
<td>Police</td>
<td>:117</td>
</tr>
<tr>
<td></td>
<td>:911</td>
</tr>
<tr>
<td>Fire</td>
<td>:117</td>
</tr>
<tr>
<td></td>
<td>:(02) 729-5166</td>
</tr>
<tr>
<td></td>
<td>:(02) 410-6319</td>
</tr>
<tr>
<td>Red Cross</td>
<td>:(02) 527-0000</td>
</tr>
<tr>
<td></td>
<td>:(02) 527-8385</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_singapore.png">
<table class="services">
<tr>
<td class="country-title">Singapore</td>
</tr>
<tr>
<td>Fire and Ambulance  </td>
<td>:995</td>
</tr>
<tr>
<td>Police</td>
<td>:999</td>
</tr>
</table>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_thailand.png">
<table class="services">
<tr>
<td class="country-title">Thailand</td>
</tr>
<tr>
<td>Police</td>
<td>:191</td>
</tr>
<tr>
<td></td>
<td>:1195</td>
</tr>
<tr>
<td>Fire</td>
<td>:199</td>
</tr>
<tr>
<td>Ambulance and Rescue  </td>
<td>:1554</td>
</tr>
<tr>
<td></td>
<td>:1669</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_vietnam.png">
<table class="services">
<tr>
<td class="country-title">Vietnam</td>
</tr>
<tr>
<td>Police</td>
<td>:113</td>
</tr>
<tr>
<td>Fire</td>
<td>:114</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:115</td>
</tr>
</table>
</div> -->
The problem is that in your HTML structure, you are listing the information for all countries in a single collective table, while displaying the flags for each country outside of the table. It's not very easy to 'break up' this information that's all stored in the table.
The best way to solve this is to handle both the flag and service information for each country at the same time. In order to do this, first we convert all of your table elements to <div>s, add classes to each of the new divs, and slightly change their order:
<div class="country">
<div class="media-left">
<a href="#">
<img class="media-object flagsize" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Flag_of_Brunei_1906-1959.svg/1000px-Flag_of_Brunei_1906-1959.svg.png" alt="...">
</a>
</div>
<div class="country-info">
<h4 class="media-heading country-title" ng-bind="service.country">Brunei</h4>
<div class="left" ng-bind="service.hl1">Service 1</div>
<div class="right" ng-bind="service.hl1num1">111</div>
<div class="left" ng-bind="service.hl2">Service 2</div>
<div class="right" ng-bind="service.hl1num2">222</div>
<div class="left" ng-bind="service.hl3">Service 2</div>
<div class="right" ng-bind="service.hl1num3">333</div>
</div>
</div>
Then you can target the respective contents much more easily :)
img.flagsize, .country-info {
max-width: 200px
}
.left {
float: left;
clear: left;
}
.right {
float: right;
clear: right;
}
You'll also need to specify that .country-info should be the same width as img.flagsize, or else the information will get pushed to the right of the page:
img.flagsize, .country-info {
max-width: 200px;
}
I've created a fiddle showcasing this here.
With this structure, you can change just about any aspect of the layout you'd like -- margins, padding, and heights no longer pose an issue ;)
Hope this helps! :)
I'd like to have table like this:
And I'm trying to do this with bootstrap grid system, but it doesn't work...here is my code. Maybe the problem is with class container? It is correct to put div there?
<table class="table table-bordered" cellpadding="0" cellspacing="0">
<div class="container">
<tr>
<th class="col-sx-6">Avanced Time targetting</th>
<th class="col-xs-1">Midnight<br/>12am</th>
<th class="col-xs-1">4am</th>
<th class="col-xs-1">8am</th>
<th class="col-xs-1">Noon<br/>12pm</th>
<th class="col-xs-1">4pm</th>
<th class="col-xs-1">8pm</th>
</tr>
<tr>
<td class="col-sx-6">
<span>Monday</span>
<ul>
<li>
<button>All days</button>
</li>
<li>
<button>Morning</button>
</li>
<li>
<button>9-5</button>
</li>
<li>
<button>Evening</button>
</li>
<li>
<button>Custom</button>
</li>
<li>
<button>Clear</button>
</li>
<li>
<button>Restore</button>
</li>
</ul>
</td>
<td class="col-xs-1">
<input type="text"/>
</td>
<td class="col-xs-1">
<input type="text"/>
</td>
<td class="col-xs-1">
<input type="text"/>
</td>
<td class="col-xs-1">
<input type="text"/>
</td>
<td class="col-xs-1">
<input type="text"/>
</td>
<td class="col-xs-1">
<input type="text"/>
</td>
</tr>
</div>
Your HTML code is correct but you need to put the container div before the table.
Here is some of basic understanding about bootstrap grid system.
The container div must be outside the table in order for it to align correctly. Furthermore, the structure of your table will align perfectly when you use the theader, tbody and tfooter tags in your table along with the th/td tags.
Here is the page source
<div class="col-xs-12">
<br />
<div class="panel panel-primary">
<div class="panel-heading">
Collection Info
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active">
<table class="table" >
<tr>
<th>Vendor</th>
<th>Claim Amount</th>
<th>Amount Received</th>
<th>Type</th>
</tr>
<tr>
<th>Date</th>
<th>Rep</th>
<th>Notes</th>
</tr>
<tr>
<td>
Difference in State Check
</td>
<td>
0.00
</td>
<td>
-382.19
</td>
<td>
<select class="form-control" data-val="true" data-val-required="The Value field is required." id="item_Type_Value" name="item.Type.Value">
<option selected="selected" value="c6edd5bc-c5ef-4a56-8db2-17905d98c823">--None--</option>
<option value="0b4a44d0-7241-422d-935b-d0606b9c5ce1">Attn</option>
<option value="a1341e3c-afb7-4c47-8040-d33bdf82493b">$$$</option>
</select>
<p />
<div class="col-xs-12" style="text-align: right;">
<div class="form-group">
<label class="col-xs-5 control-label"></label>
<div class="col-xs-7">
<input type="submit" value=" Update " style="height:35px;width:75px;" />
</div>
</div>
</div>
</td>
<td>
0.00
</td>
<td>
</td>
<td>
999-999-9999
</td>
</tr>
<tr>
<td>
<textarea cols="80" htmlAttributes="{ class = form-control }" id="Notes" name="Notes" rows="6">
</textarea>
</td>
</tr>
</table>
I'm using bootstrap and below is the picture of my page.
My question is: How can I have Vendor, Claim Amount, Amount Received, Type with-in the div of Collection Info?
so I'm rendering this page using two loops
the first loop generates - vendor, claim amount, amount received, type
the second loop generates - date,rep,notes
and the reason my page is messed up is due to my textarea
here is my html page looks like:
<div class="col-xs-12">
<br />
<div class="panel panel-primary">
<div class="panel-heading">
Collection Info
</div>
<br />
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active">
<table class="table" >
<tr>
<th>Vendor</th>
<th>Claim Amount</th>
<th>Amount Received</th>
<th>Type</th>
</tr>
<tr>
<th>Date</th>
<th>Rep</th>
<th>Notes</th>
</tr>
#foreach (var item in Model)
{
<tr><td>#item.vendor</td></tr>
<tr>#item.claimamount</td></tr>
<tr>#item.amountreceived</td></tr>
<tr>#item.type</td></tr>
foreach (var item1 in item.DetailViewModel)
{
<tr>
<td>
#item1.Date
</td>
<td>
#item1.Rep
</td>
<td>
#item1.Notes
</td>
</tr>
}
<tr>
<td>
#Html.TextArea("Notes", "", 6, 80)
</td>
</tr>
}
</table>
</div>
</div>
</div>
</div>
</div>
I'm trying to achieve something like this:
[This solution takes into consideration the generated code from the edit]
As I told you in the comment, just by fixing the different colspan in the table, it already looks a lot better (and closer to what you show in your picture): http://jsfiddle.net/wnqLpsv9/
For example, if the rows have 7 columns, make all the rows have 7 columns (or occupy the space of 7 columns using colspan), or the result will depend on how the browser decides to display the table.
Still, you need to look at the source, because this is a mess of unnecessary <tr> and closing </td> without opening <td>, that won't generate valid code:
#foreach (var item in Model)
{
<tr><td>#item.vendor</td></tr>
<tr>#item.claimamount</td></tr>
<tr>#item.amountreceived</td></tr>
<tr>#item.type</td></tr>
foreach (var item1 in item.DetailViewModel)
{
<tr>
<td>
#item1.Date
</td>
<td>
#item1.Rep
</td>
<td>
#item1.Notes
</td>
</tr>
}
<tr>
<td>
#Html.TextArea("Notes", "", 6, 80)
</td>
</tr>
}
From what you show in the picture, it would need to be something more in this line (and notice that I don't claim this is correct, but more of a guideline on how to fix it):
#foreach (var item in Model)
{
<tr>
<td>#item.vendor</td>
<td>#item.claimamount</td>
<td>#item.amountreceived</td>
<td>#item.type</td>
</tr>
foreach (var item1 in item.DetailViewModel)
{
<tr>
<td>
#item1.Date
</td>
<td>
#item1.Rep
</td>
<td colspan="2">
#item1.Notes
</td>
</tr>
}
<tr>
<td colspan="2"></td>
<td colspan="2">
#Html.TextArea("Notes", "", 6, 80)
</td>
</tr>
}
even after setting the tr:last-child's border: none, border is still visible. The edit button should be after the last row. But it got position left. http://jsfiddle.net/priyaa2002/mBfk8/ Here is how it should be
You have a floating <tr> and a floating </div>:
<div id="wrapper">
<div class="para">
<table id="info-table">
<tr>
<td>name:</td>
<td id="name">name</td>
</tr>
<tr>
<td>id:</td>
<td id="myid">myuid</td>
</tr>
<tr>
<td>email:</td>
<td id="email">mysuperemail#email.com</td>
</tr>
<tr> <!-- WHY? -->
</table>
</div>
<div class="edit">
<button type="submit">edit</button>
</div>
</div> <!-- WHY? -->
Get rid of them like so:
<div id="wrapper">
<div class="para">
<table id="info-table">
<tr>
<td>name:</td>
<td id="name">name</td>
</tr>
<tr>
<td>id:</td>
<td id="myid">myuid</td>
</tr>
<tr>
<td>email:</td>
<td id="email">mysuperemail#email.com</td>
</tr>
</table>
</div>
<div class="edit">
<button type="submit">edit</button>
</div>
In the future validate your HTML ;)