I'm trying to change the width property of <input> inside of
<td>
element.
I have tried simply this and more variants like max-width but nothing is changing. Input box width is still the same. It works just fine in classic html, css files but its bugged in asp.net for some reason. Thx for any tips.
<table>
<tr>
<td><input class="numericInput"/></td>
</tr>
</table>
td {
max-height: 30px;
max-width: 30px;
border: 1px solid;
text-align: center;
}
input {
width: 20px;
}
Did you forget to put it inside a style tag?
<style>
td {
max-height: 30px;
max-width: 30px;
border: 1px solid;
text-align: center;
}
input {
width: 20px;
}
</style>
Also you might want to consider the below option if you are using #RenderBody(), declare the below code
#RenderSection("Styles", required: false)
in your base layout and add the below code
#section styles{
<style>
/* your style here */
</style>
}
in your views
Related
I've generated some labels using HTML and CSS which I intend to print onto to pre-printed label paper. The labels should have a fixed width of 45mm * 35mm, which I've set in CSS, but when printed they come out at different sizes.
I've also tried converting the HTML to a PDF using HTML to PDF, but this hasn't helped. What am I doing wrong?
My Html:
<html>
<head>
<style>
#media screen , print {
body {
margin: 0;
border: 0.264583333mm solid green;
}
.table_style {
width: 100%;
}
.table_style td {
text-align: left;
padding: 0 0 3.175mm 5.291666667mm;
}
.space {
height: 2.645833333mm;
}
.div_print {
width: 63mm;
height: 37.735416667mm;
margin-top: 3.735416667mm;
border-width: 1px;
border-style: solid;
border-color: red;
}
.part_dec_print {
font: 3mm arial;
text-align: left;
padding-left: 1.5875mm;
height: 8.5mm;
}
.p_tag {
height: 100%;
vertical-align: middle;
padding-top: 1.5875mm;
}
.qty_span {
padding-top: 1.5875mm;
}
.part_print {
font: 6.5mm arial;
height: 6.5mm;
text-align: left;
padding-left: 1.5875mm;
}
.bar_print {
padding-left: 3.96875mm
}
.qty_print {
font: 6.5mm arial;
text-align: center;
height: 6.5mm;
}
.date_print {
font: 2mm arial;
text-align: right;
padding-right: 4.645833333mm;
margin-top: 4.995833333mm;
height: 2mm;
}
}
</style>
</head>
<body cz-shortcut-listen="true">
<div class="div_print">
<div class="part_dec_print">
<div class="p_tag">REAR FABRIC SCVR</div>
</div>
<div class="part_print">PZQ22-12100</div>
<div class="bar_print">
<img alt="testing" src="http://anybarcode_image_here201x29.png">
</div>
<div class="qty_print">1</div>
<div class="date_print">23A4</div>
</div>
If the problem is differences between browsers (as I think it is now from your comments), then the issue is that your widths include fractional measurements, e.g. 4.645833333mm.
Each browser round decimals slightly differently as discussed here - there's no guaranteed away around it other than to not include fractional widths.
What about creating a PDF in PHP (with something like dompdf) and then styling the PDF so it has the correct widths and heights for your label cells. The PDF and styled formatting should always be the same size no matter the browser.
From device preferences, you have to set page size according to your label and it will work. I just did it for TSC TA210 device!
page size css never work in this case! it will print lots of empty label for you.
Context:
I have an <input> element constructed as follows:
HTML:
<div class="field field-3">
<span><input type="text" placeholder="Username" name=""></span>
</div>
CSS:
(with reset.css stylesheet written by Meyer in the same stylesheet)
.field {
padding: 20px 10px;
position: relative;
overflow: hidden;
}
.field > span {
background-color: #fff;
border: 1px solid #bbc3d3;
float: right;
padding: 8px 15px;
position: relative;
}
.field > span input[type="text"] {
background-color: transparent;
border: 0 none;
color: #9da3af;
display: block;
font-family: $font-open;
#include font-size(12px);
margin: 0;
outline: 0 none;
overflow: hidden;
padding: 3px 0;
resize: none;
width: 838px;
height: 22px;
}
The Glitch:
The input element placeholder shown as seen in the first image.
When I click inside the element and write something, the text moves one pixel down.
Where?:
The glitch only is displayed on Google Chrome
The question: How do I fix and avoid this from happening?
Update
A koala_web suggestion, use jsFiddle (link) to exemplify.
Note: Ironically, in jsFiddle the problem does not play, but I put the link to the template example (link) where the glitch appears.
Try removing the line-height declaration from line 297 of your style.css file
html, body, button, input, select, textarea {
font-size: 12px;
/*line-height: 1.231; remove this*/
}
I have never seen this glitch before and it does not seem like a big deal, however this is how I could deal with it. I would add a background image to the input box with the text center aligned in the center. Then apply it to the <input> css. When the user clicks on the input box make it so background-image is none. Like so:
<html>
<head>
<style>
#usernameInput{
background-image: url(usernamePlaceholder.jpg);
}
</style>
</head>
<body>
<input id="usernameInput" type="text" name="">
<script>
$('#usernameInput').click(function(){
$('#usernameInput').css({
'background-image' : 'none'
});
});
</script>
</body>
</html>
Here is a Jsfiddle
My markup is:
<table style="table-layout:fixed">
<tr>
<td class="key">
<div>Age:</div>
</td>
<td class="value">
<div>69</div>
</td>
</tr>
</table>
And my CSS is:
td.key
{
border-left: 1px solid #D6D6D6;
text-align: right;
font-weight: normal;
color: #7f7f7f;
background-color: peachpuff;
width: 115px;
}
td.key div
{
width: 100%;
background-color: lightseagreen;
}
"Computed Style" screenshots from Chrome for the TD element:
"Computed Style" screenshots from Chrome for the DIV child element:
Now when this renders in Chrome I get this result:
When this renders in IE7 I get this result:
Not sure what I'm doing wrong any help would be great!
NOTE: The problem does not occur on IE8+
If you want to apply an attribute to only IE7 and below, you could use the * key like so:
td.key
{
border-left: 1px solid #D6D6D6;
text-align: right;
font-weight: normal;
color: #7f7f7f;
background-color: peachpuff;
width: 115px;
*width: 105px;
}
This makes it so the width is 115 in all browsers, but once it's loaded in IE7 or below, it sets the width to 105px to cut off that extra space at the end.
It's more of a workaround than a solution, but it's still valid.
I have a table which looks something like the following.
<table>
<tr>
<td class="selected plus"><a>+</a></td>
<td><a class="minus">-</a></td>
</tr>
</table>
I want that only the selected td is visible. My restrictions are to achieve this only through CSS. I am not able to alter the HTML or inject some kind of JavaScript.
This is what I come up with yet:
position the selected td over the other
expand the selected td to "displace" the other
hide the not selected td
Unfortunately I was not successful with neither of those ideas, so do you guys have any idea how to achieve this?
Here is a jsfiddle to play around with: http://jsfiddle.net/u6n7r/6/
I would be happy with a cross browser solution, but IE9 support is mandatory.
Just hide the <td/> with display: none:
td:not(.selected) { display: none; }
Here is an Update to your Fiddle
Position the table relative. Position the td's absolute, with top:0 and left: 0. Give the td's a z-index of 10. Give .selected a z-index of 11.
.selected {
background-color: green;
z-index: 11;
}
.plus {
}
.minus {
}
td {
width: 30px;
height: 30px;
border: 3px solid red;
background-color: silver;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
table {
border: 3px solid blue;
width: 72px;
height: 36px;
position: relative;
}
BACKGROUND:
I would like to have small labels in columns of a table.
I'm using some implemented parts of HTML5/CSS3 in my project, and this section specifically is for mobile devices. While both facts are not necessarily relevant, the bottom line is that I don't have to support Internet Explorer or even Firefox for that matter (just WebKit).
THE PROBLEM
With my current CSS approach, the vertical padding of the cell comes from the <span> element (set to display: block with top/bottom margins), which contains the "value" of the column. As a result there's no padding when the <span> is empty or missing (no value) and the label is not in place.
The "full" coulmns should give you the idea of where I want the labels to be, even if there's no value, and the <span> is not there.
I realize that I could use "non-breaking-space", but I would really like to avoid it.
I wonder if any of you have a fix / better way to do this? current code is below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ah</title>
<style>
body {
width: 320px;
}
/* TABLE */
table { width: 100%; border-collapse: collapse; font-family: arial; }
th, td { border: 1px solid #ccc; border-width: 0px 0px 1px 1px; }
th:last-child, td:last-child { border-right-width: 1px; }
tr:first-child th { border-top-width: 1px; background: #efefef; }
/* RELEVANT STUFF */
td {
padding: 3px;
}
td sup {
display: block;
}
td span {
display: block;
margin: 3px 0px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">something</th>
</tr>
<tr>
<td><sup>some label</sup><span>any content</span></td>
<td><sup>some label</sup><span>any content</span></td>
<td><sup>some label</sup><span></span></td><!-- No content, just a label -->
</tr>
</table>
</body>
</html>
As above, you can use:
td {
padding: 3px;
vertical-align:top;
}
If you wanted to retain the padding exactly, even on the invisible elements, you can force the hasLayout attribute on the empty span using:
td {
padding: 3px;
vertical-align:top;
}
td sup {
display: block;
}
td span {
display: inline-block;
margin: 3px 0px;
text-align: center;
width:100%;
}
The inline-block technique is discussed extensively at Drawing empty inline boxes in CSS?