ASP.NET Bootstrap table padding between columns not working - asp.net-mvc

In the table in the following View of my ASP.NET MVC Core 1.1 app, I'm trying to create some space between columns OrderNumber and ItemName. But the content of the two columns are still too close to each other. Is it because css inside my <style>....</style> below is wrong or maybe the Bootstrap's default settings for the table are overriding my css. Question: How do I create the spacing between two columns?
#model MyProj.Models.TestViewModel
<style>
table th td{
padding-left:115px;
}
</style>
<table>
#foreach (var item in Model.lstOrders)
{
<tr>
<td>
<a asp-action="TestAction" asp-route-id="#item.OrderId">#item.OrderNumber</a>
</td>
<td>
#item.ItemName
</td>
</tr>
}
</table>

You can either:
define padding for the elements in your CSS (recommended)
insert an empty column in between the two, with a '&nsbp' value (a nasty hack, but proven effective)
... and your style definition is wrong (hint: there is no element in your table).
Try simply
td {
padding: 5px;
}

Your CSS:
table th td {
padding-left:115px;
}
means:
Give every td that is a child of th that is a child of table a left padding of 115px.
Instead, what you want to do is:
table th,
table td {
padding-left:115px;
}
which means, give every th and td a left padding of 115px.

Related

Unwanted padding in table cell

I have a web page that does not appear as it does in design view. It adds padding around table cells with text boxes in, but nowhere else. I want it without the padding.
This is the html:
<asp:Panel ID="PlayerPanel" runat="server" BackColor="#3333CC">
<table id="PlayerTable" style="width:100%;" border="0">
<tr>
<td >Name</td>
<td><asp:textbox id="txtPlayerName" runat="server" Width="400px" AutoPostBack="True"></asp:textbox></td>
</tr>
<tr>
<td >Mobile</td>
<td><asp:textbox id="txtPlayerMobile" runat="server" Width="400px" AutoPostBack="True" ></asp:textbox></td>
</tr>
<tr>
<td >Email</td>
<td><asp:textbox id="txtPlayerEmail" runat="server" Width="400px" AutoPostBack="True"></asp:textbox></td>
</tr>
</table>
</asp:Panel>
In design, it appears without padding. When running, it appears with padding above and below the textbox of about the same height as the textbox.
I have tried setting "padding:0px;" for the panel, the table and the cell, but it still stays the same. What else can I try?
Maybe it's cellpadding directly on the table? look here; try setting that to 0
Maybe it's the browser itself putting some default styling on it - in Chrome, open up inspector (F12 or right click -> inspect element) and there you can see what's being applied to the element.
I found this fix:
p {
margin: 0;
padding: 0;
}
I added this into the css and it fixed the problem. It is one of those 'Well, duh!' solutions.

How do I delete the white background of a table? Foundation Rails

My problem is that I added foundation rails to my project that is created in ruby ​​on rails and I wanted to create a small table, but this table when I create creates a white background, what I want to do is make my table transparent without Background of no color.
I tried to put a class and assigning properties but it does not work, also add the style directly, delete the cookies just in case but still does not change color, only resize.
file .css
.tabla {
width:80%;
height: 80%;
background-color:transparent;
}
file .html.erb
<table border="2" class="tabla">
<tr>
<td>Film Affinity</td>
<td><%= image_tag "film_affinity.png",:class=>"imagenPie"%></td>
</tr>
<tr>
<td>IMDB</td>
<td><%= image_tag "imdb.png",:class=>"imagenPie"%></td>
</tr>
<tr>
<td>Sensa Cine</td>
<td><%= image_tag "sensacine.png",:class=>"imagenPie"%></td>
</tr>
</table>
By default Foundation sets the background color using the selectors: table thead, table tbody, table tfoot and table tbody tr:nth-child(even) for every other row.
https://github.com/zurb/foundation-rails/blob/master/vendor/assets/scss/components/_table.scss
The following CSS should set all rows to have a transparent background color:
table tbody tr:nth-child(even), table tbody {
background-color:transparent;
}
It seems ok to me. Perhaps there is some other rules that are overriding your .tabla css. You may try to add an !important and see if that fixes it:
.tabla {
width:80%;
height: 80%;
background-color: transparent !important;
}
Otherwise, the color may come with the td or tr instead from the table. In that case, add the following rule:
.tabla tr, .tabla td {
background-color: transparent;
}
Note that using !important is usually a bad practice. Try to search and clean your css code instead of using that clause.
Also, the border attribute of tables is deprecated now. You should use border css property instead.

How to focus on a particular row in jquery

I have a grid in my module. In this grid the first column "Vessel Name". In the vessel name is present in a alphabetical order. If I click any one of the vessel, one popup will open. After closing popup the grid is not refreshed properly. And the last data is present in first. I need to scroll.
So what I need is, After closing popup I need focus on the clicked vessel. How can I do this. I have more than 30 data in a grid. Based on rowIndx how can I achieve? Please help me.
Considering your table strucutre
<table class="grid-class">
<tr>
<td>ele 1</td>
..
<td>ele X</td>
</tr>
<tr class="active"> // the one you clicked,set active to this and remove to all other
<td>ele 1</td>
..
<td>ele X</td>
</tr>
</table>
Firstly set a css(write your css based on your need) class active which highlight the row.Then try something like-
$(document).ready(function(){
$('.grid-class tr').click(function() {
$(this).sibling('tr').removeClass('active');
$(this).addClass('active');
});
});

Is there a vertical menu in vaadin?

i often used rich-faces for makes a user interface, recently i passed at vaadin.
Now i'm looking for a vertical menù in vaadin, is there this kind of compontent?
Rich-faces has the followed:
http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=panelMenu&skin=blueSky
If you're using vaadin 6.2+, you can use this add-on :
https://vaadin.com/directory#addon/melodion
But I suppose you are using vaadin 7, so you could probably achieve the same result either by
updating this add-on (should be easy)
using the accordion component: https://vaadin.com/book/vaadin7/-/page/layout.accordion.html
Unfortunately vaadin provides only a menubar.
If you have experience in html and css, you can create your own vertical menu and then use vaadin CustomLayout to embed it in a panel.
For example you can try something like this.
You should create an html file:
<table width="100%" height="100%">
<tr height="100%">
<td>
<table align="center">
<tr>
<td align="left">Menu 1</td>
<td><div location="menu1"></div></td>
</tr>
<tr>
<td align="right">Menu2</td>
<td><div location="menu2"></div></td>
</tr>
</table>
</td>
</tr>
</table>
Then you should embed it in vaadin in this way:
// Have a Panel where to put the custom layout.
Panel panel = new Panel("Menu");
panel.setSizeUndefined();
main.addComponent(panel);
// Create custom layout from "yourfile.html" template.
CustomLayout custom = new CustomLayout("layoutname");
//the style name refers the one you should define in css
custom.addStyleName("customlayoutexample");
// Use it as the layout of the Panel.
panel.setContent(custom);
// Create a few components and bind them to the location tags
// in the custom layout.
TextField menu1 = new TextField();
custom.addComponent(menu1, "menu1");
TextField menu2 = new TextField();
custom.addComponent(menu2, "menu2");
Pay attention at binding location name with component name.
If you want to add some javascript to xml (for open/close menu elements) you should write it directly in tag attribute.

CSS with tables, empty rows without border

I use Vaadin in my project, currently i'm having a problem with it. It's CSS/HTML problem and i'm not aware how can i fix it...
So the situation looks like that:
I've got HTML structure (CustomLayout) which looks like that:
<table>
<tr>
<td location="loc11"></td>
<td location="loc12"></td>
</tr>
<tr>
<td location="loc21"></td>
<td location="loc22"></td>
</tr>
(...)
</table>
I'm inserting data into td with location="xxx", the data is in some locations not everyone. CSS looks like that:
table.metric_table_layout tr td {
border-bottom: 1px dotted grey !important;
}
And here's the problem:
If the td is empty, i have borders that completly ruined my layout.
Could someone give me some CSS (that will works also in IE 7+) to fix this ?
I don't want to use JS, so i'm not sure if i can handle this with only CSS?
Thx
tzim
Try to add:
table.metric_table_layout {
border-collapse:separate;
empty-cells:hide;
}
But in IE8 there has to be a !DOCTYPE definition.
With CSS only you can use the empty-cells:hide property. It's buggy across browsers so do some previews in all (rendered ok in my IE7 from IEtester - I just had to define the border as #ccc instead of gray)
Sample: http://jsfiddle.net/EbvXQ/11/

Resources