I am developing a Web page on struts2 If I am correct theme in Struts2 is set such that all the tags will eventually be inside a table so all tags will be aligned one below other.
In My web page i have login page with Submit and Reset button I want both side by side (next each other) rather than in separate line.I Tried googling i got some answer like { display : inline; } in CSS and also { position : float} and theme="simple" in form. Nothing worked
<table><tr><td><s:submit method="CheckUser" value="Login" align="center" /></td><td><s:reset value="Clear" align="center" /></td></tr>
In case if i set i get the 2 buttons(submit+reset) as required
but though label="User Id" is given i get only text field without label
<tr><td><s:textfield name="userid" label="User Id" size="25" /></td></tr>
<tr><td><s:password name="password" label="Password" size="25" /></td></tr>
Please do suggest me where I am going wrong and how to get both label to text field and also submit_Reset button side by side
Just leave default Struts2 theme, which is xhtml by the way, as it is and change only your <s:submit> and <s:reset> tags adding to them theme attribute with value simple.
<s:form>
...
<tr>
<td colspan="2">
<s:submit value="Login" theme="simple"/>
<s:reset value="Clear" theme="simple"/>
</td>
</tr>
</s:form>
In struts.xml set the theme to simple
<struts>
...
<constant name="struts.ui.theme" value="simple" />
...
<struts>
Now things will work as you expect.
The theme can also be scoped in other ways if you don't want the simple to to be default (page and per tag are common) see here: http://struts.apache.org/2.3.8/docs/selecting-themes.html
Related
I am developing a django/html application where I have a table of data. I have to make a way for my users to delete multiple rows in a table. Therefore, I have decided to add checkboxes in a list.
I know that I can include it as
<tr>
<td><input type="radio" name="item1" /></td>
<td>Item1</td>
</tr>
<tr>
<td><input type="radio" name="item2" /></td>
<td>Item2</td>
</tr>
for each item. Then in the end, I can add:
<input type="submit" name="delete" value="Delete Items" />
But this will mean that I will have to enclose my list within a <form></form>
Is this an ethical way of doing it?
I want to add this feature to my site but I also want to do it in the most professional way. Can anyone tell me if I am going in the right direction?
Since you use Django, one way would be to take advantage of what Django provides for forms.
Here are the examples from the official doc, for version 1.10:
-for the radio buttons:
https://docs.djangoproject.com/en/1.10/ref/forms/widgets/#widgets-inheriting-from-the-select-widget
-for the form:
https://docs.djangoproject.com/en/1.10/topics/forms/#building-a-form-in-django
A django form uses the form tag.
Among most primefaces component on my screen, I happen to have used an h:inputHidden on my xhtml page as I needed a hidden field to store/update a bean field value.
<h:inputHidden id="calendarValueHidden" value="#{myCdiBean.calValue}"/>
Even though it is not visible, but I don't know why it is taking space on the screen which has disturbed other components of the page. Even display:none !important is not working on the input hidden component.
The problem symptoms indicate a common starter's mistake: declaring it as an immediate child of a <h:panelGrid>. Like so:
<h:panelGrid columns="1">
<h:inputText ... />
<h:inputText ... />
<h:inputHidden ... />
<h:inputText ... />
</h:panelGrid>
The <h:panelGrid> generates a HTML <table> and, as documented, it will put every direct child in its own table cell <td>. The generated HTML output looks like this:
<table>
<tbody>
<tr><td><input type="text" /></td></tr>
<tr><td><input type="text" /></td></tr>
<tr><td><input type="hidden" /></td></tr>
<tr><td><input type="text" /></td></tr>
</tbody>
</table>
A <td> has by default some margin and padding which totally explains your problem. You should have noticed it when inspecting the HTML output and CSS styles in browser's builtin developer toolset (press F12 or rightclick, Inspect Element).
You basically want to group the <h:inputHidden> along with the desired <h:inputText> inside the same table cell. You can use <h:panelGroup> for that.
<h:panelGrid columns="1">
<h:inputText ... />
<h:panelGroup>
<h:inputText ... />
<h:inputHidden ... />
</h:panelGroup>
<h:inputText ... />
</h:panelGrid>
This will end up in the generated HTML output as below, exactly as you intented:
<table>
<tbody>
<tr><td><input type="text" /></td></tr>
<tr><td><input type="text" /><input type="hidden" /></td></tr>
<tr><td><input type="text" /></td></tr>
</tbody>
</table>
Unrelated to the concrete problem, using tables for layout and positioning is bad. Use divs and CSS.
The problem is, I placed the hidden field inside the panel grid, just after the component, the value of which it holds. I took it out of the panel grid and placed it in the end just before the end of the form tag. Problem solved.
Looks like a panel grid does not take a hidden field for actually a literally non-present component. It is still counted by a panel grid because it is still in dom. For an element to be an uncountable element in panel grid, it has to be unrendered (rendered="false"). But then it also becomes totally inaccessible and its value wont be available as it is no more in dom.
how can I place an iFrame around this form? On submit my button directs to a success page and I need it all to stay in one screen, hence incorporating an iframe. How can I achieve this? I've never used them before and adding <iframe> </iframe> tags around the form just makes it disappear.
Here's my form:
<form action="#link">
<input type="text" name="name" required placeholder="Enter your name"/>
<input type="email" name="email" required placeholder="Enter a valid e-mail address"/>
<input type="text" name="comment" required placeholder="Enter your comment"/>
<input type="submit" value="submit" />
</form>
If you place the form code, including the code to redirect to your success page in a separate document - usually PHP, then add the iFrame of that document where you want it.
An iframe is a tag that allows you to include a page inside another page. So, you have to link to another file, and you cannot put other tags inside it, as you tried.
To achieve what you need, you have to create a file, lets call it your_other_file.php, where you have the code of the form, and the code of the sucess page.
in your main page, you put something like this
<iframe width="800" height="600" src="your_other_file.php"></iframe>
depending of your purpose, you could prefer to send the form by ajax and update de div. but if you have no much experience, this approach is good enough.
I have this radio button in html
<input type="radio" name="group1" value="1"> Gray Scale<br>
</td>
</tr>
<tr><td align="left" valign="top" width="200">
<input type="radio" name="group1" value="2"> Old Style<br>
</td><td align="left" valign="top" width="200">
<input type="radio" name="group1" value="3"> Sharpening<br></td></tr>
but I using this Struts code will give me all over the place with no size and anything <s:radio name="option" list="#{'1':'Gray Scale', '2':'Old Style','3':'Sharpening'}" value="1" />
How can I have this radio button for struts 2s individually?
If you want to <s:radio> tag to render exactly as you want, you have to modify the Struts2 theme that you are using.
Here you have an example from a guy that solves a similar problem: Struts 2 How To Customize The Theme That Controls How A Struts 2 Tag Is Displayed In The Browser
Just to make it more clear what already have been described in good way by Pigueiras,Struts2 uses theme concept to render the HTML for the Struts2 based tags and internally it uses freemarker tempelates to generate HTML for you.
out of the box S2 comes with following three themes
xhtml
css_xhtml theme
simple
ajax (with deprecated DOJO tags)
By default S2 uses xhtml theme to render the HTML and under this theme it will generate certain tables to render the view.
it provides a way to customize the theme or you can define your own theme and can control the way HTML is being generated by the S2.
have a look at following doc for more details
struts-2-themes
themes-and-templates
creating_a_theme
For a standard "add item" form page it is desirable to have two submit buttons: an "OK" button and a "cancel" button, where the former POSTs the form to one URL, and the latter GETs some other URL.
This obviously means that two separate FORMs are needed, and, if laid out with tables, the markup would go as follows:
<form action="add.html" method="post">
<table>
<tr>
<td>Enter data:</td><td><input type="text" name="data"/></td>
</tr>
</table>
<input type="submit" value="OK"/>
</form>
<form action="index.html" method="get">
<input type="submit" value="Cancel"/>
</form>
However, this would result in the two buttons being placed below each other. It would be desirable to have them placed side by side. The following works:
<form action="add.html" method="post">
<table>
<tr>
<td>Enter data:</td><td><input type="text" name="data"/></td>
</tr>
<tr>
<td><input type="submit" value="OK"/></td>
</form>
<form action="index.html" method="get">
<td><input type="submit" value="Cancel"/></td>
</tr>
</table>
</form>
But although I've seen it used on commercial websites, I guess it's not quite legal HTML.
So thus:
1) Since the second methods works, are there any good reasons for not using it?
2) Are there any better solutions?
EDIT: This was a silly question. The second method is unnecessary. Solution: add to the first method a CSS rule of:
form
{
display: inline;
}
You broke my mind.
There are many and varied problems with what you have here, but I'll start by pointing out that Cancel/Reset are not considered good things generally.
I'll follow that by pointing out that you could use CSS to style the buttons side by side in your first example, and follow that by pointing out that a simple type="button" could have any arbitrary script attached to it to do your cancel navigation, and follow that by the fact a simple anchor tag would be even more straightforward.
And I'm not going to mention the table, because that'll just start some trouble.
Don't use a second form. Wrap both buttons in the same form, and do something like this with the cancel button:
<input type="button" text="Cancel"
onclick="document.location.href='index.html';return false;" />
1) When you create a page using "legal HTML," you can have an expectation that what works in today's browsers will work in tomorrow's browsers, or in some other user agents that you might not have checked the site in. But in the example you've given, the degree to which different browsers agree on how to "fix" the HTML for display is much less certain. It adds a level of predictability to the how the page will display when "valid HTML" is used. Plus, who knows how a user agent such as a screenreader would describe the code in question.
2) Is using a regular anchor tag an option?
<td><input type="submit" value="OK"/></td>
<td> or Cancel</td>
Or you could use CSS to move a second form and its submit button up into the first form, but the specifics of this might be tricky.
Add a row to your table
<tr>
<td><input type="button" value="Cancel" onClick="window.location='./index.html'"/></td>
<td><input type="submit" value="OK" name="submit"/></td>
<tr>