I have following two Buttons at the end of my view:
<table>
<tr>
<td>
<div class="Left"><input type="submit" value="Test" class="button"/></div>
</td>
<td>
#if (Model.Test != null)
{
#Html.Partial("_BackButton", Model.Test)
}
</td>
</tr>
</table>
_BackButton Partial View:
#model Test.Model.Shared.Test[]
#if (this.Model != null && this.Model.Length > 1)
{
<div class="Right">
#this.Model[this.Model.Length - 2].BackButtonLabel
</div>
}
And her the two classes in the css file:
div.Left {
padding-right: 20px;
float: left;
display: inline-block;
}
div.Right {
float: right;
display: inline-block;
}
But unfortunately the two buttons are not on the same level:
Do I have a problem with the partial view here or is it the float attribute?
How can I work around this problem, so the buttons appear in the same line?
If the button class does not contain inline-block or similar, the vertical margins defined in it will not work for inline elements like <a>. So the margins get applied only to the <input>.
Simplified example:
table,
td {
border: 1px solid;
vertical-align: top;
}
.button {
border: none;
color: #FFF;
background: #66F;
margin: 15px 10px;
}
<table>
<tr>
<td>
<input class="button" type="button" value="input">
</td>
<td>
<a class="button" href="button">a</a>
</td>
</tr>
</table>
So the solution is to remove the margin from the styles, or put display:inline-block in.
Related
I'm using SurveyProject for my poll and have the question with 2 answers with this html structure:
1 answer:
<tr class="answerStyle">
<td class="cellValign">
<span id="SurveyControl_Question18__as50577__ai72_as50577"><div>
<div id="grbD">
<input name="SurveyControl$Question18_as50577:_grp18" class="globalRadioButton" id="SurveyControl_Question18__as50577__ai72_as50577_ctl00" type="radio" value="SurveyControl$Question18$_as50577$_ai72_as50577$ctl00">
<label class="globalRadioButtonLabel" runat="server" associatedcontrolid="SurveyControl_Question18__as50577__ai72_as50577_ctl00">NO</label>
</div>
</div>
</span>
</td>
</tr>
2 answer:
<tr class="answerStyle">
<td class="cellValign">
<span id="SurveyControl_Question18__as50577__ai71_as50577">
<div>
<div id="grbD">
<input name="SurveyControl$Question18_as50577:_grp18" class="globalRadioButton" id="SurveyControl_Question18__as50577__ai71_as50577_ctl00" type="radio" value="SurveyControl$Question18$_as50577$_ai71_as50577$ctl00">
<label class="globalRadioButtonLabel" runat="server" associatedcontrolid="SurveyControl_Question18__as50577__ai71_as50577_ctl00">yes<br>comment:</label>
</div>
</div>
</span>
</td>
</tr>
As I can't change html, I want to apply style with css for second answer's input with id #SurveyControl_Question18__as50577__ai71_as50577_ctl00, but everything that I tried doesn't work...
I tried:
input[name="SurveyControl$Question18_as50577:_grp18"] {
float: left;
margin-top: 20px;
}
#SurveyControl_Question18__as50577__ai71_as50577_ctl00 {
float: left;
margin-top: 20px;
}
#SurveyControl_Question18__as50577__ai71_as50577 input {
float: left;
margin-top: 20px;
}
And some others, but the only thing which works is:
#grbD input {
float: left;
margin-top: 20px;
}
But this also affects the first answer's input as it uses the same div's id.
Any ideas?
You can try using these selectors.
.answerStyle:nth-child(2) #grbD input {
float: left;
margin-top: 20px;
}
Or
.answerStyle:not(:first-child) #grbD input {
float: left;
margin-top: 20px;
}
I have a table which has a peculiar style issue when I insert an input element in the header. It does not center the input exactly; instead it is off by 2 pixels on the right side. I have some Twitter Bootstrap styles applied to the table, but I can't find one that is causing the issue so I don't think that has anything to do with it. Here is the markup:
<thead>
<tr>
<th scope="col" style="width: 5%;">
ID
<input type="text" value="" class="grid-filter" id="id-filter">
</th>
...
Here is a picture of the issue (zoomed in considerably):
Here are the styles applied:
th {
width: 15%;
a { display: block; }
input {
height: 15px;
line-height: 15px;
margin: 0;
padding: 5px 0;
width: 100%;
}
}
In the image above, I'm using Firebug and have focused on the "ID" anchor. As you can see, the anchor is correctly centered in the th, but the input box has an extra 2 pixels on the right for some reason. Why is this? The weird thing is that this does NOT affect select elements, only input elements.
Update: When I set the border and outline, Bootstrap's focus glow also has a border. Not sure which style to override...
edit: looks like the problem is your width attribute. Check this JSFiddle
HTML:
<table>
<thead>
<tr>
<th scope="col" style="width: 5%;">
ID
<input type="text" value="" class="grid-filter" id="id-filter"/>
</th>
</tr>
</thead>
</table>
CSS:
a, input {
padding: 0;
margin 0;
}
a {
display: block;
background: red;
}
input {
height: 15px;
line-height: 15px;
/* width: 100%; */
}
table { width: 3em }
The width attribute on the input defaults to auto, which does what you want in this case.
I have a table and I want each cell to have a red background if the cell is disabled, and blue if is enabled. So I have a inserted an invisible checkbox in each cell. When I have labels instead of a table, it works ok (see example here), but it´s not working with a table.
HTML:
<table id="hours">
<tbody>
<tr>
<td id="tdh00"><input type="checkbox" id="h00"></td>
<td id="tdh01"><input type="checkbox" id="h01"></td>
</tr>
</tbody>
</table>
CSS:
input[type=checkbox] { visibility: hidden; }
#hours input[type=checkbox]:checked + #tdh00 { background-color: #265BFA; }
#hours input[type=checkbox]:not(:checked) + #tdh00 { background-color: #FA2421; }
Try like below this is the solution with JQuery :
Fiddle : http://jsfiddle.net/RYh7U/138/
HTML :
<table id="hours" border="1">
<tbody>
<tr><td id="tdh00"><input type="checkbox" id="h00"></td><td id="tdh01"><input type="checkbox" id="h01"></td></tr>
</tbody>
</table>
</body>
CSS :
input[type=checkbox] { visibility: hidden; }
JQuery :
$("#hours td").each(function(e){
var ele = $(this).children('input[type=checkbox]');
var flag = ele.prop('checked');
if(flag)
{
ele.prop('checked', false);
$(this).css("background", "#265BFA");
}
else
{
ele.prop('checked', true);
$(this).css("background", "#FA2421");
}
});
$("#hours td").click(function(e){
var ele = $(this).children('input[type=checkbox]');
var flag = ele.prop('checked');
if(flag)
{
ele.prop('checked', false);
$(this).css("background", "#265BFA");
}
else
{
ele.prop('checked', true);
$(this).css("background", "#FA2421");
}
});
With your markup as it stands, this is not going to work. You are using the + (sibling) selector, but your table cells are not siblings of your checkboxes. In the example you gave, the markup is:
<div class="slideOne">
<input type="checkbox" value="None" id="slideOne" name="check" />
<label for="slideOne"></label>
</div>
Yours is:
<td id="tdh00"><input type="checkbox" id="h00"></td>
So, you are attempting to style the parent based on the state of one its child elements, which is not currently possible with CSS alone.
EDIT
Check out this working example. That fiddle adds the label back in (which will help with accessibility), and positions it in such a way that it visually does what you're after. The markup needs to be:
<table id="hours">
<tbody>
<tr>
<td id="tdh00">
<div>
<input type="checkbox" id="h00">
<label for="h00">Label</label>
</div>
</td>
<td id="tdh01">
<div>
<input type="checkbox" id="h01">
<label for="h01">Label</label>
</div>
</td>
</tr>
</tbody>
</table>
And the CSS:
table {
width: 450px;
margin: 0 auto;
}
td {
border: 1px solid #333;
padding: 0;
}
td > div { position: relative; }
input[type=checkbox] { visibility: hidden; }
label {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
text-indent: -999em;
}
input[type=checkbox]:checked + label { background-color: #265BFA; }
The extra div in each table cell is necessary, because Firefox can't handle positioning things relative to td elements.
Browser support is good, but only IE9+ is supported because we're using the :checked pseudo-class. You'll get better support with a JavaScript-based solution, but I'd argue that this is a great candidate for progressive enhancement.
EDIT 2
If support for old IE is a requirement, then you'll need to resort to JavaScript. Here's an example using jQuery.
The JavaScript just adds a class of active to the table cell: the bulk of the work is still done with CSS.
$("#hours input").on('change', function(){
var checkbox = $(this),
tableCell = checkbox.parents('td');
checkbox.is(':checked') ?
tableCell.removeClass('active') :
tableCell.addClass('active');
}).change();
The HTML remains the same, and the CSS differs only slightly with these lines replacing the :checked pseudo-class:
td { background-color: #265BFA; }
.active { background-color: red; }
<table>
<tr><td>test</td></tr>
<tr>
<td>
<div style= height:200px;">
<div style="border:1px solid yellow; display: inline-block; width:100px">
<img src="orderedList4.png">
</div>
<div align="center" style="border:1px solid green; display: inline-block; width:650px;height:100px;">
<div>center Test Header1</div>
<div>center Test Header2</div>
</div>
<div align="right" style="border:1px solid red;display: inline-block; width:100px">REL 1.0</div>
</div>
</td>
</tr>
</table>
In the above code, the image size is 75*75 pixels.
I want to have all the three cells to have a height of 100 pixels.
I want the image to be centered and left aligned.
The middle text to centered.
Third text to centered and right aligned.
I could not make it working.
Inline styles are a nightmare to maintain, and you should generally be trying to keep presentation separate from the content. I've moved all the styles out of the actual tags, and since you're using a table and refer to each div as a cell, I'm guessing you meant to have each one an actual cell.
<style>
.product_table {
width: 850px;
}
.product_table td {
height: 100px;
border: solid 1px #000;
vertical-align: middle;
}
.product_table .image {
width: 100px;
border-color: yellow;
text-align: left;
}
.product_table .title {
/* Automatically sizes its width */
border-color: green;
text-align: center;
}
.product_table .release {
width: 100px;
border-color: red;
text-align: right;
}
</style>
<table class="product_table">
<tr>
<th colspan="3">test</th>
</tr>
<tr>
<td class="image">
<img src="orderedList4.png" />
</td>
<td class="title">
<div>center Test Header1</div>
<div>center Test Header2</div>
</td>
<td class="release">
REL 1.0
</td>
</tr>
</table>
The top row is probably a table heading though, so you should consider moving that out of the table as a h2 or whatever level it'll be used in. And make sure a table is the most appropriate element here – unless you're going to have multiple rows of whatever this item is, you might be better off just using divs without tables.
Hi I have the following HTML:
<div id="CONTENT">
<div id="SIDEBAR"></div>
<div id="MAIN">
<table>
<tr>
<td>
<div><label><span><a><span>My Label</span></a></span></label><span class="colon">:</span></div></td>
<td>hsadnsdjfjkasdfhkjadshfjkahsdkfjhasdjkfhjkasdhfjkaf</td>
</tr>
<tr>
<td>
<div><label><span><a><span>My Label with a really long title</span></a></span><span class="colon">:</span></div></label>
</td>
<td>hsadnsdjfjkasdfhkjadshfjkahsdkfjhasdjkfhjkasdhfjkaf</td>
</tr>
<tr>
<td>
<div><label><span><a><span>My Label</span></a></span><span class="colon">:</span></div></label>
</td>
<td><input value="hsadnsdjfjkasdfhkjadshfjkahsdkfjhasdjkfhjkasdhfjkaf" /></td>
</tr>
</table>
</div>
</div>
and my CSS:
#CONTENT{
font-size: 87%;
padding: 5px;
}
#SIDEBAR{
width: 24em; float: left; margin-right: 0.5%;height: 200px;
border: 1px solid green;
}
#MAIN {
/*margin-left: 25em;*/
border: 1px solid purple;float:right;
}
table div{
position:relative;
}
.colon {
position: absolute;
right:0;
}
label {
margin-right: .4em;
}
In IE7 if you resize the window and make it thinner the table seems to move down the page. I would like to simply show a scrollbar like IE9 and FF.
Live Example : http://jsfiddle.net/aJsg2/19/
You'll need to set a min-width on the CONTENT in the stylesheet to be whatever the minimum width of the sidebar + main content is.