I have a table which should be hidden when the page loads and is shown only on selection of a checkbox.
<table width="100%" id="C" datatable="ng" dt-options="dtOptionsfeature" class="celltable" style="display: none;">
I also tried it in css file
#C {
display: none;
}
It works if i remove the data tables . So can i not use css styling with data tables ? because other properties are working.
Try to hide table parent container
<div id="hide-table"><table width="100%" id="C" datatable="ng" dt-options="dtOptionsfeature" class="celltable" style="display: none;"></div>
#hide-table{display:none;}
Related
I custom control has a text box and a icon next to the text box
return (
<div className="useFlex">
<TextInput></TextInput>
<div>
<Icon></Icon>
</div>
</div>
);
Style
.useFlex {
display: flex;
}
It works perfectly
But the issue is : when I use this custom control in my page, text box width is not getting expanded and it remains fixed.
<Table width="100%">
<tr>
<td><MyCustomControl> </MyCustomControl></td>
</tr>
</Table>
could you please tell me what I am missing here?
Try to add
.useFlex
{
display:flex;
flex-grow: 1;
}
I'm a beginner to HTML and CSS. I'm using jquery mobile, and jquery ui to build a page. I have added a select menu and two images as buttons next to it. I have set a border width of 1px to see the layout. As it is seen in the picture below select menu border is extended and covers the images so I can't click on them.
select menu border covers image
This is the html
<div id="container" >
<img src="styles/add_button.png" id="addButton" class="imgButton">
<img src="styles/remove_button.png" id="removeButton" class="imgButton">
<form>
<select name="select-native-1" id="selectMenu">
</select>
</form>
</div>
this is the CSS
.imgButton{
float : right;
margin: 0em .2em;
}
#container{
vertical-align: middle;
margin:0em 1em 1em 1em;
}
#selectMenu{
float: right;
}
What is the problem here?
I find tables to be the easiest way to properly align things. Try this...
<table><tr>
<td><select name="select-native-1" id="selectMenu"> </select></td>
<td><img src="styles/add_button.png" id="addButton" class="imgButton"> </td>
<td><img src="styles/remove_button.png" id="removeButton" class="imgButton"></td>
</tr> </table>
And then add widths to the td elements to give it the look you want.
I have been struggling to find a simple solution to the following problem using the CSS inline styles due to being on a free wordpress.com blog.
a table
inside each table cell there is an three parts
a hyperlink to enclose the two objects below
image - align vertical and horizontally centred in the table cell
text at the bottom of the table cell
<psedo markup>
<td>
<a href="#">
<img style="vertical-align:middle" src="" />
<p style="vertical-align:bottom">Text at the bottom</p>
</a>
but just cant seem to get a consistent result, am I better using <div style="display:block"> instead?
If you can use html5, use a figure:
<td>
<a href="http://gravatar.com">
<figure style="text-align: center;">
<img src="https://www.gravatar.com/avatar/5a25eba05dc8ac4384384c7a220958a6?s=32&d=identicon&r=PG&f=1"
alt="" width="32" height="32">
<figcaption>gravatar glyph</figcaption>
</figure>
</a>
</td>
The figure element was added precisely for situations like this, though the needed style here is a bit quirky.
HTML:
<table>
<tr>
<td style="text-align: center;">
<a>link</a>
<img style="display: block; margin: 0 auto;" src="http://placebacn.com/400/300">
<p>Bacon... Bacon... Bacon...</p>
</td>
</tr>
</table>
Even if you can't add a CSS file you may be able to add a <style> block before the HTML which would be better than inline styles:
<style>
td {
text-align: center;
}
td img {
display: block;
margin: 0 auto;
}
</style>
Fiddle: http://jsfiddle.net/xeTPx/2/
Please don't use tables for layout (i.e. non-tabular data - not sure if this is or not), there are other ways to have a similar layout without the bloated markup and accessibility problems. display: flex is often a good option as it now has support in a lot of today's browsers. Sometimes even using other markup with CSS display: table and display: table-cell is another option.
This might be a good read on vertical-align: http://css-tricks.com/what-is-vertical-align/
I would suggest to separate img and text from the same alignment-structure. I think you can manage to center the img but the text ruins this alignment. The trick that I use is position>relative to the parent and position>absolute to the child. Here you go:
<td>
<a href="#" style='**position:relative;**'>
<img style="vertical-align:middle" src="" />
<p style="**position:absolute; bottom:0;**">Text at the bottom</p>
</a>
</td>
By doing this p is not in the same alignment structure anymore.
I hope this solves your problem.
I am supporting a legacy application.
In the CSS there is the following rule:
.dashboard-panel table {
width: 100%;
}
So basically there are many panels, and for all tables in them the width is set to 100%.
Now the problem: in a dashboard panel I have put a calendar control from an external library (richfaces). This calendar control is using a table for displaying the days. And this width:100% is affecting the calendar table.
Example:
<div class="dashboard-panel">
<div id="content">
<table id="table1"> //this is ok
<tr>
<td>
<table id="richfacesCalendarTable"> //this not ok
</table>
</td>
</tr>
</table>
</div>
</div>
What is the proper solution here?
I don't want to go through every panel in this application and put a separate style there.
Mabye if you add something like that into end of your css:
.dashboard-panel table#richfacesCalendarTable {
width: your_desired_width_px !important;
}
or
.dashboard-panel table#richfacesCalendarTable {
width: auto !important;
display: table !important;
}
Hard to say for sure as this is only a small portion of HTML and CSS code you provided. There can be other elements that affects your result.
This is what I want:
http://img571.imageshack.us/img571/4618/myimage.png
This is the best I could come up with:
CSS
img
{
background: red;
float: left;
}
table
{
background: yellow;
width: 90%;
}
HTML
<img src="image.jpg" width="40" height="40" />
<table>
<tr><td>Table</td></tr>
</table>
There is a problem with this approach. If you resize browser window at some point the table jumps below the image: click to view demo.
What is the better way of achieving this layout?
Try surrounding your table with div like that:
<img src="image.jpg" width="40" height="40" />
<div style="padding-left:40px">
<table>
<tr><td>Table</td></tr>
</table>
</div>
Some people might not like tables, but you could use a table with 2 cells that contains your image on the left and the table on the right.