A very simple question. I do not know Apache Tiles.
For a Spring Roo generated web app the views are created using Apache Tiles. The classic layout with the menu on the left is created.
I want to have the menu (menu.jspx) appear on the right hand side of the page instead of the classic left hand side. How do I do this?
I have read the Apache Tiles tutorial on the main web site, however the description there uses jsp and html.
You have the alt theme in Spring Roo default generated User Interface.
It has the menu to the right. Go ahead and customize.
I figured it out.
I had to edit the standard.css file menu items.
I got to thinking that all of the jspx elements are controlled by the css files. Sounds like a no brainer no but I am use to using html tables to do all of the ui work, not css.
So, I found a place http://csscreator.com/node/461 that had some sample code and I modified it for the standard.css menu elements and below is what I pasted in. Its not perfect but it is a place to begin.
#menu {
background-image: none;
position: absolute;
right:0px;
width: 525px;
top: 80px;
height: 15px;
display: inline;
}
#menu ul{
padding: 3px 5px;
border-left: 1px solid #cccccc;
list-style: none;
display: inline;
}
Your best option for moving around the menu is to modify the css as you have described above. However you also have the option of changing where the menu appears in the html source by modifying the page layout file. This can be found under WEB-INF/layouts/default.jspx.
You could then choose to use a table based html layout if that was your preferred option.
I hope this helps
Your other option is to select the "alt" option on the page which will auto-change to the layout you want.
If you then make that the default layout instead
Related
https://www.insure.report/en
I need to fix the Updates widget to have a top margin so it isn't covered by the header OR I need the widget to load on top of the header, not behind it.
Then I need to hide the 'Submit an idea' link.
I'm still new to CSS and the Submit link uses several classes so I don't know which to set to display none.
Any help or guidance is appreciated.
Without seeing your html and css it's hard to be absolutely positive but I gave the id frill in dev tools a property and value margin-top: 20px and that seems to solve your first question in dev tools. Since you are using bootstrap, in your custom CSS stylesheet you'll probably want to add:
#frill {
margin-top: 20px!important;
}
For the submit link you could give that link a class, like class="hide-link" in your html and then give that class a CSS rule of display: none; like:
.hide-link {
display: none!important;
}
I configured it according to https://help.frill.co/article/75-adding-the-widget
It's not really the right answer because what I was seeking was not done. But I removed the top elements instead.
I have my website here and I discovered a small issue regarding its CSS.
If you hover "Existing Account Client", in Payment method section (at the bottom), it's cutting the left side of the description.
You need to input some fake info and click on "See Price" then select any vehicle.
Existing Account Client
How do I fix it?
You can add 'position: relative;' into this section:
#payment_selectors label, #payment_selectors label a{
position: relative;
}
It will display whole tool tip. However I spot another problem - this tool tip window is flashing. You can try shift position of tool tip by adding left: 20px; or padding-left: 20px; or something similar.
As well please change: to fix flashing issue.
.custom-tooltip {
background: none !important;
top: -80px!important;
}
I copied the Primeface showcase for filters located here to my Local JBoss install:
http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml
But my selectCheckboxMenu for colors ends up looking like this
I'm using Primefaces 5.0.
How can I get it to look like the demo on PF Showcase site?
EDIT
Changed to PF 5.1.RC1 but still no luck
Also tried increasing the width used by the demo for the p:selectCheckboxMenu but with this result
The problem was having the following entry in my custom CSS file which conflicted with the Primefaces.css
label {
float: left;
text-align: left;
margin-right: 0.5em;
display: block
}
Can anyone tell me why in the world Initializr's bootstrap html template has a single style for body in a element in the head of the page? It's right after the bootstrap.css file.
body {
padding-top: 50px;
padding-bottom: 20px;
}
My question is: isn't it a little odd to throw a one-off style directly in the markup and not just include it in the bootstrap.css file? Is there some specific reason anyone knows of as to why it was done this way? CSS belongs in CSS files, no?
Taking a quick look I would assume because it relates to that page specifically.
What if on another page you didn't want the navigation bar? You then have to override the style implemented in the .css file manually to correct the padding. Seeing as it's only one statement, I'd say it's fair to include it at the top of the page rather than putting it in it's own .css file.
Would you really want to obscure a framework .CSS file by including potentially page-specific code (that would muddy the framework)?
Edit: To elaborate - if you have a rigorous structure across dozens of pages, each with consistent style, it would only make sense to centralise this content into a .css file, however from an industry perspective I would more-than-likely still not put it into a framework .css file (think about future implementations, upgrading the framework, versioning etc etc).
I saw this and just about eliminated my Initializr foundation because:
A) The Initializr index.html rendered differently from the same page on getbootstrap.com and I could not figure out why
B) It was not at all obvious why this style was inline inside the <head> section since there was no comment.
Thankfully I did not delete the Initializr files. It turns out getbootstrap.com includes these same styles (but via a very small stylesheet named theme.css). The values are a bit different than the ones you mentioned, but same idea.
The theme I was referencing included this theme.css:
body {
padding-top: 70px;
padding-bottom: 30px;
}
.theme-dropdown .dropdown-menu {
position: static;
display: block;
margin-bottom: 20px;
}
.theme-showcase > p > .btn {
margin: 5px 0;
}
.theme-showcase .navbar .container {
width: auto;
}
So, long story short- Initializr did the right thing here by removing the extra include in my opinion... HOWEVER, a <!-- Comment --> explaining what those styles are should be there. There are comments on most sections, yet none for this snippet.
Anyways, I am keeping my beautiful Initializr Bootstrap code base, and figuring out what pages need what values of what snippets lol.
I've been stuck on this for 3 days now.
I have two pages that basically share some code for a search feature on my website, here's my code
The CSS
#btnSearch {
display: block;
color: #ffffff;
width: 100px;
height: 27px;
border: 0;
padding: 0;
background: transparent url("Images/btnSearch2.png");
}
When I'd gotten the one page working, I copied that code to the page where it doesn't work, but it hasn't made any difference, here's the HTML (don't worry about the inline css, that's just for convenience while I'm working on it...)
EDIT1:
All other classes work correctly as they (along with the css above) come from a stylesheet at <webroot>/App_Themes/Default... The images go in a subdirectory of this location.
I don't see why this code works on 1 page and not the other when all the other CSS classes work on both pages...
Have you tried the absolute image path and see if it works that way?
Maybe it´s a Browser problem: Try to open the file that doesn´t work in another browser.
Maybe you have a tag named the same way #btnSearch in the pages where the styles don´t apply.
Is the path to the background image correct for the page where the code doesn't work? Or even the path to the CSS file?