In a MVC application in asp.net , in my view I have a table :
<table width="100%" class="personRow">
<tr class="personRowHeader">
<td style="width: 40%;"> Subiect </td> ...
and for table i use style personRow , an for rows personRowHeader defined like this :
table.personRow
{
background-color:#EEEEEE;
border:2px solid white;
}
table.personRow tr.personRowHeader
{
border-bottom-color : #FFFFFF;
border-bottom-style : solid;
border-bottom-width: medium;
font-weight: bold;
background-color: #CCCCFF;
}
When I use only personrow the setting for table in design of my page take the modifications , but when I use the setting for my row nothing happen.Can somebody tell me why doesn't work the setting for rows ?
I put your code in jsfiddle, replaced only the colors with more visible colors, but I see nothing wrong.
http://jsfiddle.net/e9wvY/1/
Check it out yourself, everything is working as intended.
give this a try and let me know it it worked for you:
<table width="100%" class="personRow">
<tr>
<td style="width: 40%;"> Subiect </td> .
for your css, use this block
table.personRow
{
background-color:#EEEEEE;
border:2px solid white;
}
table.personRow tr
{
border-bottom-color : #FFFFFF;
border-bottom-style : solid;
border-bottom-width: medium;
font-weight: bold;
background-color: #CCCCFF;
}
What we have done so far is removing the need to explicitly use class attribute from your TRs, and instead, let the CSS manage it by pointing out that any TR under a table that has a class of "personRow", should use this style
Related
I'm trying to learn the jQueryUI sortable feature in order to make it work on a responsive table I'm using on my webpage.
I made a jsfiddle to make some tests and I just can't figure out how to drag and drop columns (not only th's).
I suspected I should use the "connectWith" (or "items"?) option and connect all the td's that share the same id than the dragged th but I just don't succeed in doing that.
I'm not even sure that's what "connectWith" or "items" are made for actually but there is nothing else I can find in the documentation that seems to help me achieve a column drag & drop.
HTML:
<html>
<body>
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS:
*html, body {
margin:0px;
padding:0px;
width:100%;
height:100%;
}
body:before{
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
table{
table-layout: fixed;
margin: 0 auto;
border-collapse: collapse;
overflow: hidden;
white-space: nowrap;
width:100%;
color:#000;
float:left;
}
tr{
display:table-row;
border: 1px solid black
}
th, td {
border:1px solid #000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: table-cell;
text-align:center;
}
th{
position: relative;
background:#bbb;
}
jQuery:
$( function() {
$('thead tr').sortable({
start: function(e, ui)
{
var ind_th= ui.item.index();
$('tbody td:nth-child('+(ind_th+1)+')').addClass('drg').css('color','red');
},
connectWith:".drg",
stop: function(e, ui)
{
$('tbody td').removeClass('drg')
}
});
});
Thank you for your help.
It's not exactly pretty, yet it will do the job.
Working Example: https://jsfiddle.net/Twisty/q7oyh9mj/53/
JavaScript
$(function() {
$('thead tr').sortable({
containment: "parent",
placeholder: "placeholder",
opacity: 0.5,
helper: "clone",
axis: 'x',
start: function(e, ui) {
var ind_th = ui.item.index();
$('tbody tr').each(function(ind, el) {
$('td', el).eq(ind_th).addClass('drg').css('color', 'red');
});
},
stop: function(e, ui) {
var itInd = ui.item.index();
$("tbody tr").each(function(ind, el) {
var cell = $(".drg", el).detach();
cell.insertBefore($("td", el).eq(itInd));
cell.removeClass("drg").css("color", "black");
});
}
});
$('thead tr').disableSelection();
});
You can also create your own helper using function(event, element), yet it does not mesh well in stop or update.
So in start, I am adding the class drg to help identify the cells that will get moved. Once the stop is triggered, I use .detach() to remove them from the rows and then insertBefore() to place them back in the new position in the row based on the header index.
If you have a lot of data, I would advise looking at DataTables. I believe it offers this functionality.
Update
New Example: https://jsfiddle.net/Twisty/q7oyh9mj/72/
Two minor changes:
Removed containment; this was preventing header from dragging beyond table borders and could not be placed in the first position.
Add if for when drop point should be the last item
You can also adjust the tolerance options: https://jsfiddle.net/Twisty/q7oyh9mj/73/
Your choice on how to manage it.
Hope that helps.
I have created a select menu next to a button. I wonder how can I get the select menu be at the same Y of the button? (Ideally I would like it to be of the same height too but that is another thing I guess...)
As the shown code I have no configuration other than the select width:
HTML:
<div>
<button>button</button>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
jqueryui JS
$('button').button();
$('select').selectmenu({
width: 120 // Needed to show see options
});
Current Result:
Fiddle that show the problem: https://jsfiddle.net/9xv7jqn4/2/
Is this a bug or a setting I am missing? Any help is appreciated
EDIT:
Thank you for the answers, I am still testing them in my code... I am also interested in know why this happens? Why the selectemenu is taking more space than it looks? Is this a bug of selectmenu widget?
Maybe with this css:
display: inline-flex;
vertical-align: middle;
Your fiddle with the changes: https://jsfiddle.net/9xv7jqn4/3/
Based on thread: "jQuery ui selectmenu vertical position offset (relatively to buttons in this line) " and suggestions here too I ended up adding a couple of rules that fix my case.
I don't know why but ui-selectmenu-button is not vertical-aligned as other buttons. Also decreased the padding of inner text so it looks almost (not exactly) the same height as other buttons.
.ui-selectmenu-button {
vertical-align: middle;
}
.ui-selectmenu-button .ui-selectmenu-text {
padding-top: 0.3em; padding-bottom: 0.3em;
}
You can use
vertical-align: top;
for your button like here: https://jsfiddle.net/9xv7jqn4/4/
$('button').button();
$('select').selectmenu({width: 120});
div,
button,
select{
border: thin dotted red;
}
span {
border: thin dotted blue;
}
.one{
vertical-align: top;
}
<div>
<button class='one'>button</button>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
Another good option is to add wrappers like here: https://jsfiddle.net/9xv7jqn4/6/
$('button').button();
$('select').selectmenu({width: 120});
div,
button,
select{
border: thin dotted red;
}
span {
border: thin dotted blue;
}
.w{
display:inline-block;
vertical-align: middle;
}
<div>
<div class='w'>
<button>button</button>
</div>
<div class='w'>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
</div>
image inside .cshtml file:
<img src="~/Content/images/imghead.png" style=" border:4px solid #ffffff; border-radius:10px; box-shadow: 2px 2px #f2f2f2; "/>
This is how it's supposed to be:
This is how it looks:
EDIT:
The row below produces the first image (rounded corners) upthere on the HTML output. On pdf output looks like second image.
Styles are not cared.
<tr>
<td align="center" style=" height:120px; ">
<img src="https://abcstorage.blob.core.windows.net/Images/head.png" style="border:4px solid #ffffff; border-radius:10px; box-shadow: 2px 2px #f2f2f2; " />
</td>
</tr>
This is the Render() Method:
using (var pdfDocument = new Document(PageSize.A3, HorizontalMargin, HorizontalMargin, 110, 30))
{
PdfWriter pdfWriter = PdfWriter.GetInstance(pdfDocument, outputMemoryStream);
pdfWriter.CloseStream = false;
pdfWriter.PageEvent = new PrintHeaderFooter();
pdfDocument.Open();
using (var htmlViewReader = new StringReader())
{
XMLWorkerHelper.GetInstance().ParseXHtml(pdfWriter, pdfDocument, htmlViewReader);
}
}
This is not how MVC work, the way you are doing it are more Asp .net Webform style.
Use css for this, or if you need dynamic change it use ViewBag such as (not tested):
Action
public ActionResult pdfOutput(string id, string pid)
{
ViewBag.ImgHeadBorder=iTextSharp.text.Rectangle.BOX;
}
View
#if(ViewBag.ImgHeadBorder != null)
{
<img id="imgHead" src="~/Content/images/imghead.png" style="border:#ViewBag.ImgHeadBorder"/>
}
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
color: #ff0000;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
background-color: #ffeeee;
border:1px groove;
}
.validation-summary-errors {
font-weight: bold;
color: #ff0000;
}
.validation-summary-valid {
display: none;
}
How lighted field in a green color with succesfull validation? Add new option ".input-validation-valid" dont help. May be used special jQuery plugins? Thanks in advance for all your help
Assuming you using query validation and unobtrusive validation, when a field is valid the error message is removed from the DOM so there's nothing to style! A typical error renders this (note the <span> within a <span>
<span class="field-validation-error" data-valmsg-for="Account.Description" data-valmsg-replace="true">
<span for="Account_Description" generated="true" class="">Please enter a description</span>
</span>
When its valid, the inner span is removed and the class name changes to 'field-validation-valid'
<span class="field-validation-valid" data-valmsg-for="Account.Description" data-valmsg-replace="true"></span>
I have a line like this in my view:
<div class="contact">
<h6>#Model.Salutation</h6><h3>#Model.FirstName #Model.LastName</h3>
</div>
I am trying to achieve a Mr Tommy Jones, while Mr in a different formatting.
Such as below:
.contact h3 {
font-size: 1.1em;
}
.contact h6 {
font-size: 0.85em;
color: gray;
}
However I get a line break between Mr and rest, what do I have to do?
You have h6 tag followed by h3 tag. I'm thinking...is this a true header text? Are you using tags because of formatting instead of meaning?
Try to write:
<div class="contact">
<span class="title">#Model.Salutation</span><span class="name">#Model.FirstName #Model.LastName</span>
</div>
With following CSS (update to match required formatting):
.contact .title
{
font-size: 0.85em;
color: gray;
}
.contact .name
{
font-size: 0.85em;
font-weight: bold;
}
If you're using HTML 5 tags you may include microdata informations and use different tags too. Look this example (just updated with microdata):
<div class="contact" itemscope itemtype="http://schema.org/Person">
<span itemprop="title">#Model.Salutation</span>
<span itemprop="name">#Model.FirstName #Model.LastName</span>
</div>
Your CSS may be changed to:
div[itemtype="http://schema.org/Person"] > span[itemprop="title"]
{
font-size: 0.85em;
color: gray;
}
div[itemtype="http://schema.org/Person"] > span[itemprop="name"]
{
font-size: 0.85em;
font-weight: bold;
}
All h* are by default block elements, simply meaning that they will occupy a whole width of the container, pushing things to the left and right of it.
try adding display:inline to your h6 and h3
.contact h6, .contact h3 { display:inline }
h3 and h6 are both blocking elements, so either you change the display property of both to inline (which I don't recommend) or change your markup like this:
<div class="contact">
<h3><span class="salutation">#Model.Salutation</span> #Model.FirstName #Model.LastName</h3>
</div>
Styling only the span element.
Another possibility - if the information about «salutation» is not particular relevant in the context but it's just used to introduce the name for visualization purpose - is to use pseudoelements and place there that information like so:
<div class="contact">
<h3 data-salutation="#Model.Salutation">#Model.FirstName #Model.LastName</h3>
</div>
and the CSS
.contact h3 {
font-weight: bold;
}
.contact h3:before {
content: attr(data-salutation);
padding-right: 1em;
font-weight : normal;
}