How would I set the default properties of server controls that I'll always use?
For example I have combos all over my pages which almost always look the same in the mark up text (e.g. CSS CLasses for PopUp, TextBox, Button, etc.)
I thought of putting the control inside an user control and set the properties there.
But then I would have to access the control itself with a property of the UC.
I want to get rid of these repeating tags:
<Appearance>
<AnyRecordFieldCell CssClass="SFGridAnyRecord"></AnyRecordFieldCell>
<AlternateRecordFieldCell CssClass="SFGridAlternateRecord"></AlternateRecordFieldCell>
<RecordPreviewCell CssClass="SFGridRecordPreview" />
<GroupIndentCell CssClass="SFGridGroupIndentCell" />
<GroupCaptionCell CssClass="SFGridGroupCaption" />
<AnySummaryCell CssClass="SFGridAnySummary" />
<GroupCaptionPlusMinusCell CssClass="SFGridPlusMinus" />
<TopLeftHeaderCell CssClass="SFGridTopLeftHeaderCell" />
<RowHeaderCell CssClass="SFGridRowHeaders" />
<ColumnHeaderCell CssClass="SFGridColumnHeaders" />
<GroupHeaderRowHeaderCell CssClass="SFGridGroupedColumnHeaders" />
<FilterBarCell CssClass="SFGridFilterBarCell" />
</Appearance>
Any ideas?
Consider using ASP.NET Themes, you can use them to set mark-up for controls.
You could go with a purely CSS solution if these elements are almost always the same - i.e. have styles for input and button elements.
Where styles differ the enclosing div, for example, can be referenced to change the style.
Related
I am using Primefaces graphicImage inside a p:tooltip and would like to set the width and height for the images individually.
<p:remoteCommand....update="myImage" />
<p:tooltip beforeShow="remoteCommand()">
<p:graphicImage id="myImage"... style="#{myBean.myStyle}" />
....
Update:
Bean.myStyle is triggered correctly and the style parameter is updated in the page source, but not in the dom tree.
If I set style="width:100px" directly it works, but if the value comes from the bean, it is ignored.
It seems like the style-attribute of graphicImage gets updated but not the component itself.
What am I missing here?
I think style value is setted when the document is loaded and its never reloaded, when its visible just its display:none value is changing. So I would give an id to p:graphicImage then I would add a p:ajax using onShow or similar event (I dont know which one is available for tooltip) then I would use update attribute to render graphic image. If I remember right even it should work just with <p:ajax /> without any attribute but I am not sure
So it should look like that:
<p:graphicImage id="x" style="#{bean.value}">
<p:ajax event="show" update"x"/>
</p:graphicImage>
use this
<p:graphicImage width="#{bean.widthValue}" height="#{bean.heightValue}" >
</p:graphicImage>
Hi i have a textbox which i am using as a counter to show how many characters are still allowed in another textbox. I have made it read only and its background transparent so that you cant tell it is a select box. The only problem is you can still click on it or tab to it. Is there a way to do this so it appears just like normal text and people cant click on it or tab to it?
If this is an Asp.Net Web Control set it's Enabled property to false
<asp:TextBox Enabled="false" />
If it is HTML you can do this:
<input type="text" disabled />
Just replace the input element with a span element or some other non-input element. This requires a trivial change to your JavaScript; you would assign to the innerHTML property of the element rather than value. Then the content will appear as normal text, and you can style it as desired.
you need some style with css and some trick with Jquery.
CSS
.readonly{
border:none;
background:#aaa;
}
Jquery
$(".readonly").focus(function(){
$(this).blur();
});
now just add class="readonly" to your textbox.
<asp:TextBox cssClass="readonly" />
check demo here .
What kind of styling should I set to two Grids in order the one to stand next to the other? In the way I have created them in the xml file, the second stands below the other and it does not comply with the style of the general Page:
<div>
<z:StaticDataGrid ui:field="staticDataGrid" />
<z:DataGrid ui:field="displayedDataGrid" />
</div>
StaticDataGrid and DataGrid are class representing Grid.
Place the grids inside a HorizontalPanel to place them side by side.
<z:HorizontalPanel>
<z:StaticDataGrid ui:field="staticDataGrid" />
<z:DataGrid ui:field="displayedDataGrid" />
</z:HorizontalPanel>
The expected behaviour on enter in a form seems to be undefined in the HTML 4.01 Specification while the HTML 5 specification says it should be the first submit button in the form.
Internet Explorer (IE) highlights the first button in the form when the form has focus by adding a proprietary border or something. Other browsers do not add such a visual clue.
I'd like to use another button as the default and style this button so all browsers will provide a visual clue that it is the default button. (We're using ASP.NET which uses one form per page, and so it's hard to design the pages so that the default button always comes first.)
While I can easily accomplish this with javascript and css in most browsers, I'm having trouble making IE stop highlighting the first button.
Is there any way to tell IE to NOT highlight the first submit-button or to highlight a different button? Or is there some other solution that I've missed?
On your asp.net button control, set useSubmitBehavior="false". That renders the html as a button rather than a submit.
ASP.Net 2.0 also introduced the concept of DefaultButton.
This is available on atleast Form and Panel elements:
<form id="form1" runat="server" defaultbutton="Button2">
<div>
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:Button id="Button1" runat="server" text="1st Button" onclick="Button1_Click" />
<br />
<br />
<asp:panel id="something" defaultbutton="button3" runat="server">
<asp:TextBox id="TextBox2" runat="server"></asp:TextBox>
<br />
<asp:Button id="Button2" runat="server" text="2nd Button" onclick="Button2_Click" />
<br />
<asp:Button id="Button3" runat="server" text="3rd Button" onclick="Button3_Click" />
</asp:panel>
<br />
<br />
</div>
</form>
So, when you load the page, or are entering text in TextBox1, pressing Enter will submit Button2. When you are entering text in TextBox2 pressing Enter will submit Button3 - as you are inside the Panel.
This is powered by an onkeypress method created by ASP.Net.
When the page loads, IE and Firefox both highlight Button2 (as you want).
If you know which button will be declared as the defaultbutton, you can use what ever CSS you would normally use to style this for all browsers.
Rather annoyingly, when you focus either text box, IE will then (incorrectly) highlight Button1.
This is because IE's default behaviour is overridden by some javascript emitted by ASP.Net:
<script type="text/javascript">
//<![CDATA[
WebForm_AutoFocus('Button2');//]]>
</script>
But, IE will then ignore that once another element has focus, and go back to highlighting the wrong button (which doesn't get used unless the user explicitly clicks it in this example).
Other than replacing them with image buttons, I'm not sure what else I can suggest.
One way to get around this is to create a dummy button at the top of the form and move it out of sight. Then handle the enter keycode in javascript and style the new default button with css.
Feels dirty though. Any better ideas?
Use either of these CSS Styles
a:active, a:focus,input, input:active, input:focus{ outline: 0; outline-style:none; outline-width:0; }
a:active, a:focus,button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner
{ border: none; }
OR
:focus {outline:none;} ::-moz-focus-inner {border:0;}
Once the CSS Style part is done, then you might also need to set the IE-Emulator. Update your web applications web.config file and include below key.
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=7; IE=9; IE=8; IE=5;" />
</customHeaders>
</httpProtocol>
</system.webServer>
If you are using .Net 2 this may help you
...Use the DefaultFocus property to
access the control on the form to
display as the control with input
focus when the HtmlForm control is
loaded. Controls that can be selected
are displayed with a visual cue
indicating that they have the focus.
For example, a TextBox control with
focus is displayed with the insertion
point positioned inside of it. ...
What about defining a particular CSS style (or class) for this button ?
<input type="button" value="basic button" .../>
<input type="button" style="border: solid 2px red;" value="default button" .../>
How can styles be applied to CheckBoxList ListItems. Unlike other controls, such as the Repeater where you can specify <ItemStyle>, you can't seem to specify a style for each individual control.
Is there some sort of work around?
You can add Attributes to ListItems programmatically as follows.
Say you've got a CheckBoxList and you are adding ListItems. You can add Attributes along the way.
ListItem li = new ListItem("Richard Byrd", "11");
li.Selected = false;
li.Attributes.Add("Style", "color: red;");
CheckBoxList1.Items.Add(li);
This will make the color of the listitem text red. Experiment and have fun.
It seems the best way to do this is to create a new CssClass. ASP.NET translates CheckBoxList into a table structure.
Using something like
Style.css
.chkboxlist td
{
font-size:x-large;
}
Page.aspx
<asp:CheckBoxList ID="chkboxlist1" runat="server" CssClass="chkboxlist" />
will do the trick
In addition to Andrew's answer...
Depending on what other attributes you put on a CheckBoxList or RadioButtonList, or whatever, ASP.Net will render the output using different structures. For example, if you set RepeatLayout="Flow", it won't render as a TABLE, so you have to be careful of what descendant selectors you use in your CSS file.
In most cases, you can can just do a "View Source" on your rendered page, maybe on a couple of different browsers, and figure out what ASP.Net is doing. There is a danger, though, that new versions of the server controls or different browsers will render them differently.
If you want to style a particular list item or set of list items differently without adding in attributes in the code-behind, you can use CSS attribute selectors. The only drawback to that is that they aren't supported in IE6. jQuery fully supports CSS 3 style attribute selectors, so you could probably also use it for wider browser support.
You can also achieve this in the markup.
<asp:ListItem Text="Good" Value="True" style="background-color:green;color:white" />
<br />
<asp:ListItem Text="Bad" Value="False" style="background-color:red;color:white" />
The word Style will be underlined with the warning that Attribute 'style' is not a valid attribute of element 'ListItem'., but the items are formatted as desired anyway.
You can even have different font styles and color for each word.
<asp:ListItem Text="Other (<span style=font-weight:bold;>please </span><span>style=color:Red;font-weight:bold;>specify</span>):" Value="10"></asp:ListItem>
public bool Repeater_Bind()
{
RadioButtonList objRadioButton = (RadioButtonList)eventArgs.Item.FindControl("rbList");
if (curQuestionInfo.CorrectAnswer != -1) {
objRadioButton.Items[curQuestionInfo.CorrectAnswer].Attributes.Add("Style", "color: #b4fbb1;");
}
}