I am trying to apply Bootstrap css to my grid view.
<asp:GridView ID="gvSI" runat="server" CellPadding="6"
CssClass= "table table-striped table-bordered table-condensed" />
The result is pretty basic tabular structure. Can anyone tell me if there are any other styles available for professional grid like alternate colors, header, row highlighter..
I'm also trying to style my GridView with Bootstrap. If you want to use the Bootstrap predefine CSS Style, here are your options: http://twitter.github.io/bootstrap/base-css.html#tables. You can add color to selected row by applying Optional row classes (success, error, warning, info). If you still want to change the table style to your need, you will have to use ID and create a specific css class for this ID.
There is an header problem with the asp.net Gridview, but it was solve in a previous post, here:https://stackoverflow.com/a/12362569, it works for me. Though, I'm still looking for a solution to apply Bootstrap style to the GridView pagination.
Related
Hello again everyone,
I am putting validation on a Web Form I'm making, and I set all the placeholder text to red to indicate which fields were required. I also have a dropdownlist that is required, so I wanted to change the text color of the first "default" option to be red also. All the solutions I find across the internet say to just style it:
<asp:ListItem style="color:red" Value=null>--Select Tax Status--</asp:ListItem>
However, this is not making any difference in Chrome or IE. I inspected the element and it even has the element.style color as red, but it is clearly not...
Anyone know how to do this so it works? or where I'm messing up?
IMHO if you want to indicate that some fields are required you should use something like put an asterisk(*) to indicate that, and then focus and color with red (or another color) the controls they are missing when clicking the submit button, this way is more standardized and thus the users can understand easily what you are trying to tell them, because they are more familiar in this way, I think it could give a better experience to your users .
However, as #Yuriy commented, the DropDownList/ListItem control is rendered into SELECT/OPTION tags, so if you set the style="color:red" to a ListItem tag only the Option tag is going to be red.
You should apply the style to the DropDownList control as below:
<asp:DropDownList ID="ddl" style="color: red;" runat="server">
<asp:ListItem>--Select Tax Status--</asp:ListItem>
</asp:DropDownList>
It will be rendered as
<select name="ddl" id="ddl" style="color: red;">
<option>--Select Tax Status--</option>
</select>
Dropdown/ListItem render as HTML SELECT/OPTION elements - there're very limited styling you can apply to those - i.e. you can change background color.
Your solution is either use different elements or apply a 3rd party library (e.g. https://select2.github.io/) that turns normal select into styleable elements
Is there a way to deactivate the hover state on table rows in Bootstrap Table?
It automatically set's it there...
The default CSS class of the table is 'table table-hover'. Simply remove the table-hover class to remove the effect.
You can remove the hover effect globally for all tables: http://jsfiddle.net/e3nk137y/1437/
$.extend($.fn.bootstrapTable.defaults, {classes:'table'});
For a single table, you can set data-classes="table": http://jsfiddle.net/e3nk137y/1436/
<table id="table" data-classes="table">
Here is my acefaces datatable
<ace:dataTable id="tbl" value="#{mainSearch.searchResult}" var="srvc"
paginator="true" paginatorPosition="bottom" rows="10"
emptyMessage="No Record Present Yet" rowsPerPageTemplate="10,25,50,100"
rowIndexVar="row" rowStyleClass="#{row mod 2 eq 0?'none':'skyBlue'}">
<ace:column headerText="Category" sortBy="#{srvc.groupName}"
filterBy="#{srvc.groupName}" filterMatchMode="contains">
<h:outputText value="#{srvc.groupName}"/>
</ace:column>
<ace:column headerText="Service Number" sortBy="#{srvc.serviceNumber}"
filterBy="#{srvc.serviceNumber}"filterMatchMode="contains">
<h:outputText value="#{srvc.serviceNumber}"/>
</ace:column>
<ace:column headerText="Shift" sortBy="#{srvc.shift}"
filterBy="#{srvc.shift}" filterMatchMode="contains">
<h:outputText value="#{srvc.shift}"/>
</ace:column>
</ace:dataTable>
Now this datatable is showing on my whole page.I can fix its height by <ace:datatable height=.. but I didn't find any width attribute.I also tried to set its width using CSS (using style attribute on both header, datatable) but it didn't work. Now I am stuck here and unable to find that How can I minimize its width.
Note: The only way that worked for me was to small the header text.For instance, As my first row header is Category.Now If I repalced it with just CAT then whole row gets shrink.It mean first of all I need to squeez the text(as it is my guess).Is there anyway that without poking this text? If not, then how can I resize this text and shortened this datatable?
I've tried altering CSS width property in Firefox of the ICEfaces showcase, achieving the result you want. Note that there may be some potential problems when you make the table too small and the data won't fit in the table anymore, so my advice will be to inspect the resultant table in the browser to get the right CSS fixture.
Regarding the documentation of <ace:dataTable>, there are the typical styleClass and style property for setting CSS style classes and inline style respectively, so the following will do the work:
<ace:dataTable style="width:80%"> ... </ace:dataTable>
or
<ace:dataTable styleClass="my-width"> ... </ace:dataTable>
with CSS class:
.my-width {
width:80%
}
As a side note, when you are ready to try out the latest Primefaces <p:dataTable>, you will find many attributes designed for setting up proper CSS styles.
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!
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;");
}
}