I cannot seem to center the header text of a column in my GridView if it is sortable. The html output is much different for a sortable column (it seems to place a table inside of the td column).
Any thoughts on what can be done to get this centered?
I put the html ouput in a jsfiddle here ... http://jsfiddle.net/mcox05/85Euq/
I have tried the following code on the grid view with no success. Bear in mind that the bound fields are server controls I designed but they do not affect the header text in any fashion:
I am open to any css, js, or asp.net fix that can correct this issue. Thanks!
<sc:DateBoundField DataField="LastLogin" SortExpression="LastLogin" HeaderText="Last Login"
HeaderStyle-Width="125px" ItemStyle-Width="125px" HeaderStyle-HorizontalAlign="Center" />
<sc:SCommandButtonField Command="Change" ItemStyle-Width="100px" HeaderStyle-Width="100px"
HeaderText="Change" HeaderStyle-HorizontalAlign="Center" Image="img.axd?ico16=edit" />
If you can get the style of your inner table to look like style="height: 32px; cursor: pointer; font-weight: bold; margin:auto;" it will center, at least in FF.
Related
I would have my Gridview User Control In gray frame(its div tag) whether Gridview is in editmode or not, I did use Gridview's Width and Styles but it didn't work.
How do I do this?
.GridViewStyle
{
/*It didn't work*/
width:50%;
}
Gridview when its in edit mode
Gridview when its not in edit mode
The issue is certainly the size of the <input /> text boxes when in edit mode
Add the <EditRowStyle> element to your gridview to give the edit row a CSS class
<asp:GridView ID="GridView1" runat="server">
...
<EditRowStyle CssClass="GridViewEditRow" /> <%-- add this --%>
</asp:GridView>
Now you can control the size of the textboxes with CSS
.GridViewEditRow input[type=text] {width:50px;} /* size textboxes */
.GridViewEditRow select {width:50px;} /* size drop down lists */
It seems some controls that are visible in edit mode (the textbox inputs mainly) have a certain width, making the entire grid too wide. Your browser will do the best it can to set the width of the table (which is what a gridview renders to), but if the contents are too wide, it will have to make it wider than you wanted it to.
Inspect the textbox elements with Firebug (if you're using Firefox), Developer Tools (Internet Explorer), ... See if they have a width set to them.
To manage the grid when it is in edit mode, please add scroll bar in the xaml code of div. When the edit mode will be called it will adjust into the scroll bar.
Define a div, put the grid in that.
Here is the code how to do it.
<div style="width:100px; height:100px; overflow:scroll;">
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</div>
<asp:BoundField HeaderText="Title" ControlStyle-Width="100px" DataField="Title" />
use ControlStyle-Width attribute and assign the width to the column
The following works :
<asp:TemplateField HeaderText="Salary" ControlStyle-CssClass="cssWidth"></asp:TemplateField>
<style type="text/css">
.cssWidth {
width : 150px;
}
</style>
this seems a stupid question, but i can't align column content in a Ext.Net gridpanel !
I use this :
<ext:Column DataIndex="category1" Header="Category" Align="Left" Width="80" />
But only the column header is aligned, not the content !
Thanks
To give different alignments for the column header and content, you should assign the ColumnID attribute for the ext:Column.
And then, you will be able to give one alignment for the header (by CSS with ColumnID in the class name) and another one for the content with the Align attribute.
For example, to align the header to the center and the content to the left, your code will be like that:
<style type="text/css">
.x-grid3-hd-category1
{
text-align: center;
}
</style>
<ext:Column ColumnID="category1" DataIndex="category1" Header="Category" Align="Left" Width="80" />
Another approach without the need of adding a custom CSS class, is setting the CSS attribute of the Column (adding inline css)
Suppose you have a 'Name' column, you want the column title to be centered, but not the content, you could try.
<ext:Column ColumnID="NameColId" DataIndex="Name" Header="Full name" Align="Center" Css="text-align:left;" />
you could try adding "!important" to the inline css rule, if content is not aligned with the first attempt.
This does the same effect as amartine answer, just that this is Inline css.
Hope this helps.
I was using a LinkButton and it had like lot of text in it which made it quite long. This was fine as the LinkButton wrapped the text onto the next line when it ran out of room.
I then changed this to a standard asp:Button and the problem is the text doesn't wrap the button just becomes as long as the text. This is a problem because it forces the container it is within to be longer than I intended.
Is there a way to make the text of the button wrap?
You can do that by setting a width and the CSS property white-space: normal:
This goes in your <head>
<style type="text/css">
.wrap { white-space: normal; width: 100px; }
</style>
And your button:
<asp:Button ID="btn" runat="server" Text="some really breally long text that I want to wrap" CssClass="wrap" />
<asp:Button ID="btn" runat="server" Text="some really breally long
text that I want to wrap" />
This question was helpful and wanted to point out if we want to break the text in a specific spot we could also by adding the
within the text value.
I also marked wsanville answer as useful.
You should be able to set a width on the asp:button (width=100) and that should force the text to wrap.
There are some alternate solutions in this post that may be helpful:
ASP:Button Text Word Wrap
I've just replaced Telerik controls in a small web project with DevExpress controls, but now, despite my adding an inline display div as container, these controls are no longer rendered inline. What could have caused this, and what can I do to get these errant controls back inline?
<div style="display: inline;">
<label>
Department:</label>
<dx:ASPxComboBox ID="deptCombo" runat="server" AutoPostBack="false" ValueField="DeptId" TextField="DeptName" Width="250px" OnSelectedIndexChanged="deptCombo_SelectedIndexChanged">
</dx:ASPxComboBox>
<label>
Production Date:</label>
<dx:ASPxDateEdit ID="productionDatePicker" runat="server" DisplayFormatString="{0:dd/MM/yyyy}" EditFormat="Custom" EditFormatString="dd/MM/yyyy"
ondatechanged="productionDatePicker_DateChanged">
</dx:ASPxDateEdit>
</div>
Sounds like the DevX controls have some CSS that you'll need to override.
For starters, I'd try adding the !important flag to the style:
<div style="display: inline !important;">
If that doesn't work, switch back to the RadControls. They are far superior :)
Almost all of DevExpress controls are rendered as tables. The main advantage of this approach is that this way provides good cross-browser capability, since when nested divs are used, it might be hard to synchronize their positions and sizes for all browsers. However, using tables allows end-users to get rid of this problem.
[CSS] add this line on your css
.DXControlsInline {display: inline-table;}
[ASPx] add CssClass="DXControlsInline" on controls you want to make inline
<dx:ASPxLabel ID="ckArboviralDiseaseChikungunyaOtherSpecify" runat="server" CssClass="DXControlsInline" Text="Specify:"></dx:ASPxLabel>
<dx:ASPxTextBox ID="tbArboviralDiseaseChikungunyaOther" CssClass="DXControlsInline" ClientInstanceName="tbArboviralDiseaseChikungunyaOther" runat="server" Width="350px"></dx:ASPxTextBox>
Source : http://www.theedgesearch.com/2016/04/how-to-arrange-devexpress-controls.html
The task is not directly related to our controls and can be implemented without them in a similar way. In the case of ASPxTextBox, define a CssClass property to it with the following rule:
<dx:ASPxTextBox ID="txt1" runat="server" Width="170px" CssClass="txtStyle"></dx:ASPxTextBox>
.txtStyle {
display: inline-block;
}
I've prepared a small sample to demonstrate how it works. See also CSS display Property.
UPDATED:
When a caption is specified for ASPxTextBox, it is rendered as a table. That is why the suggested approach does not work in this case. To resolve this issue, I suggest you place each text box in a div element and set the 'display' property for it. Let me know if this helps.
Source
The question is pretty straightforward. I have an <asp:Image> which lives in an <asp:Panel>. My goal is to provide a very basic "print preview" where either left, center, or right alignment is selected. The panel represents the full print area (a sheet of 8.5" x 11" paper) and the image inside is the area that will actually get printed. The full code is this:
<asp:Panel ID="Panel2" runat="server"
BackColor="Black"
BorderStyle="Inset"
Width="425px"
Height="550px" >
<asp:Image runat="server" Height="425px" ImageAlign="" />
</asp:Panel>
I set the ImageUrl property in the code behind, no problems there. If I want to align the image all the way to the left or right, I can just specify ImageAlign="[Left|Right]". However, I haven't been able to find a way to center the image in the panel. I've tried all the different ImageAlign values and none of them seem to do what I want. Am I SOL here? If I have to, I can alter the CSS class for the image or panel but I couldn't figure out anything successful with that approach either.
what if you use panel HorizontalAlign="Center" property.......
<asp:Panel runat="server" ID="Panel2" HorizontalAlign="Center">
</asp:Panel>
in your panel tag (which becomes a div client side) just add this attribute:
CssStyle="text-align:center;"
Though that would center EVERYTHING within that panel.
Perhaps just set the CssStyle of the image to a hardcoded left-margin? If your goal is a fixed width print preview, this should be ok.
Panel CSS Property:
CssStyle="alignCenter"
CSS:
.alignCenter
{
margin: 0 auto;
}
you can either use inline style sheet or external style sheet to accomplish this and add your css code in it