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>
<% } %>
Related
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.
I have two widgets, placed into container. This looks like a mainScreenWidget and footerWidget. Together they should be spread through the all space.
Imagine the size of footerWidget changes due to changing its contents. This event should be propagated to main widget because it has some complicated calculations based on size.
A question is: how can I do it?
<container>
<mainWidget/> - its needs two know about footers size: the two widgets should be spread all over the container
<footerWidget/> - its size can be changed: second line can be added etc
</container>
In my case widgets are stored in a div-based table, buts thats not the case:
<div style="display:table">
<div style="display:table-row"><div style="display:table-cell" class="mainWidget">...
<div style="display:table-row"><div style="display:table-cell" class="footerWidget">...
</div>
You have many options:
Use LayoutPanel with two layers - one for main widget, one for footer widget.
Use CSS. For example, you can position your footer absolutely and let the browser resize the main widget.
My web application has primary and secondary search.
Based on the search term the web application highlights the first search term in blue color and the second search term (or search within as they call) is highlighted in purple color. This is mostly done using java script in the back end for which we do not have access.
I need to automate this scenario, since the color of the element is not seen in page source i am unable to identify the background color of the element using selenium.
Please suggest me a suitable solution to get the background color of the searched terms
From what I understood so far from your question is, you wanted to style anchor visiting search links.
Links can be styled with any CSS property (e.g. color, font-family, background, etc.). In addition, links can be styled differently depending on what state they are in.
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
You can change any background color of the link by styling anchor tag directly in your css external or inline file. This can also be handled very easily from Javascript or Jquery styling attributes. Go for the below example and play with it to see if this is how you needed your links to behave.
a:link {color:#FF0000;} /* unvisited link*/
a:visited {color:#000000;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Remember the order to process the same
Source:http://www.w3schools.com/css/css_link.asp
See if this is what you are looking for.
You can remove default link style by using style="text-decoration : none;" for 'a' tag
<a href="#" style="text-decoration : none;">
This link is not underlined.</a>
I have html file and I have the label name now I need to identify the html object.
Can you please help me to identify the object.
I am using jsoup to parase,
I could not attaching the screen shot,
The page has top row with label below are html object
program, study, study status, study manager (all are labels and below html obj)
text box dropdown, drop down, text box (html objec)
When working with HTML, it pays to be aware of the structure of the HTML elements, and not how they are rendered on-screen. In your case, you will need to find a way to identify the elements you seek in the HTML code, and and then use one of the Document#getElement(s|)By(.+) methods to find it.
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.