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.
Related
I've been straggling with this issue for a while.
I have a table view cell, when selected, a subview containing some buttons is added to the cell.
Those buttons are not accessible via Voice Over.
Does anyone know how to solve this issue?
Thanks!
This is not so much of a coding answer but...
You should be fine with what you got.
Safari and Mac VoiceOver can click buttons and links when focus is on a cell. Chrome and VO on the otherhand can not, but if you are a VO user you know that you might have to "interact" with some elements to reach a deeper interactive element. So if you use QuickNav and arrow Left + Down you can press the button in Chrome.
Tested with this code:
<table id="theTable">
<thead>
<tr>
<th scope="col">Hey push it</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button type="button" id="pushMe">Push Me!</button>
</td>
</tr>
</tbody>
</table>
and a lite jQuery to se if somethings happend:
$('#pushMe').on('click',function(e){
$('#theTable').css('background','red');
});
Test for yourself on CodePen: Screen Reader and Table test
i have such a checkbox and i whant to turn it into jquery ui checkbox to look the same on all browsers.
<tr>
<td valign="middle" class="ck"><input name="perk-senior" id="senior" type="checkbox" value="4" checked /></td>
<td valign="middle"><div class="text">Show available plans for senior</div></td>
</tr>
but after i use
$('#senior').button()
the checkbox just disappears. I tried adding jqueryui icons, and removing css, it gives the same effect.
how can i make it into a standard checkbox with a tick icon on toogle?
Should that not be:
$('.ck').button()
Or:
$('#senior').button()
You've selected the entire containing div and not the checkbox itself (presuming that the table is nested within a div named #search).
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.
I need to put a horizontal scroll on the following situation to be able to scroll photos(I use jquery mobile and need to run the program on android), any idea ? thanks
<div data-role="content" class="List" >
<table>
<tr> <td>image1</td> <td>image2</td> <td>image3</td> <td>image4</td> </tr>
</table>
</div>
For scrolling you could use something like this
http://code.jquery.com/mobile/latest/demos/experiments/scrollview/
http://code.jquery.com/mobile/latest/demos/experiments/scrollview/scrollview-direction.html ( Horizontal Scrolling )
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/