How to align content in Grid panels
Hello,
I have a grid panel using the following tag <h:panelGrid> . I have only one column and I want the child component inside it, to be placed in the middle of the panel and not on the left part as it is done by default. I can probably use something like "left 50%; position relative" but I really don't like that. Any other ways?
Thanks in advance,
Tony
Replying to myself...
using a "text-align:center" in h:panelGrid declaration :-).
Similar Messages
-
Spry Accordion menu - How do you make tabs without content and make panel height fit the content?
I have an Accordion Menu on my site and I would like to put a tab at the top that links to my homepage when clicked, instead of sliding open to show a content panel. I don't have any extra info to put in the content panel, so it would look kind of redundant to have it there.
Also, each panel has a different amount of content, but they all default to the same height to fit the largest content. I want them to fit to the content of each panel. The only thing I've read said to set the height of the content panel to 100% in the CSS, but it didn't change anything.
Thanks!
Andrea
http://www.andreamutsch.comYou make it look so simple but it doesn't seem to be working for me...
My first thought with getting rid of the tab content was to simply delete it, but when I do that I get a warning that 'The structure of the accordian appears to be damaged'. Then when I preview none of the tabs will open.
This is what my accordian structure looks like with the tab content code deleted...
<div id="Accordion1" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">home</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">graphic design</div>
<div class="AccordionPanelContent">
<p align="center">identity </p>
<p align="center">print </p>
<p align="center">packaging</p>
<p align="center">web </p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">photography</div>
<div class="AccordionPanelContent">
<p>traditional</p>
<p>digital</p>
<p>retouch</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">contact</div>
<div class="AccordionPanelContent">
<p>email me</p>
<p>design quote</p>
<p>purchase photography</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">resume</div>
<div class="AccordionPanelContent">download resume (.pdf)</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">design blog</div>
<div class="AccordionPanelContent">2009</div>
</div>
Also, getting rid of the height in the CSS had no effect (I did this before I did the above)
Below is my current CSS for the Panel Content
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: large;
background-color: #633408;
font-weight: normal;
word-spacing: normal;
text-align: center;
Also there is a note in the CSS that says this...
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
I'm not sure how accurate that is since I don't have a height in there and it worked (although not how I wanted) but I just thought I would throw it in. -
i just loaded the 'lion' now my mail takes a new life....how do i move the reading panel to the bottom / also how do i get rid of the text/content under each mail..two simple things not sure obvious on this version !!!
-
After editing a photo in another program, the photos return to the library at the end of the grid panel instead of at their original loacation. How do I avoid this or alternatively, is there a quick way of moving them back to their original position instead of clicking and dragging them?
Sort your photos by File Name or Capture Date
Use View->Sort -
How can I display a multiple grid panels into columns of grid panel
I have a GridPanel "grid". It is set to four columns.
And I have Gridpanel elementGrid in which I have components such us button ,OutputText ,.. .And I load the gridPanels elementGrid into "grid" using this.
List<UIComponent> childComponents=new ArrayList<UIComponent>();
for (int i=0;i<count;i++) {
HtmlPanelGrid elementGrid = new HtmlPanelGrid();
HtmlCommandButton button = new HtmlCommandButton();
HtmlOutputText txt=new HtmlOutputText();
elementGrid.getChildren().addAll(this.childComponents);
grid.getChildren().add(elementGrid);
}The contents of "grid" is dislay in only one column.
But I want that each elementGrid is displayed in a cell .So I want to have multiple columns.
How can I do please.
Thanks in advance.I have a GridPanel "grid". It is set to four columns.
And I have Gridpanel elementGrid in which I have components such us button ,OutputText ,.. .And I load the gridPanels elementGrid into "grid" using this.
List<UIComponent> childComponents=new ArrayList<UIComponent>();
for (int i=0;i<count;i++) {
HtmlPanelGrid elementGrid = new HtmlPanelGrid();
HtmlCommandButton button = new HtmlCommandButton();
HtmlOutputText txt=new HtmlOutputText();
elementGrid.getChildren().addAll(this.childComponents);
grid.getChildren().add(elementGrid);
}The contents of "grid" is dislay in only one column.
But I want that each elementGrid is displayed in a cell .So I want to have multiple columns.
How can I do please.
Thanks in advance. -
How to specify column span for a row in grid panel
In a grid panel with 4 columns, how to set one of the rows to span all 4 columns?
I don't think it's possible with the standard JSF component. There are no hooks to get it to emit a rowspan attribute on the <td> it will render for each cell. There is a hook to get it to add a styleclass, but that won't help with colspans and rowspans.
-- Tor
http://blogs.sun.com/tor -
How to left aligned fields label of panel form
hi am in jdeveloper 11.1.1.6.0, how can i left aligned fields label of panel form
this is my form,where must i put this af|panelFormLayout::label-cell {text-align: left;}
<af:panelFormLayout id="pfl6">
<af:inputText value="#{bindings.Username.inputValue}"
label=" Username"
required="#{bindings.Username.hints.mandatory}"
columns="#{bindings.Username.hints.displayWidth}"
maximumLength="#{bindings.Username.hints.precision}"
shortDesc="#{bindings.Username.hints.tooltip}" id="it26">
<f:validator binding="#{bindings.Username.validator}"/>
</af:inputText>
<af:inputText value="#{bindings.Firstname.inputValue}"
label=" Firstname"
required="#{bindings.Firstname.hints.mandatory}"
columns="#{bindings.Firstname.hints.displayWidth}"
maximumLength="#{bindings.Firstname.hints.precision}"
shortDesc="#{bindings.Firstname.hints.tooltip}" id="it21">
<f:validator binding="#{bindings.Firstname.validator}"/>
</af:inputText>
<af:inputText value="#{bindings.Surname.inputValue}"
label=" Surname"
required="#{bindings.Surname.hints.mandatory}"
columns="#{bindings.Surname.hints.displayWidth}"
maximumLength="#{bindings.Surname.hints.precision}"
shortDesc="#{bindings.Surname.hints.tooltip}" id="it28">
<f:validator binding="#{bindings.Surname.validator}"/>
</af:inputText>
<af:inputText value="#{bindings.Initials.inputValue}"
label=" Initials"
required="#{bindings.Initials.hints.mandatory}"
columns="#{bindings.Initials.hints.displayWidth}"
maximumLength="#{bindings.Initials.hints.precision}"
shortDesc="#{bindings.Initials.hints.tooltip}" id="it20">
<f:validator binding="#{bindings.Initials.validator}"/>
</af:inputText>
<af:selectOneChoice value="#{bindings.Titlecode.inputValue}"
label=" Title"
required="#{bindings.Titlecode.hints.mandatory}"
shortDesc="#{bindings.Titlecode.hints.tooltip}"
id="soc6">
<f:selectItems value="#{bindings.Titlecode.items}" id="si12"/>
</af:selectOneChoice>
<af:selectOneRadio value="#{bindings.Gender1.inputValue}"
label=" Gender"
required="#{bindings.Gender1.hints.mandatory}"
shortDesc="#{bindings.Gender1.hints.tooltip}" id="sor6">
<f:selectItems value="#{bindings.Gender1.items}" id="si17"/>
</af:selectOneRadio>
<af:inputText value="#{bindings.Identitynumber.inputValue}"
label=" Identitynumber"
required="#{bindings.Identitynumber.hints.mandatory}"
columns="#{bindings.Identitynumber.hints.displayWidth}"
maximumLength="#{bindings.Identitynumber.hints.precision}"
shortDesc="#{bindings.Identitynumber.hints.tooltip}"
id="it25">
<f:validator binding="#{bindings.Identitynumber.validator}"/>
</af:inputText>
<af:inputDate value="#{bindings.Dateofbirth.inputValue}"
label=" Dateofbirth"
required="#{bindings.Dateofbirth.hints.mandatory}"
shortDesc="#{bindings.Dateofbirth.hints.tooltip}" id="id3">
<f:validator binding="#{bindings.Dateofbirth.validator}"/>
<af:convertDateTime pattern="#{bindings.Dateofbirth.format}"/>
</af:inputDate>
<af:selectOneRadio value="#{bindings.Statuscode.inputValue}"
label="#{bindings.Statuscode.label}"
required="#{bindings.Statuscode.hints.mandatory}"
shortDesc="#{bindings.Statuscode.hints.tooltip}"
id="sor5">
<f:selectItems value="#{bindings.Statuscode.items}" id="si7"/>
</af:selectOneRadio>
<af:inputText value="#{bindings.Emailaddress.inputValue}"
label="#{bindings.Emailaddress.hints.label}"
required="#{bindings.Emailaddress.hints.mandatory}"
columns="#{bindings.Emailaddress.hints.displayWidth}"
maximumLength="#{bindings.Emailaddress.hints.precision}"
shortDesc="#{bindings.Emailaddress.hints.tooltip}" id="it22">
<f:validator binding="#{bindings.Emailaddress.validator}"/>
</af:inputText>
<af:inputText value="#{bindings.Termsandconditions.inputValue}"
label="#{bindings.Termsandconditions.hints.label}"
required="#{bindings.Termsandconditions.hints.mandatory}"
columns="#{bindings.Termsandconditions.hints.displayWidth}"
maximumLength="#{bindings.Termsandconditions.hints.precision}"
shortDesc="#{bindings.Termsandconditions.hints.tooltip}"
id="it24">
<f:validator binding="#{bindings.Termsandconditions.validator}"/>
</af:inputText>
<af:selectOneChoice value="#{bindings.Branch.inputValue}"
label="#{bindings.Branch.label}"
required="#{bindings.Branch.hints.mandatory}"
shortDesc="#{bindings.Branch.hints.tooltip}" id="soc5">
<f:selectItems value="#{bindings.Branch.items}" id="si11"/>
</af:selectOneChoice>
<af:inputComboboxListOfValues id="office1Id"
popupTitle="Search and Select: #{bindings.Office1.hints.label}"
value="#{bindings.Office1.inputValue}"
label="#{bindings.Office1.hints.label}"
model="#{bindings.Office1.listOfValuesModel}"
required="#{bindings.Office1.hints.mandatory}"
columns="#{bindings.Office1.hints.displayWidth}"
shortDesc="#{bindings.Office1.hints.tooltip}">
<f:validator binding="#{bindings.Office1.validator}"/>
</af:inputComboboxListOfValues>
<af:inputText value="#{bindings.Ausername.inputValue}"
label="#{bindings.Ausername.hints.label}"
required="#{bindings.Ausername.hints.mandatory}"
columns="#{bindings.Ausername.hints.displayWidth}"
maximumLength="#{bindings.Ausername.hints.precision}"
shortDesc="#{bindings.Ausername.hints.tooltip}" id="it23">
<f:validator binding="#{bindings.Ausername.validator}"/>
</af:inputText>
<af:inputText value="#{bindings.PractitionerNumber.inputValue}"
label="#{bindings.PractitionerNumber.hints.label}"
required="#{bindings.PractitionerNumber.hints.mandatory}"
columns="#{bindings.PractitionerNumber.hints.displayWidth}"
maximumLength="#{bindings.PractitionerNumber.hints.precision}"
shortDesc="#{bindings.PractitionerNumber.hints.tooltip}"
id="it27">
<f:validator binding="#{bindings.PractitionerNumber.validator}"/>
</af:inputText>
</af:panelFormLayout> -
How do I move back to the grid panel
There must be a key command to move between the grid panel or the filmstrip and the keywording panel, isn't there? I don't want to use my mouse. I just want to select the photo (if I'm in the grid panel I just move right arrow or left) and then go to the keywording panel (Command K) and then GET BACK TO THE GRID PANEL SO I CAN SELECT THE NEXT PHOTO. I've looked at a lot of articles and lists of key commands for Lightroom 4 and can't seem to find the answer.
In case this helps, pammmm, the Esc key is used in many programs to back out of ("escape" from) a lot of places. For example, if you're in a dialog box, pressing Esc is usually the same as clicking the Cancel button. You'll find the Esc key used in this way in all kinds of programs, from Photoshop to Microsoft Word.
It is possible that the reason Esc isn't documented is because it isn't documented in a lot of other programs either. It's probably just assumed as a "power user" shortcut, the same way a lot of people know that they can press Enter instead of clicking OK. -
Line weight changes when using Align to Pixel grid
When I select Align to Pixel Grid in the Transform Panel, I see line weight changes occur. I try to change the line weight in the either the Stroke or Appearance panel and it will not change, no layers locked, any ideas how to change the line weight?
Chouettecacahuete wrote:
... I noticed that the line increases from 0.5pt to 1pt mainly (although not always) on straight lines, anything with a bezier curve seems to remain as 0.5pt.
Just try this, with snap to pixel grid on, create 10 pixel long straight horizontal 1pt line with the pen or line tool. You won't be able to change the stroke weight to other than whole numbers. But if you rotate the line with only 0.01 degrees by typing this for rotation in the Transform panel, then you can change the stroke weight to 1.25 for example. When creating artworks for for screen display always verify the result with View > Pixel Preview turned on.
tonyharmer wrote:
...I only referred to Photoshop to illustrate the behaviour - vector tools aside, everything you do in Photoshop has to be whole pixels
As I said, Photoshop doesn't have snap to pixel grid feature like Illustrator. You can easily create fuzzy lines in Photoshop if you are not drawing them precisely in the middle of the pixels. To check what I'm talking about try this In Photoshop, create a new document with a very small pixel dimensions like 20 x 20 pixels and zoom to the maximum 3200% to see clearly the result. Fill the image with light gray color so you can see the pixels when View > Show Pixel grid is on. Then with black color try drawing a straight line with any tool that creates pixels like a hard brush or the line tool used in pixel mode, and try using constraints like holding Shift while dragging. You will see that unless you draw the lines exactly in the middle of the pixels it will be fuzzy and not clean. The only way to ensure not fuzzy lines in Photoshop is to turn off the anti-aliasing. You do this by unchecking the anti-alias for tools that have this option and instead of burshes use the pencil tool (which is brush without anti-aliasing). And Illustrator works the same too if you turn off Anti-aliased Artwork in its general section of the preferences and view the result with View > Pixel Preview, you don't need to have the Align to Pixel Grid on, the aliased result will be the same like in Photoshop. -
Fixing warped smaller text due to 'Align to Pixel Grid'
Hi
Hoping someone can help.
For my fabric design business I usually create a 16.5x16.5cm artboard add a 16.5x16.5 cm rectangle and then add my text, making a repeatable pattern, before selecting it all and copying it onto a 33x33cm for print. However lately I haven't been able to get my rectangle to stay at 16.5cm, it kept changing to 16.51x16.51cm so I did a bit of research and started unselecting 'Align to Pixel Grid' when I created a new document. However once I selected my whole design before copying it to the larger artboard, it would always be at 16.5001x16.4747 or something like that so I would have to check,uncheck the 'Align to Pixel Grid' box in the Transform panel before I could finally get it to all stay at 16.5x16.5cm otherwise my designs were coming out with gaps between them.
Now all of my smaller writing is printed out warped, which again after researching it seems to have something to do with the the pixel grid. Can someone please tell me how to fix this. And why all of a sudden I'm having these problems! I've been using this method for months and have never had a problem.
ThanksCarla,
I am afraid you will have to start over, more or less.
It may be possible to rescue parts if you have saved earlier versions with undistorted parts of artwork.
And it may be possible to correct simpler (parts of) artwork by moving Anchor Points with the Direct SelectionTool or something, based on the difference between desired and present dimensions. -
How do I make the "Find Panel" (Ctrl-F) more ME friendly?
After quickly resolving and only recently glitch in an older Firefox version (17.0.1) concerning stubborn restore of last sessions upon start up, using now version 27.0.1, I am now frustrated with the Find Panel (using Ctrl-F). How do I revert the Find Panel to older (not to mention MORE PRACTICAL!) version? If a visualization is actually necessary, I found a link that may be helpful: http://s11.postimg.org/qsc5piwr7/ff_find.png .
Focusing ONLY on the Find Panel, the version I am looking for is on
the top, while the newer (not to mention INFERIOR!) version can be
found on the bottom.
If I have to get another version, please let it also be able to use the Norton Toolbar, but I would much rather be given the instructions on how to simply edit the version I have now (27.0.1) so as to change only the Find Panel as I described above.
If you noticed, I'm getting super frustrated and also very picky, but as things Mozilla, Google, etc. go on, making what I suppose they call "progress," they all start to diminish in their functions. I'm not looking for a special looking internet browser, but one that works, user friendly, ME friendly. If Firefox has a few bugs to work out, work `em out, but for heaven's sake, stop altering the orientation of tools in the browser, rendering it far less practical than its wiser ancestral versions. I digress though . . .
I'm using Firefox 27.0.1, extremely loathe the Find Panel (Ctrl-F), how can I switch to an older and
better Find Panel (while at the same time also maintianing compatibility for Norton Toolbar)?
http://s11.postimg.org/qsc5piwr7/ff_find.pngTry the following style in Stylish. It's a fair approximation of the previous appearance.
* https://addons.mozilla.org/firefox/addon/stylish/
Once Stylish is installed, open the Add-ons Manager (Ctrl+Shift+A), User Styles category. Click the Write New Style button at the top and paste the following in it. Give the style a name and click the Save button.
<pre><nowiki>@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.findbar-closebutton {
-moz-box-ordinal-group: 0 !important;
margin-left: 0px !important;
margin-right: 7px !important;
.findbar-textbox {
-moz-box-ordinal-group: 0 !important;
.findbar-find-next {
-moz-box-ordinal-group: 0 !important;
border-left-width: 0px !important;
border-radius: 0px !important;
.findbar-find-next label:after {
content: "Next" !important;
margin-left: 4px !important;
.findbar-find-previous {
border-right-color: rgb(160, 160, 160) !important;
border-right-style: solid !important;
border-right-width: 0.8px !important;
border-radius: 0px 2px 2px 0px !important;
.findbar-find-previous label:after {
content: "Previous" !important;
margin-left: 4px !important;
.findbar-container > spacer {
display: none !important;
}</nowiki></pre>
The Alt+N and Alt+P keyboard shortcuts no longer work for finding the next and previous occurrence, respectively. You can use F3 or Ctrl+G and Shift+F3 or Ctrl+Shift+G, respectively.
If you want the find bar to remain open when switching tabs, you can use the FindBar Tweak add-on.
* https://addons.mozilla.org/firefox/addon/findbar-tweak/
If you want to submit feedback or suggestions, open the Help menu — either from the orange Firefox button or the menu bar — and choose Submit Feedback. This is a support forum and your comment may not get noticed here. -
Display a buttons in the footer of a grid panel
I display images in a grid panel .I want to know how to add components in the footer part of the panel.
Because when I add them simply by using
grid.getChildren().add(component);they are added just after the last displayed image.
I thought to the VerbatimTag element by adding the
tag but I didn't found which method to use to add the
tag into the VerbatimTag.
Thanks in advance for your help.Can you please explain to me because I m really knew with JSF.
-
How to align text in drawstring method
hai,
i'm using drawString method in my application. i'm using it to draw certain data in a editorpane. in that i have to align the text content but i don't know how to align the text in it such as right alignment,left alignment and center alignment...JEditorPanes render text on their own, there shouldn't be any reason to call Graphics.drawString() on your own, unless perhaps you are creating custom Views.
In any case, we cannot help you unless you post an SSCCE . -
How to align object in the report layout
Hello,
I find it very difficult to aligin objects in the report editor or in the template editor. I know there are some alignment options, like aligning to the grid or aligning a group of objects, but they seem to work on the bounding rectangle for the object. For my text objects, those rectangles are arbitrarily sized. So aligning those rectangles does not correctly align the text baseline, for example.
Does anyone have a tip on how you can align objects? I there maybe a way to alter the size of objects by changing a number in a property sheet somewhere?
Regards,
FransThe problems I am having now occur when I am editing the margin in the template editor. For some reason, the flex and confine options can not be turned off in the template editor. I believe they are turned on in this mode, at least in tools:options: paper layout they are turned on. But anyway, this really does not matter because I don't have nested objects in the margin. The objects that will go flying off are completely unrelated to the object I want to move or resize.
Update: I have just tried editing the layout of a report that was based on the template I am working on. Turning flex off there had a positive effect. It seems indeed the 'flex' setting is to blame for the problems I am experiencing. Thanks for the tip!
So now I would really like to know how to turn of flex in the template editor.. -
Using Numbers, I set up a spreadsheet grid but it disappears as soon as I click anywhere. How can I keep the grid?
I have: iMac with OS 10.10.3; Numbers 08 ver 1.0.3Hi Bernard,
This may help. Numbers tables can have Grid Lines (Format Panel > Table > Grid Lines)...
... and Cell Borders (to change all cells, select the whole table by clicking on the "bullseye" top left) then Format Panel > Cell > Border > select a Border Pattern and Style
1 pt Borders (my preferred default):
They don't disappear when I click away. Also, the borders show up well when I post a screen shot to this forum .
Regards,
Ian.
Maybe you are looking for
-
Hi guys, I have in my application a subvi which i use to save the configuration of application. I create one file with the last saved configuration, and i would like to open this values and that i could to modify this indicator value, but i cant sinc
-
How to transfer video from iPhone to ipad
How do you transfer video from iPhone to ipad
-
How to create customer in crm sales with crm 7.0
hi, can anyone tell me how to create a customer? i am new to crm. I am learning crm sales Thanking you prasad
-
Using FaceTime in a Customer Service Center
My company has an idea to utilize Face Time in our customer service center utilizing the iPad 2. Is it possible to have a single number/id dedicated to Face Time that allows for mulitple conversations at one time? If so, how can this be set up?
-
Rfx Custom Tab(Table) Value not mapping in Change Doc BADI
Hi, I am currently adding Custom Tab with Table in SRM Rfx Webdynpro Screen SRM PPS 7.01 Extended classic . I did the configuration steps to add the custom table, visibility setups, created a new Webdynpro, enhanced in Component controller and could