I have a jsp page with a menu bar in the top portion of the page and a table on the bottom portion of the page. The menu bar is expanded with menu items (<ul>) that contains a list of items. The table on the bottom portion has a header row like this:
<td style='text-align:center; position:relative; vertical-align:middle;'>
<span style="position:absolute;top:0;right:0;">
<img title="Close" alt="Close Column" src='<%=servernamepath%><%=closeButtonPath %>' />
</span><span style="width:100%;clear:both;"></span>
<b><a title="Sort" href="javascript: setSortableFieldAndSubmit('field1');" tabindex="80">Field1</a></b>
</td>
And the issue that I'm facing right now is if the list of items in the menu is large enough such that the list of items goes down and reaches the header row of the table (or go pass the header row), it will be hidden behind it; the header column appears in front of the item in the menu list. I thought adding z-index to the header row would fix the issue but that didn't work. Is there something that I'm missing in the CSS portion?
You had the right idea with the z-index property, but it should be set both for your header row and your bottom table, otherwise I don't think it's going to work properly.
I made a fiddle with part of your example with two tables, and one getting bigger and displayed above the other when you hover over it.
You might also be interested with this article explaining very well how it works.
Related
I have a page that has a grid of 4 columns each column contains a blurb and a below the blurb it contains a toggle. The blurb text content is not the same. My issues is once I have aligned the toggle buttons of each the column. The toggle buttons do not align. How can I set the blurb and Toggles to line up without plenty of spacing ? I have used align-items:flex-end any other methods I could try align.
Share link will be more helpful to understand the problem. Question is still not clear to me. If its happening on Divi Latest version then check if there having div before the button tag by inspecting the button. If you are confused just take row or column and then put button inside that. It should work.
As usual button contain a or button tag which is not block level element but text level so its taking display as inline or flex instead of block and getting element only spacing. So you ned to put text level element inside block level wrap like first div then button tag to make it alignment. Hope it will help you.
Thanks
I understand from your question that the blurb in each column is a different length, so the toggles do not line up horizontally? To line them up in Divi, first you'll need to make sure the columns are equal heights, and add a class to the row:
In the row settings, go to the Design tab, and enable Equalize Column Height.
Also in the row settings, go to the Advanced tab, and add a Custom CSS Class custom_fixed_toggles.
Now add the CSS to Appearance > Divi Theme Options > Custom CSS (which is located at the bottom of the first tab in Theme Options). Something like:
.custom_fixed_toggles .et_pb_toggle {
position: absolute;
bottom: 0;
}
Scenario: I have created a simple 2 columns jQuery accordion with 56 <li> elements. In reality it may have 200 or many more items who knows ;) It's repeating <li> in a loop
Try the fiddle. It's cool! https://jsfiddle.net/srmahmud2/smtn6gt0/9/ demo here
Way I have done it: made li float left, with 15px padding to make some space in between.
Target: Make a proper behaved multi column jQuery accordion
Problem:
For example the clicking on number 1 item on the left will expand but most of the items form left will automatically go to right which is not desired.
Now click on number 3. While expanding and after finished expanding this will again come back to left. So you will not have it under your mouse pointer to click again to collapse or click again to expand any of its child items. Try all the odd number before the last item.
Clicking on any items on right before the last item will expand it; but this will open a white/blank space on the left as well.
I need to be able to arrange a list of images (4 in my case) to a row and the link text to appear below like so:
row1
image1 image2 image3 image4
linkText1 linkText2 linkText3 linkText4
row2
image5 image6....
linkText5 linkText6.....
and so for however many images are. Here whether you click on the image or on its linkText, its supposed to open a document in a new window.
Here's the html that I intend, but doesn't work the way I want. It just puts one image per row. I have tried various combinations nothing seems to work. Although if I use just the img element and use the ng-repeat on it, the images flow the way I want, 4 to a row, but that doesn't serve my purpose as I want the link text as well below each image.
<div ng-repeat="items in DocImageCollection ">
<div ng-repeat="row in items">
<img alt="{{row.linkText}}"
ng-click="$event.preventDefault();openDocument({{row}});" ng-src="{{row.imageSrc}}" imageonload />
<br />
<span ng-click="$event.preventDefault();openDocument({{row}});">
{{row.linkText}}</span>
</div>
</div>
Here
imageonload is a directive which I have created for downloading the
image source,
DocImageCollection - is the main collection; for e.g. if I have 10 images in
all, then this will be an object array of capacity = 3, where each array
element (row) is itself an array of 4 image objects
I have all the data correct, I just have issue in the templating. Any help is
greatly appreciated.
The div tag is a block level element so it'll appear on it's own line unless you change the CSS display attribute to inline-block. Specifically, you need to target the display attribute for the div that contains the img and link.
Here's an example on codepen:
http://codepen.io/gwmccull/pen/LpYLLp
you can use an indexing method with your ng-repeat.
Check this
Adapted from here
ps. Not necessarily you will use the ng-if, this only serves you in case you want to only show multiples of 4
I have a short Ordered List that contains 2 items. Within the second Item, I want to position a button on the right. The CSS is giving me trouble so I am posting it here with the hope that someone more skilled can help.
Here's the markup:
<ol>
<li>Go here to perform an internal review.</li>
<li>When satisfied with the internal review, click the button on the right and then go to the Staging environment for a final review.<span style="width: 25%; display: block;float: right;" ><asp:Button runat="server" runat="server" ID="StageChanges" Text="Stage Changes" OnClick="StageChanges"/></span></li>
</ol>
Ideally I want the button to be inline with list element 2. The text for list element 2 should wrap appropriately. Right now the button goes below the second list element.
I tried a couple of variations, but nothing seems to work as I'd like. One variation included specifying the width of the second list element, but this removed the number 2 from being displayed (or moved it over to be in front of the button).
Thank you in advance!
Edited to add image:
When I crop your code down a bit it works splendidly. The button is being positioned inline of the second list element:
<li>
When satisfied with the internal review, click the button on the right and then go to the Staging environment for a final review.
<button>Stage Changes</button>
</li>
Keep in mind that button is one of those few form elements that gets its text from the content it wraps, not from a text-attribute.
Add CSS for list items
ol li{
display: inline-block;
}
I've been tearing my hair out trying to convert a simple table layout to CSS! I'm sure I'm missing something (like a decent knowledge of CSS :)
In this form I have a many-to-many selection facility. The user can type values into a text box, matching values are displayed in the "Available" select box, and buttons exist to move options to/from the "Selected" select box.
The table layout is structured something like this:
<table>
<tr>
<td>Field Label</td>
<td>TEXT BOX<br />"AVAILABLE OPTION" SELECT BOX</td>
<td><-Button<br />Button-></td>
<td>"SELECTED" SELECT BOX</td>
</tr>
</table>
In other words, I want to have 4 columns as follows:
Column1 : Label
Column 2: A text box, with a Select box underneath
Column 3: Buttons for <- and ->
Column 4: a Select box.
I've left floated the label and given it a width, added the text box, a line break, a margin on the select box, but how do I create the next column with the buttons, and the final column with the final select?
Any help would be gratefully received!
Four spans, one after the next, correspond to your original elements. Set each span to have display:inline-block.
I usually handle this with a list node, but pretty much any of the usual node types will do (div, span, etc). The idea is to create a container element for each column and float each left. Add an overflow:hidden to the container element (in this case, the ul) so that browsers will properly calculate the height of the floated elements nested inside. The display:inline on the floated li's fixes an ie6 double margin bug. http://jsfiddle.net/brianflanagan/QU2HB/