I am us ADXStudio CRM. I want to add CSS styles in my existing contact form. So I please help me in adding the css styles in label and text box.ere
Here goes my code
<asp:Content ID="Content6" ContentPlaceHolderID="ContentBottom" runat="server">
<%: Html.HtmlAttribute("adx_copy") %>
<crm:CrmDataSource ID="WebFormDataSource" runat="server" />
<adx:CrmEntityFormView ID="ProfileFormView" runat="server"
DataSourceID="WebFormDataSource"
CssClass="crmEntityFormView"
EntityName="contact"
FormName="ContactPref"
ValidationGroup="Profile"
ValidationSummaryCssClass="alert alert-danger alert-block"
RecommendedFieldsRequired="True"
ShowUnsupportedFields="False"
ToolTipEnabled="true"
ClientIDMode="Static"
/>
Assuming you are using CRMEntityFormView (which is the default out of the box contact us form view), you should look for .crmEntityForm class.
.crmEntityFormView .cell input[type=text], .crmEntityFormView .cell select, .crmEntityFormView .cell textarea {
background-color:blue;
}
.crmEntityFormView .cell label{
background-color:red;
}
Related
I'm working on a ASP.Net Web Forms project .I need to show icon in Gridview row dynamically based on a condition and need to show a tool tip when user hovers on that icon. Using the title attribute I was able to show the tool tip, but I need to design the tool tip as required (Square). How can I achieve that ..? ,How to add style to title attribute ..?
This is the code behind method
protected string GetUnsupportedIcon(MNDto a)
{
if (!a.Supported)
{
return $#"<i class=""fa fa-warning"" title='{message}' style=""color:#EEA42E;font-size:16px""></i>";
}
else return $#"<i class=""hidden""></i>";
}
Calling this method from aspx page
<asp:TemplateField HeaderText="<%$ Resources:ColumnNewCategory.HeaderText %>" HeaderStyle-HorizontalAlign="Left" HeaderStyle-VerticalAlign="Middle" ItemStyle-VerticalAlign="Middle" ItemStyle-CssClass="mxcell" HeaderStyle-CssClass="Outside">
<ItemTemplate>
<%# ((MNDto)Container.DataItem).SuggestedCategory %> <%# GetUnsupportedIcon((MNDto)Container.DataItem) %>
</ItemTemplate>
</asp:TemplateField>
You can't style an actual title attribute
How the text in the title attribute is displayed is defined by the browser and varies from browser to browser. It's not possible for a webpage to apply any style to the tooltip that the browser displays based on the title attribute.
You can make a pseudo-tooltip with CSS and a custom attribute (e.g. data-title)
Example code:
<a href="http://www.google.com/" title="Hello Stackoverflow!">
Example code --- Hover me
</a>
Example CSS:
a {
position: relative;
display: inline-block;
margin-top: 20px;
}
a[title]:hover::after {
content: attr(title);
position: absolute;
top: -100%;
left: 0;
}
I want to write css for textbox in asp.I'm familiar with html,php. Struck to convert html css to asp css.
css for html input
input[type=text],textarea,select,input[type=password]{
float:right;
margin-right:20%;
width:155px;
}
I want to convert this to input boxes
<asp:textbox runat="server"></asp:textbox>
<asp:dropdownlist runat="server"></asp:dropdownlist>
You need to find something which has the type attribute equal to text in HTML
CSS
input:not([type]), input[type="text"] {
background: green;
}
or make the HTML explicit.
<input name='t1' type='text' id='txt1' />
Now you can customize the CSS attribute according to your requirement.
Hope it helps
You can use CssClass property and then style it as you require. For example
<asp:TextBox runat="server" ID="MyTextBox" CssClass="MyCss"></asp:TextBox>
and then style it using MyCss
Further info here
I am trying to create a bunch of text boxes with their title above the text boxes and format them so there are several textboxes in a line.
This is what I want:
The problem I'm having is when I try to write the CSS to allow me to do this, the text boxes overlap.
I am using a custom Asp.Net Master Page in Visual Studio that was created by my employer and I'm having a hard time trying to make this happen.
Here is my code:
<%# Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPages/Intranet/Intranet.2Columns.Master"
CodeBehind="AddNewApplication.aspx.vb" Inherits="...AddNewApplication" %>
<asp:Content ID="Content1" ContentPlaceHolderID="headmeta" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="headCustomScriptsCSS" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cpMainContent" runat="server">
<h1>
Add a New Application</h1>
<h3>
General Description</h3>
<form>
<div class="group1">
<label for="EnglishShortName">
English Short Name</label>
<br />
<input type="text" name="EnglishShortName" />
</div>
<div class="group1">
<label for="FrenchShortName">
French Short Name</label><br />
<input type="text" name="FrenchShortName" />
</div>
<div class="group1">
<label for="ApplicationCode">
Application Code</label><br />
<input type="text" name="ApplicationCode" /><br />
</div>
<div class="EnglishLN">
<label for="EnglishLongName">
English Long Name</label><br />
<input type="text" name="EnglishLongName" /></div>
<div class="EnglishLN">
<label for="SecureChannel">
Secure Channel</label><br />
<select name="SecureChannel" class="inline">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
</asp:Content>
And my CSS:
.group
{
display:inline-block;
}
.EnglishLN
{
display:inline-block;
margin-right:5px;
}
Any ideas?
Thanks!
I think the problem you are having is that the labels inside your div.group1's and div.EnglishLN's are by default displaying as blocks meaning they expand to fill all horizontal space. Try setting the labels to display: inline; like so:
.group1
{
display: inline-block;
}
.EnglishLN
{
display: inline-block;
margin-right: 5px;
}
.group1 label, .EnglishLN label
{
display: inline;
}
Edit: I just noticed a error in both our css where the.group selector should be .group1
Edit2: It seems to work in this fiddle http://jsfiddle.net/kmxF5/
It might be a bit of overkill, but I couldn't resist removing your inline css and adding a few helper CSS styles.
I prefer 'float' over 'inline-block' but they can be a pain to use if you haven't used them before.
This http://jsfiddle.net/chillfire/QYSQ8/ should work, however it is not responsive.
My CSS;
.fl{
float:left;
}
.fullwidth{
width:80%;
}
.split30
{
width:30%;
}
.split60
{
width:60%;
}
.EnglishLN
{
margin-right:5px;
}
.boxPad{
margin:10px 0 10px 0;
}
Using a combo of the above you can float/pad your way around.
If you are going to build a data entry form, have you considered using a table?
Tables still work for tabular data and can be easier to manage forms with.
If you are building anything that needs to work nicely across browsers and don't enjoy hand coding CSS or using tables then you should have a look at something like bootstrap or Zurb foundation (there are other CSS UI frameworks out there too)
cheers
Have you tried setting the size of your div tags? Something like:
.group
{
display:inline-block;
width:200px;
height:200px;
}
.EnglishLN
{
display:inline-block;
margin-right:5px;
width:200px;
height:200px;
}
Then if you want to your inputs to be longer/shorter just play around with their "size" attributes.
I have a login FORM inside a Hidden DIV, this DIV is hidden using CSS display:none; when I click on some other DIV, I show this DIV using jquery .slideDown(), so I can be able to use this form.
When I click on the button, the OnClick="Login" doesn't seem to work,and when I removed this form from this hidden div to simply another place in the body, it worked. What's the problem?
ASP.NET:
<div id="userCPContainer">
<form id="loginForm" runat="server">
<asp:Label ID="Label1" runat="server" Text="Username" class="loginLabels"></asp:Label>
<br />
<asp:TextBox ID="usernameField" runat="server" MaxLength="50" class="loginFields"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Text="Password" class="loginLabels"></asp:Label>
<br />
<asp:TextBox ID="passwordField" runat="server" MaxLength="50"
TextMode="Password" class="loginFields"></asp:TextBox>
<asp:Button ID="loginButton" runat="server" Text="Log in" onclick="Loginn" class="loginButton"/>
</form>
</div>
JQUERY:
function showUserCP() {
$("#userCPContainer").slideDown(200);
$(".userCPDiv").css("background-color", "#000000");
$(".userCPDiv").css("border-color", "#000000");
}
function hideUserCP() {
$(".userCPDiv").css("background-color", "rgb(43, 147, 206)");
$(".userCPDiv").css("border-color", "rgb(43, 147, 206)");
$("#userCPContainer").slideUp(200);
}
$(".userCPDiv").click(function (e) {
//Either way, hide Main Menu
hideMainMenu();
if ($("#userCPContainer").is(":visible")) {
hideUserCP();
}
else {
showUserCP();
}
e.stopPropagation();
});
CSS:
#userCPContainer
{
overflow:hidden;
border-style:solid;
border-top-style:none;
border-color:rgb(43,147,206);
border-width:2px;
position:absolute;
right:0px;
top:0px;
display:none;
z-index:1;
width:300px;
background-color: #000000;
}
Nothing really complicated...
When you use CSS display: none; the problem is that all that's inside that DIV gets removed completely from the HTML Document and that causes that ASP.NET does not recognize this element when you show it via jQuery. I see to possible solutions:
Use visibility: hidden instead of display: none;, if you do this you will probably have some problems with the DIV height because it will take the space needed to render but it will not be visible.
Use a ScriptManager and an UpdatePanel and put the div and the form inside those elements, so the server will know when you render the Button in the client. Also, make sure that you register your jQuery scripts inside the ScriptManager
Hope this helps you
asp.net
need to use css to style this dropdown list...
<style type="text/css">
.cascadingDropDownList{ background-color:Red;}
.cascadingDropDownList button{ background-color:Green; }
</style>
<asp:DropDownList ID="ddlVehicleMake" runat="server" CssClass="cascadingDropDownList" />
The background color is red for the textbox part but not green for the button. How can I get access to the button's css properties?