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.
Related
I have a JSF 1.2 dataTable using ICEfaces 1.8. In one column, I would like to display the text from a backing bean, and then to the right of it, display a small image on the same line without it wrapping to a new line.
The image is actually a ice:commandButton component with the image attribute set. The action of clicking on the image is to display a ice:panelPopup panel.
Here is the relevant code of the column within the dataTable:
<ice:column id="col1">
<ice:outputText escape="false" value="#{document.column1Value}" />
<ice:form>
<ice:commandButton actionListener="#{bean1.open}" image="images/popup.gif">
<f:attribute name="docParam" value="#{document.parameter}" />
</ice:commandButton>
...
</ice:form>
</ice:column>
I have tried all sorts of adding CSS style information to various tags, including white-space:nowrap and float but have been unable to get the desired effect.
The <ice:form> generates a HTML <form>, which is by default a block level element, so it always starts at a new line. You need to set the style of the <form> to display: inline.
<ice:form style="display: inline;">
Alternatively, you can also just move that text into the form.
<ice:form>
<ice:outputText escape="false" value="#{document.column1Value}"/>
<ice:commandButton actionListener="#{bean1.open}" image="images/popup.gif">
<f:attribute name="docParam" value="#{document.parameter}" />
</ice:commandButton>
...
</ice:form>
Either way, you only still need to prevent the cell's content from being whitespace-wrapped when there's little room left in the cell's width. You could achieve that by setting white-space: nowrap on the common parent element of the both elements. In case of the first approach (setting the form to display: inline), that would be the <td> element and in case of the second approach (putting the text inside the same form), that would be the <form> element. E.g.
<ice:form style="white-space: nowrap;">
<ice:outputText escape="false" value="#{document.column1Value}"/>
<ice:commandButton actionListener="#{bean1.open}" image="images/popup.gif">
<f:attribute name="docParam" value="#{document.parameter}" />
</ice:commandButton>
...
</ice:form>
(note, the style attribute is in the above examples exemplary, in real you should be using CSS files instead with style classes)
I'm using GWT 2.4 and uiBinder.
I'm trying to get a grouping of widgets in the center of a page aligned vertically with a single outside border. I thought it would be fairly easy, but I need to use a vertical layout in the center of the page to align the widgets.
The widgets are lined up the way I wanted using Vertical Panels, but there isn't a border option available, unless I want to put borders around each of the elements using the borderwidth property.
Here is the uiBinder code:
<g:HTMLPanel ui:field="mainPanel">
<g:VerticalPanel ui:field="verticalPanel" styleName="{style.center}">
<g:Label ui:field="titleLabel"></g:Label>
<g:Label ui:field="loggedInUserLabel" text="You are logged in as: "> </g:Label>
<g:Label ui:field="userNameLabel" styleName="{style.spacer-bottom}"></g:Label>
<g:FormPanel ui:field="formPanel" styleName="{style.spacer-bottom}">
<g:FileUpload ui:field="fileUpload"></g:FileUpload>
</g:FormPanel>
<g:Label ui:field="Label" text="Please select:"></g:Label>
<g:ListBox ui:field="ListBox" styleName="{style.spacer-bottom}" visibleItemCount='5'>
<g:item value="-1">-- Please select item(s) below: --</g:item>
</g:ListBox>
<g:Button ui:field="Button" styleName="{style.button}" text="Calculate"></g:Button>
<g:HorizontalPanel ui:field="horizontalPanel" styleName="{style.spacer-top}">
<g:cell width='5em' horizontalAlignment="ALIGN_LEFT">
<g:Button ui:field="cancelButton" styleName="{style.exitcancelbutton}" text="Cancel"></g:Button>
</g:cell>
<g:cell width='5em' horizontalAlignment="ALIGN_RIGHT">
<g:Button ui:field="exitButton" styleName="{style.exitcancelbutton}" text="Exit"></g:Button>
</g:cell>
</g:HorizontalPanel>
</g:VerticalPanel>
</g:HTMLPanel>
Did I design this wrong, I mean using the wrong panel, for what I'm trying to do?
you can set the border for borderwidth of the verticalpanel so that all the widgets added to it will be shown as if it had a border.
Okay, I figured this one out on my own. Being a java dev I need to lean more on the CSS solutions, but after doing some thinking, CSS is the correct way to do this. I put this into my CSS:
.mainPanel {
width: 400px ;
margin-left: auto ;
margin-right: auto ;
border: 1px solid black;
padding: 2px;
margin-bottom:6px;
}
and then I leverage the topmost panel, which is my main container, (the HTMLPanel) and apply the style to it:
<g:HTMLPanel ui:field="mainPanel" styleName="{style.mainPanel}">
<table width="30%" align="center">
<tr> etc...
It's centered in the page and has a border like I wanted. I generally lean towards the table layouts out of habit, but it seems to work well for what I want here.
I tried to do this to insert a few blank lines in my web page (to separate my text from an image displayed through a script) but it didn't work:
<asp:ContentPlaceHolder ID="ContentText" runat="server">
</asp:ContentPlaceHolder>
<p></p><p></p><p></p><p></p><p></p>
<script type="text/javascript"><!--
...
If you have time to explain to me why the series of p's and closing p's didn't work, that'll be great. Otherwise, please just tell me how to insert some space there. Thanks.
Try this
<div style="height: 100px"></div>
You need <br /> which is a line break.
<p> are for paragraphs and will separate any text between the opening and closing tag with any other elements, as they are all empty there is no effect.
Investigate <div> and <span> as there are countless ways to separate elements rather than just a blank line.
Wouln't it be better to use CSS to achieve what you want? If you only need a vertical spacing between your text and your image. I would add a top margin to the image you are inserting throught javascript.
For example:
<asp:ContentPlaceHolder ID="ContentText" runat="server">
Your text is here
</asp:ContentPlaceHolder>
<img src="javascript-inserted-image.jpg" width="100" height="100" style="margin-top: 50px;" />
In real life, I would be using a CSS class that I would assign to the image instead of applying the margin to the style attribute of the image.
Edited:
Your image would also need to be displayed as a block element (CSS style display: block;) if your the content of your place holder is not a block element like a p, div, blockquote, etc...
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.
.labelOne { border-width:thin;
border-style:solid;
border-color:Red;
background-color:Silver; }
<asp:Label ID="Label1" runat="server" CssClass="labelOne">
<h1>Hello world</h1>
</asp:Label>
<br /><br />
<asp:Label ID="Label2" runat="server"
BorderColor="Black"
BorderStyle="Solid"
BorderWidth="1px"
BackColor="Silver">
<h1>Hello world</h1>
</asp:Label>
Hello. In the code sample above I have 2 Label controls with their contents set to an h1 header tag. The first Label is styled using css, and the second with the Label's inline properties (both Labels have identical styling). But the first Label doesn't output properly, it's border is broken. If I replace the first Label's markup with plain "Hello world" text it renders properly, but it breaks again when I use markup. Can someone explain why this is happening?
You're rendering invalid html. Label controls put their contents inside a span or label html tag by default, so now when you put h1 tags inside the label you have a block element inside an inline element, which is invalid.
You should wrap your h1 tags outside the label control, and then perhaps use a literal control instead — like this:
<h1 class="LabelOne"><asp:Literal ID="Label2" runat="server">
Hello world
</asp:Literal></h1>
Note that you could also easily apply inline styles to h1 if you wanted... not that I recommend inline styles, though.
Add this to your CSS:
display:inline-block;
Apparently Asp.Net adds that css style for you when you use the inline styles on a label.
By the way, I was able to spot the difference between the styles applied to the 2 labels (span tags) very quickly by bringing it up in Firebug.
Label is the wrong control to be using here as it renders a html <label>, which defines a label for an input element.
It would make more sense to use a Panel which will render as a <div>.
A span-element (which is what the asp:Label outputs) is an inline element, and can not contain block level elements like h1. This might be the reason why it breaks.