I have a radio choice form which is generated with the RadioChoice component in wicket. Here <span/> covers all of the possible choices in the form. I want the span to go downwards. One option per row on screen, but I am currently stuck with the problem that if i try to style choice it get styled as one. For example, if i try to take border: 1px solid red; it creates only one border, and not one for each choice.
<form class="mapSelector" wicket:id="radioForm">
<span class="choice" wicket:id="radio"></span>
</form>
I am not sure I understand what you mean with I want the span to go downwards. One option per row on screen but it sounds like you need a <div> instead of <span>, i.e. an element with display:block.
I am not sure how CSS border is related to downwards and row.
I'd suggest you to see what is the generated HTML because this Wicket Component may generate <label> too for each radio element.
Related
I have an HTML that includes 2 paragraphs:
<p style="text-align: center">centered text example</p>
<p style="text-align: right">alignment right text example</p>
I added it in my android TextView using Html.fromHtml
As a result in my view first paragraph aligned center(as expected), but second paragraph doesn't aligned rigth and aligned to left.
How is it correct to set html alignment properties to make work it in android?
That is because for some reason Html.fromHtml supports start, center and end as text-align values. It does not match CSS, but that's how it works.
Proof
change
"text-align: right"
to
"text-align: end"
in your inline css
Try using
"text-align: end"
instead of
"text-align: right"
For example, the active element is the input element. But I need to be able to switch to the span element in order to click the checkbox. I can't use xpath or css selectors because this is part of a dynamic table where the element path changes every time. I have tried using Actions and moving to the element before clicking it but it doesn't work. The only other way I can think of is to create a hashmap and store the key associated with the checkbox with the checkbox value (on/off) but this seems to be a lot for something quite trivial.
<div class="checkbox">
<label>
<input class="ace" data-element-name="compulsory" type="checkbox">
<span class="lbl"></span>
</label>
</div>
I'm having a paragraph system (parsys) in my page, and inside that I'm dragging one component; that component has two paragraph systems inside it. So now I will be dragging a rich text component in both of the two paragraph systems which are present in the component. However, after dragging the rich-text components in the two paragraph systems, I'm not able to edit the those two rich text components, as they got overlapped. Can you tell me whether we can have a parsys inside a parsys and will that support content authoring.
Yes it is possible to have a parsys inside a parsys. The overlapping problem would be a CSS issue, and can be solved most of the time by adding the following div at the end of your component code.
<div style="clear:both"></div>
Also, to prevent adding additional div styles to your page, this should be done only in author mode:
<% if (WCMMode.fromRequest(request) == WCMMode.EDIT) { %>
<div style="clear:both"></div>
<% } %>
I have an extrange case with JMesa..
When I'm doing tests without a form element as parent (to apply filters and pages) JMesa table is rendered.
But when I put the Jmesa element as form's child, the style disappears and is rendered as a basic table without colors or borders ._.
<fieldset>
<s:form action="listUsers">
<jmesa:tableModel id="test" items="${users}" var="bean">
<jmesa:htmlTable caption="${pageScope.caption}" width="100%">
<jmesa:htmlRow>
... Rows ....
</jmesa:htmlRow>
</jmesa:htmlTable>
</jmesa:tableModel>
</s:form>
</fieldset>
On head tags I have the css refered and jmesa/jquery.jmesa ..
Since the table renders with correct styles when not wrapped in a form tag but renders with no styling when it is inserted into the body of a form tag, my first thought is that there is a style somewhere at the form tag level that is causing the table styles to be lost or overridden. Another possibility is that if your CSS Selectors are configured with very specific parent/child relationships, the introduction of another tag could conceivably prevent styles from being applied.
Without more information as to what styles are present, the best suggestion I can offer is to use a tool that allows you to interactively assess your styles. Internet Explorer 8 has the Developer Tools feature. Conveniently, you can use a feature to click on an item on your Web page and it will load that element along with its styles. You can then analyze the styles or dynamically tweak styles to immediately see results.
I'd recommend loading the page that works and screen capturing the styles for the table when it looks good. Then you can do the same for when the styles are not being applied to the table and compare the two as a starting point to determining what's causing the difference.
We have a GWT project using RequestFactory, Editor Framework and UiBinder. Once the data is loaded from the server using RequestFactory, we determine whether the page should be read-only based on a status in the data.
At this point I would like to render either an input widget or a label (if read-only).
Ideally I would swap out the rendering of the widget depending on the data, however by the time that the data is loaded it looks like the rendering side has been completed (based on debugging I've done).
I don't want to have two widgets on the page with one hidden. This has caused us issues already with data from the hidden one overriding the other, not to mention the impact of twice the number of widgets in the DOM.
One thought so far was to removeFromParent() when the data was received. Is there a better way to do this?
Thanks.
My first idea is...
Only works for input fields and textareas. If you have dropdowns, radioboxes or checkboxes it doesn't work...
...to style an input field via css so it doesn't look like one (remove border and background color should do it) and disable it if its read only. If its not read only remove the css class, so it looks like a normal input field and make it editable.
Something like this:
<style>
.label {
background-color: white;
border: 0px;
color: black;
}
</style>
<input type="text" class="label" disabled value="Read only data"/>
<input type="text" value="Editable data"/>
An other idea is..
It has been some time that I was using GWT. But can't you just add the widget in the callback from the rcp call where you get the data?
Something like this:
In the ui Binder you just have the container for the data.
In a method you draw the Data as Label or Input field in the container, depending on the data you get. You call this method in the callback from the data request.