I am wanting to pinpoint the attribute size element which shows 3XL and make the width smaller. But I am struggling to pinpoint it in CSS!
Website screen shot
At the moment I have
table.variations td.value {
}
But this pinpoints the entire section of the column including the "clear" button. I have tried:
table.variations td.value .attribute_size {
}
But this also does not work.
Please help!
Thanks!
Beck
You have to pinpoint the select option within the td.value field. Then you can style it anyway you wish.
HTML
<table class="variations">
<tbody>
<tr>
<td class="value">
<select id="size" name="attribute_size">
<option>Choose an option</option>
<option value="2XL">2XL</option>
<option value="3XL">3XL</option>
</select>
CLEAR
</td>
</tr>
</tbody>
</table>
CSS
table.variations td.value {
font-size: 12px;
}
select#size {
color: white;
background-color: blue;
font-size: 42px;
}
JSFiddle.
Related
I have the code, which I get it from inspecting:
<td class=ox-list-pair style>
<input type="CHECKBOX" name="ox_CkSurvey_Sport__xava_selected" value="selected:0" onclick="openxava.onSelectElement('CkSurvey','Sport','null','row=0,viewObject=xava_view',this.checked,'ox_CkSurvey_Sport__0',false,'','border-bottom: 1px solid;','',false,false,0,'xava_tab')">
</td>
I have tried to hide the checkbox but none of them success.
My attempts:
input[type=checkbox].ox_CkSurvey_Sport__xava_selected {
display: none;
}
ox_CkSurvey_Sport__xava_selected {
display: none;
}
.ox_CkSurvey_Sport__xava_selected input[type="checkbox"]{
display:none;
}
Please note that <td> is valid as it is inside <tr> as well as <table>.
Please help me. Thanks.
You should read up on CSS selectors.
https://www.w3schools.com/cssref/css_selectors.asp
You are trying to hide the check box with the class "ox_CkSurvey_Sport__xava_selected", but that doesn't exist.
You need to do this:
input[type=checkbox][name=ox_CkSurvey_Sport__xava_selected] {
display: none;
}
Is your <td> valid? What makes a <td> valid is:
It must be in a <tr>
That <tr> must be in a <table>
Technically <tr> must be in a <tbody>, <thead>, or <tfoot> but the browser will create a <tbody> by default if there's a <table>.
In the demo there's:
a <table>, <tr>, <td>, and your messy checkbox.
a <td> and a simple checkbox.
Note: The selector is td.ox-list-pair > input[type="checkbox"] and it successfully hides the messy checkbox and fails to hide the simple checkbox. So as you can see that the browser will ignore an invalid <td> and everything within it. I'm going out on a limb and assume that your <td> is not inside a <tr> and/or <table>.
Demo
$('td.ox-list-pair > input[type="checkbox"]').css('display', 'none');
b {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class='ox-list-pair' style>
<input type="CHECKBOX" name="ox_CkSurvey_Sport__xava_selected" value="selected:0" onclick="openxava.onSelectElement('CkSurvey','Sport','null','row=0,viewObject=xava_view',this.checked,'ox_CkSurvey_Sport__0',false,'','border-bottom: 1px solid;','',false,false,0,'xava_tab')">I'm
in a valid cell
</td>
</tr>
</table>
<td class='ox-list-pair'>
<input type="CHECKBOX">I'm in an <b>invalid</b> cell
</td>
I have a very simple form laid our in a table with one row and two cells. I have a kendo NumericalTextBox in one cell and a Text Input in the other. I have the table width set to 100% and no width on the cells.
The Problem:
The problem is that the NumericalTextBox takes up more that 50% width in it's cell, and squashes up the Text Input.
I have tested this with a kendo DropDownList and it works fine. It just takes 50%.
Why is the NumericalTextBox pushing out it's cell to more than 50% and how can I stop it doing this?
I realize I can put a style="width:50%" on the table cells, but this is an overhead on larger forms, as if you add a cell you have to go and update all your other cells width percentages etc...
Ideally I just want to be able to say the width of the table is 100% and the cells will equally share that, and each control in each cell will take up 100% of the cell width.
I put together a demo page that shows what is going on:
HTML:
<div id="testContainer">
<strong>Numerical TextBox and DropDownList</strong>
<table class="mistro-form">
<tr>
<td>
<label>Numerical TextBox:</label>
<input data-role="numerictextbox"
data-format="n0"
data-min="0"
data-decimals="0" />
</td>
<td>
<label>Drop Down List:</label>
<select name="Include Title"
data-role="dropdownlist"
data-value-primitive="true">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<table>
<div style="height:20px"></div>
<strong>Drop Down List and Text Input</strong>
<table class="mistro-form">
<tr>
<td>
<label>Drop Down List:</label>
<select name="Include Title"
data-role="dropdownlist"
data-value-primitive="true">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<label>Include Title:</label>
<input type="text" class="form-control" />
</td>
</tr>
<table>
</div>
CSS:
table.mistro-form {
width:100%;
}
.mistro-form td {
padding: 5px;
vertical-align: top !important;
}
.mistro-form .k-dropdown, .mistro-form .k-combobox, .mistro-form .k-numerictextbox, .mistro-form .k-textbox, .mistro-form .k-numerictextbox {
width: 100% !important;
}
JavaScript:
$(document).ready(function() {
kendo.init($('#testContainer'));
});
Here is a fiddle of the above code: http://jsfiddle.net/codeowl/UQdGQ/6/
Thank you for your time,
Regards,
Scott
Ok I just worked this out. I just needed to set the table-layout css property to fixed;
eg;
table.mistro-form {
width:100%;
table-layout:fixed;
}
Hope this can save someone else some time ;-)
I'm trying to style the title from the image tag.
I have search other question but can´t it put working in my project.
But I can´t make any changes.
Someone can give me hand with this pls?
my code:
table.tablesorter tbody tr td a:hover img[title]:after
{
content: attr(title);
padding: 4px 8px;
color: #FFF;
background-color:black;
}
<table class="tablesorter" style="width:98% !important">
<thead>
<tr>
<th>
.....
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
..........
</td>
<td>
<a href="#Url.Action("Edit","Account", new { id=item.UserId })">
<img src="~/Content/images/icon_edit.png" title="Edit"/>
</a>
</td>
</tr>
</tbody>
<tfooter>
</tfooter>
</table>
It should be content: attr(title);, not content: attr(data-title); - you don't have a data attribute.
Also, it seems ::before and ::after pseudo-elements are not defined for img - you may have to use something else:
CSS Content attribute for IMG tag
Working Example (when the image is missing): http://jsfiddle.net/DMAFm/
Another example, with the title on the <a> tag: http://jsfiddle.net/DMAFm/1/
I'm learning CSS and HTML.
In my code I have:
<style>
table, td, th
{
padding: 5px;
}
</style>
This rule works on all tables on the page.
Now I want to make a table without padding:
Here is the source:
<table>
<tr>
<td>Login</td>
<td><input type="text" name="login" class="input"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" class="input"></tr>
</tr>
</table>
How to do this?
If you want to add specific styles to this table that override the default styles you've defined, then you'll need some way to reference it in CSS.
Typically, you would give it a class or an ID -- eg <table class='myspecialtable'>....</table>
Then you can have a stylesheet which overrides your default 5px styles, just for this table.
.myspecialtable, .myspecialtable td, .myspecialtable th {
padding: 0px;
}
If you can't add an ID or class to this table, then you could add it on a parent element, and the effect would be the same (as long as that parent doesn't contain any other tables, of course). In this case, your CSS would look something like this:
.myspecialtablecontainer table, .myspecialtablecontainer td, .myspecialtablecontainer th {
padding: 0px;
}
You should change your CSS to define a style instead.
.padded { ... }
Then you can set the class to that style for any tables you want to use that style.
<table class="padded">
</table>
When you set a style, as you have done, for all elements of a particular type, then the only way to remove them is to set the style to something else, or not include a reference to that CSS file from the page that you don't want to use them.
One way would be to give your table a class like so:
<table class="nopadding">
[... table rows and columns...]
</table>
And then put this in your css:
.nopadding, .nopadding td, .nopadding th
{
padding: 0;
}
Which says "any element with the class should have a padding of 0". The .nopadding th and .nopadding td has to be there and is a way of saying "all th and td who is inside an element of class nopadding shouldn't have any padding either", since you previously told all th and td to have a padding of 5px.
I remeber when I first started learning HTML.
What you're after is an id or a class attribute. You'd have two tables like so:
<table class="table1">
<tr>
<td>Login</td>
<td><input type="text" name="login" class="input"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" class="input"></tr>
</tr>
</table>
<table class="table2">
<tr>
<td>Login</td>
<td><input type="text" name="login" class="input"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" class="input"></tr>
</tr>
</table>
To make is so that table1 had padding, but table2 didn't, you would use the appropriate CSS rules to identify and style the tables:
.table1, .table1 td, .table1 th
{
padding: 5px;
}
.table2, .table2 td, .table2 th
{
padding: 0px;
}
There's many ways I could have done this with CSS. For example, You could also use ids in this case, but it's easier to use classes as an id can only be used once per document.
A slightly better approach in this case would be to take advantage of cascading rules. I could have kept your original CSS and just added the second set of rules:
.table, .table td, .table th
{
padding: 5px;
}
.table2, .table2 td, .table2 th
{
padding: 0px;
}
In this case, only tables with the class table2 would have the 0px padding - all other tables would have 5px padding.
It would be a good idea to read the W3CSchools introduction to CSS - http://www.w3schools.com/css/css_intro.asp. This will introduce you to the basics and get you on your way.
Simple use
<style>
table, td, th
{
padding: 0px;
}
</style>
Also try border-collapse: collapse;.
<table cellpadding='0'> If this don't work, you can create a css class that removes the padding and use that in your table: <table class='no_padding'>
ASP.Net has a tag called CheckboxList. The output of this tag looks like this:
<table class="checkbox">
<tbody>
<tr>
<td>
<input id="/*longdynamicstring1*/" type="checkbox" name="/*longdynamicstring2*/" />
<label for="/*longdynamicstring1*/">Label Text</label>
</td>
</tr>
</tbody>
</table>
I want to position the label and the input but I cannot find out how. Tried the following:
.checkbox input{
padding-right: 5px;
}
and
.checkbox input[type='checkbox']
{
padding-right: 5px;
}
but neither of them had any effect. Because it's ASP I cannot set a class for the input elements and I cannot reference the id because it's dynamic.
Your selector works well, it's just that padding has no effect on the check box. Margin will work, for example:
.checkbox input {
margin-right: 50px;
}
See it in action: http://jsbin.com/irari
In addition, take a look at the RepeatLayout property - it can make the generated HTML more CSS friendly.