CSS to regulate spacing within table cells and entire page as one - html

So I have CSS to regulate the size of all the input types on the page. However I still notice some not being regulated in terms of length. The CSS I am using is this:
.leftRightBorder select,
.leftRightBorder textarea,
.leftRightBorder input[type=text]
{
width: 150px;
}
Here is a picture of the page using the above CSS:
As you can see there are still some minor length issues. But the main question I have is, the 'Payment Day' and 'Roll Day' fields on each component are within the same table cell so even if I put a between them the spacing doesn't equal the vertical spacing between everything else on the page. How do I regular vertical spacing between everything on the page?
EDIT:
Here is the ASP.NET Code:
<tr id="tr63">
<td id="td64">
Payment Day
</td>
<td id="td65" class="leftRightBorder">
<%= Html.DropDownListFor(m => m.FixedComponent.PaymentDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FixedComponent.PaymentDay", onchange = "UpdateField(this);" })%>
<%= Html.DropDownListFor(m => m.FixedComponent.PaymentBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FixedComponent.PaymentBusinessDayConvention", onchange = "UpdateField(this);" })%>
</td>
<td id="td66" />
<td id="td67">
Payment Day
</td>
<td id="td68" class="leftRightBorder">
<%= Html.DropDownListFor(m => m.FloatingComponent.PaymentDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FloatingComponent.PaymentDay", onchange = "UpdateField(this);", disabled="disabled" })%>
<%= Html.DropDownListFor(m => m.FloatingComponent.PaymentBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FloatingComponent.PaymentBusinessDayConvention", onchange = "UpdateField(this);", disabled="disabled" })%>
</td>
</tr>
I want spacing BETWEEN the HTML Helpers to equal the spacing between everything else on the page. Hope this helps.

Try adjusting the margin instead of padding. input{margin-bottom: 5px;} padding is inside the border, margin is outside the border.

It be helpful if you could post the html for this. One approach you could use is to add padding to the fields. What is happening is that you have an invisible table border creating your spacing between all of your other fields (I think). Then when you have 2 form fields in the same table field you don't have the border.
Easiest solution would be to make them separate fields. You can make your "Roll Day" field rowspan="2" if you need it to appear floating between the 2 fields. Alternatively you could add a line to your css like:
input{margin-bottom: 2px;}
That would, of course, affect any input and probably isn't the best route, though.

Related

Apply CSS Style on condition

I have a CSS style to make the background gray.
.team_not_selected {
background-color: #B0B0B0;
}
I'm displaying data from objects in a table format.
<table>
#For each item in model
<tr>
<th>item.Name</th>
<th>item.ModelNumber</th>
etc....
Next
</tr>
</table>
Each object has a variable called "IsSelected" which is a Boolean. I set that variable elsewhere. I want to apply the team_not_selected div to the tag if item.IsSelected = False. That way, if the record is grayed out if it is not selected.
In your code, looks like you want to add all rows as TableHeader (th), please verify.
For conditional CSS, try one of these:
IIf condition:
<div class="#IIf(item.IsSelected, "team_selected", "team_not_selected")">
If Condition:
#If (item.IsSelected) Then
<div class="team_selected">
Else
<div class="team_not_selected">
End if

How can I get placeholder text to shrink to fit within its text input element and show its entire value? [duplicate]

This question already has answers here:
Change a HTML5 input's placeholder color with CSS
(43 answers)
Changing Font Size and Margin of Placeholder Text in IE
(1 answer)
Closed 7 years ago.
I have the following HTML:
<form>
<table border="1">
<tr>
<td>Traveler's name:</td>
<td>
<input type="text" id="travelername" placeholder="Last Name, First Name, Middle Initial"/>
</td>
</tr>
<tr>
<td>Traveler's E-mail:</td>
<td>
<input type="email" id="traveleremail"/>
</td>
</tr>
</table>
</form>
I want the placeholder val to be fully visible at all times, but it's not:
I tried adding this CSS:
input[placeholder] {
font-size: 0.6em;
}
...but, while this reduces the size of the font admirably, the text is truncated:
I tried adding to the CSS like so:
input[placeholder] {
font-size: 0.6em;
width: 500;
}
...but it does nothing to expand/widen the placeholder's text area within the input text (the input text is wide enough to hold the reduced text, but it is still squished into a too-small area within itself).
How can this be accomplished?
Original Reply - July 2015
What about doing something like this? I used jQuery to demonstrate it. If you want it to be more 'exact' in terms of width of the text, you can look at a way to get the text's width and then setting the width in jquery's CSS to the value returned from the function that gets the text's width (in which case you will likely have to create an element, set its html to the placeholder's content, get the text's width and then delete the element). In any case, the code below is what I would do to accomplish what you are asking.
I decided to use setInterval because getting changes to input fields are not black and white. each loops through the input elements. The code then checks to see if input is empty, if it is, is downscales the font-size (to 10px as I hardcoded it), otherwise it sets it to the default (let's say you want 14px, it gets 14px).
setInterval(function() {
$('input').each(function(){
if($(this).val() === ''){
$(this).css({
"width":$(this).width()+"px",
"height":$(this).height()+"px"
});
if(parseFloat($(this).css('font-size'))<=14){
$(this).animate({
"font-size":10+"px"
});
}
}
else {
$(this).finish().clearQueue().css({
"font-size":14+"px"
});
}
});
}, 100);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<table border="1">
<tr>
<td>Traveler's name:</td>
<td>
<input type="text" id="travelername" placeholder="Last Name, First Name, Middle Initial"/>
</td>
</tr>
<tr>
<td>Traveler's E-mail:</td>
<td>
<input type="email" id="traveleremail"/>
</td>
</tr>
</table>
</form>
If you want, you can lower or increase the interval for the setInterval function to allow it to execute faster or slower (keep in mind performance and different computing speeds)
EDIT - May 2017
Seeing that this question has been viewed over a thousand times, I felt I should update my answer to be a little more useful and be less reliant on manual input.
The code below works as follows:
Create your CSS style for both the input fields and their associated clones (this logic can be customized to your needs, but for simplicity purposes, I've given all input element clones the same class)
Loops over all input elements and creates a clone
Gets the clone's width and compares its width to the input element's width while reducing the font-size on each iteration by the step
Once the clone's width is less than or equal to the input element's width, we delete the clone element and set the input's font-size.
Upon user input inside the input element, we undo our changes to font-size
Note: When "undoing" our changes to the input element, we are in fact removing the inline property and value. Any styles for these elements should be done in CSS (or you'll have to try to find a way around this, such as creating a hidden element with id, accessing it, pulling the style and applying it back to the input element).
When testing the code below, I, personally, found that a step of 0.1 was sufficient and that a value smaller (of say 0.01) impacted performance. You can, however, play with this value as you wish.
// Step is used to reduce font-size by value X
var step = 0.1;
setInterval(function() {
// Loop over input elements
$('input').each(function() {
// Only change font-size if input value is empty (font-size should only affect placeholder)
if ($(this).val() === '') {
// Create clone
$clone = $('<span></span>')
.appendTo('body')
.addClass('inputClone')
.text($(this).attr('placeholder'));
// Adjust font-size of clone
var fontSize = $(this).css('font-size');
do {
fontSize = parseFloat($clone.css('font-size')) - step;
$clone.css({
'font-size': fontSize
});
} while ($clone.width() > $(this).width());
// Maintain input field size
$(this).css({
"width": $(this).width() + "px",
"height": $(this).height() + "px"
});
// Change input font-size
$(this).animate({
'font-size': fontSize
});
// Delete clone
$clone.remove();
} else {
// Default input field back to normal
$(this)
.finish()
.clearQueue()
.attr('style', function(i, style) {
// Remove inline style for font-size
return style.replace(/font-size[^;]+;?/g, '');
});
}
});
}, 100);
input,
.inputClone {
font-family: "Arial", Helvetica, sans-serif;
font-size: 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table border="1">
<tr>
<td>Traveler's name:</td>
<td>
<input type="text" id="travelername" placeholder="Last Name, First Name, Middle Initial" />
</td>
</tr>
<tr>
<td>Traveler's E-mail:</td>
<td>
<input type="email" id="traveleremail" />
</td>
</tr>
</table>
</form>

button is not responsive in relate to parallel buttons

Im using the following code to put 3 button next to each other and this is working
Ok when I use it like following, but the problem is when I reduce the size of browser page slowly the detailes button is become on top the delete button,
the edit and delete are not changing,how can I make also the details button to be responsive?
#if (ViewBag.condition)
{
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
#Html.ActionLink("Delete", "Delete", new { id = item.ID }) |
</td>
<td style="position:relative; right: 60px ">#Html.ActionLink("Details", "Details", new { id = item.ID })</td>
}
else
{
<td>#Html.ActionLink("Details", "Details", new { id = item.ID })</td>
}
There's not a lot of code to work with, and I don't know much about bootstrap. But typically on mobile devices I set td's display to block. However your doctype declaration can determine whether or not that will work (I belive you have to be in standards mode). Try adding this to your CSS and/or media query if you have access to it:
#media screen and (max-width: 480px){
td{
display: block; /* or inline-block */
}
}
You could alternatively test with inline style on your td elements by adding:
style="display:inline-block;"
Good luck!

How can I wrap lines of text in an unordered list?

I have some nested tables in a containing "column" table. The bottom table just contains a multi-line text area where the user can post comments. When the user saves the page I want to capture each separate line of comment as an element in an unordered list. Here is the HTML:
<td><strong>Key Messages:</strong><asp:Label runat="server" ID="messagesLabel"></asp:Label>
<div id="messagesDiv" runat="server">
<asp:TextBox runat="server" ID="MessagesTextbox" Width="100%" TextMode="MultiLine" Height="100" Columns="10"></asp:TextBox>
<asp:Button runat="server" ID="clearMessages" Text="Clear Messages" OnClick="ClearMessages_Click" />
</div>
</td>
My problem is that when the unordered list is posted back to the page, very long lines stretch the table beyond the desired width. I would like to have longer comments wrap at some point while still remaining just one element in the list -- ie, one bullet. I have tried setting the MaxLength and Columns properties with no luck.
EDIT:
I tried the first suggestion using:
ul
{
width: 50px;
}
li
{
width: 50px;
}
but it had not effect on the layout. The layout did not change for any value of width.
I tried to use the second solution but I don't have the CSS property "word-wrap" available in my editor. I am programming in Visual Web Developer Express 2010 which supports CSS 2.1 so, as far as I understand, I should be able to set this property but I can't. I tried it anyway and it had no effect on the layout.
EDIT:
Here is how I am creating the list:
XmlDocument xdoc2 = new XmlDocument();
xdoc2.Load(messagesFileLocation);
XmlNodeList messagesList = xdoc2.GetElementsByTagName("message");
if (messagesList.Count > 0)
{
string unorderedList = "<ul>";
for (int i = 0; i < messagesList.Count; i++)
{
XmlNode node = messagesList.Item(i);
string message = node.InnerText.ToString();
unorderedList += "<li>" + message.ToString() + "</li>";
}
unorderedList += "</ul>";
messagesDiv.InnerHtml = unorderedList;
}
The user edits are actually saved to an XML file first and then posted back to the page.
Specify the width of the ul and li elements and your content should wrap. Also set the parent elements to a height:auto; so the height changes as the size of the content increases.
If you post more code, I can give you a better idea.
yes i think its possible check this
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
and this
http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap

CSS not working on every element

Here's my CSS:
<style type="text/css">
.leftRightBorder select,
.leftRightBorder textarea,
.leftRightBorder input[type=text]
{
width: 150px;
margin-bottom: 5px;
}
</style>
Here's the top portion of my page as an image:
The CSS styles/spaces/lengths (is that a word) everything on the page beautifually, but this top section is still weird, the maturity date two dropdowns, and value date is a little weird too. Here is the ASP for this top section:
<tr id="tr14">
<td id="td15">
<%= Html.LabelFor(m => m.MaturityDate) %>
</td>
<td id="td16" style="width: 150px;">
<%= Html.TextBox("MaturityDate", Model.MaturityDate.HasValue ?
Model.MaturityDate.Value.ToString("dd-MMM-yyyy") : "",
new { #class = "economicTextBox", propertyName = "MaturityDate",
onchange = "parseAndSetDt(this); ", dataType = "Date" })%>
<%= Html.DropDownListFor(m =>
m.AmortizationComponent.MaturityBusinessDayConvention,
DropDownData.BusinessDayConventionList(), "",
new { propertyName =
"AmortizationComponent.MaturityBusinessDayConvention",
onchange = "UpdateField(this);" })%>
</td>
<td id="td17" style="width: 76px">
Value Date
</td>
<td id="td18" style="width: 150px">
<%= Html.TextBoxWithPermission("RateTimeStamp",
Model.RateTimeStamp.HasValue ?
Model.RateTimeStamp.Value.ToString("dd-MMM-yyyy") : "",
new string[] { PERMISSIONS.hasICAdvanced },
new { #class = "economicTextBox", propertyName = "RateTimeStamp",
onchange = "parseAndSetDt(this);", dataType = "Date" })%>
<br />
<%= Html.CheckBoxForWithPermission(m => m.Current,
new string[] { PERMISSIONS.hasICAdvanced },
new { #class = "economicTextBox", propertyName = "Current",
onchange = "UseCurrent();UpdateField(this);" })%>
Current
</td>
</tr>
Why isn't this part being styled effectively?
CSS doesn't work on every input element the same way in every browser. In IE, most of the inputs are still drawn by Windows Forms so they are not quite CSS compliment. But in Chrome and Firefox everything works for the most part, but you may have to tweak the margins and size specifically for the select element.
And if you want to support the Mac, you really need to forget about the sizing, because the Apple OS decides to do it's own thing regardless of settings, sort of the same problem I mentioned above with IE.
Don't become overly anal about this, because at this point in history you can't control every aspect of the input in the same way, and you are going to drive you self crazy if you try to. Things are getting better with the browsers specifically IE 9, but don't hold your breath that they will work how you want.
Note I also have assumed it is in oversight, but leftRightBorder doesn't show up anywhere in the code you posted. I am making the assumption the problem you are posting about isn't as simple as forgetting the class.