I'm developing sharepoint datetime control and got some problem with css of this control.
below is my html code.
<td style="padding-top: -10px">
<SharePoint:DateTimeControl CalendarImageUrl="/_layouts/NCS.OCP.Resource/images/calendar.jpg"
DatePickerFrameUrl="/_layouts/iframe.aspx" ID="DateDOB" DateOnly="true" Calendar="Gregorian"
LocaleId="2057" runat="server"></SharePoint:DateTimeControl>
<td>
I have tried modify ms-input css with padding-top -10px but failed, this control always falls down of my td.
is there any way to pull this control up so that this td can on one line...?
Looks like sharepoint has it's own <div>s or <td>s. Maybe even some custom css/
Try inspecting the elements, getting their ID's and then changing it with JS.
Related
i have a fieldset in my asp.net website to make a groupbox look alike.. but its not coming.
here's what i am doing :
<fieldset id="fl1" runat="server">
<legend>My Group</legend>
</fieldset>
only My Group is coming the border isn't coming ... i also used panel but same issue...
i am using ajax toolkit and update panel in this page ...
what should i do?
The fieldset is visible, it is just the border that isn't. Therefore you, presumably, have a style sheet that is removing the border.
Edit the style sheet so either it doesn't remove the border in the first place, or it adds one in explicitly.
You don't have anything in the fieldset so it can't put a border around nothing.
<fieldset id="fl1" runat="server">
<legend>My Group</legend>
<!-- Put anything you want to be in the fieldset here. -->
</fieldset>
Asp.net core pages do not seems to support all kind of fieldset elements.
It supports but now visible in browsers.
You may use, fieldset like this , As solid reference is supported.
<fieldset style="border:0.5px solid">
=>>code goes here
I´m using contact form 7 (wordpress, contact form) as a order page
for products. But I´m interested in styling the HTML-Mail-template in the same 3-column style
as the picture. Is there any easy way to do that?
I think the two previous answers misunderstood the question. Johny is asking how he can edit the html email that gets sent out by contact form 7 either to himself or the person who completes the form.
To do this you need to select the option of "Use HTML content type" in order to use html in the email. This is on the "mail" section of CF7.
Then the easiest way to style the html email template is using a table.
First start with a blank html template with a XHTML doctype:
StackOverflow Email Template
Then you can add any html and information you need to, to get it looking the way you want it:
For instance it is probably easier to start with no margin or padding so you add some style to the body tag:
<body style="margin: 0; padding: 0;">
Then you need to add all your style inline in the table as there are no style sheets sent with your email. You could also create an inline style section in the section as with normal html.
so I would do this for your example:
<table align="center" border="0" cellpadding="2" cellspacing="0" width="100%" bgcolor="#ffffff" style="border-collapse: collapse; font-family: Arial,sans-serif; font-size:1em;" >
Once that is all set you need to add the cells to your table.
As an example your first and second row could be something like this:
<tbody>
<tr>
<td colspan="6">To: [your-name]</td>
</tr>
<tr>
<td>Falt Utan Flask:</td>
<td>[Input-One] Back</td>
<td>Falt Utan Flask:</td>
<td>[Input-Two] Back</td>
<td>Set Datum:</td>
<td>[Date-324]</td>
</tr>
</tbody>
Each will be a new row, and each section will be a new cell. Then just keep populating and building out your table to display the way you want it.
You can add inline style into the or elements as you need it or you can add the inline style in the area as mentioned before.
This is what i needed to do for a website using the contact form 7 plugin. I found these to tutorials very helpful.
Tut 1
Tut 2
Hopefully I have not misunderstood the question myself, it is a bit ambiguous, but it was the closest one I found to what I was looking for.
Yes you can do it, you need to add some css to your existing theme file, as plugin files modification is not recommended, as i can see you have use the text boxes, you can do something like this
css style
.wpcf7-text { width:150px !important; }
.wpcf7-text is the text box class in contact form 7
in form settings
your name- [text- text-20] your addres- [text- text-30]
There are two ways
(1) Over-riding CSS of Contact Form-7 itself. This can be done through .wpcf7-[inner class] then your CSS code.
[The Easy Way]
(2) You can use this plugin https://wordpress.org/plugins/contact-form-7-style/ to style contact form-7. It has variety of options. It is not perfect though but surely a solution.
Hope this helps!
I have a header row which has this structure:
<th...
<a...
<span...
{text}
If you look at the attachement, you will notice that all the headers with this structure are aligned.
Well, when a specific header is clicked for "sorted" status, the structure will be like:
<th...
<a...
<span...
<table>
<tbody>
<tr>
<td>
{text}
</td>
<td>
<div> //with a background image
</td>
</tr>
</tbody>
</table>
Well, in IE8 this sorted column is no longer aligned (see the screenshot please).
I've tried a lot to put some css style (position:relative, etc) to the table inside the span to fix the alignment in IE8 but I failed..
Is here any css guru which can suggest a fix?
Please note that I can NOT change this structure (its some generated code from ICEfaces library) but I can apply css attributes (if I know where...).
Also, there is no css difference (some specific important style) to the sorted column applied. Just plain table inside that span.
Thanks.
Check the vertical-align property, maybe. Here, judging by the screencap, it seems to be in default mode, 'baseline'. (I'm not sure it will do much, though)
Try :
th.stuff {
vertical-align:top;
}
or :
th.stuff {
vertical-align:middle;
}
Also you could make all th slightly higher and gain somme padding to align the content. I think the problem, overall; commes from the select that appears in the th, inside the table.
You can use IE specific style sheets. They are known as conditional style sheets.
http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/
The idea of course would be to change the CSS for that element for IE only (because it does work already with other browsers).
I have a simple asp.net web page that contain a table with about 5 TR and each row have 2 TD .. in the page load I get user data ( 5 property ) and view them in this page the following are first 2 rows :
<table>
<tr>
<td>
FullName
</td>
<td>
<span id="fullNameSpan" runat="server"></span>
</td>
</tr>
<tr>
<td>
Username
</td>
<td>
<span id="userNameSpan" runat="server"></span>
</td>
</tr>
</table>
I always used <asp:Label to set value by code but i always notice that label converted in runtime to span so i decided to user span by making him runat=server to be accessed by code, so
Which is better to use asp:label or span with runat=server ??
The answer is: Whatever works best for you.
asp controls have a different object model from html controls. There is no databinding for html controls, for instance.
EDIT:
Something to consider is whether or not you need a span element at all. Span is an html element used for inline items, and canoot hold ceratin kinds of other items (such as block items). If your html markup make sense to semantically include a span (such as you want to style the text in a specific way) then use it.
Unless you need to control attributes on the span tag, it would be better to do something like this though:
<span class="foo"><asp:Literal id="litFoo" runat="server" /></span>
You should only make an element runat="server" if you need to specifically modify the tag itself (not necessarily just it's contents). For instance, if you need to hide the span at runtime, then you make the span runat="server" so you can access it's Visible property at runtime. Otherwise, it should be left as standard html.
If all your doing is displaying something then your better off using a literal tag which add's no extra markup. Infact 99% of the time literal should be used over label.
Edit: The performance between label/span would be so tiny, if any difference between them at all, that the only reason you would be worrying about that sort of performance was if you were facebook.
I want to strike off all the dates before today in a calendar control with an overlapping, red color x in ASP.NET. I can strikethru using the normal font strikethrough using the DayRender event. I can add an image but that sits adjacent to the date. I want the x (image) to overlap the date
Is this possible? If so, please help me how to go about it.
Thank you.
Use CSS,
Make the table cell position
relative
Make the image position
absolute, top & left: 0
Update:
The calendar control, like all ASP.NET control, outputs HTML. In this case it will output an HTML table, with a structure that looks something like this:
<table class="calendar_widget">
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
</tr>
....etc
The <td>, or table-cell as it's known, will contain the date and image you're inserting. You can use CSS to apply specific styles to the cell and image so that they are rendered differently.
My guess is your calendar's HTML with an image will look something like this:
<td><img src="x.gif" />01</td>
You can use a CSS stylesheet to apply the following styles:
table.calendar_widget td {
position: relative;
}
table.calendar_widget td img {
position: absolute;
left: 0;
top: 0;
}
That's the basics of HTML - if this doesn't help I'd recommend tracking someone down familiar with front end development and getting their help.