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;
}
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 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.
i have a filter panel with 5-6 combo boxes ajax control tool kit..
i want this filter panel to be visible false by default.. and toggle it(show/hide) on client click using java script
however when i have my filter panel as visible = false runat=server java script does not get the object
and if i do code behind.. filterpanel.attributes.add("style",display:none)
filterpanel.attributes.add("style",visibilty:hidden)
the combo box throws a runtime error..
i've searched on the net which says.. combo box is difficult to render inside a panel.. whose default property is initially false!
The problem is that the <select> elements have to be rendered (but not necessarily visible) in order to reliably access their dimension properties.
So display: none; won't work because the elements are not rendered, and visibility: hidden; will partially work because the elements are rendered, so space is allocated for them on the page, but hidden, so that space will remain empty.
A third solution is to render the container as usual, but make it absolutely positioned outside of the browser viewport:
filterPanel.Attributes.Add("style",
"position: fixed; left: -10000px; top: -10000px;");
That way, the panel and its contents won't be visible, but the size of the <select> elements will be properly computed.
On the client side, the formula to show the panel becomes:
document.getElementById("filterPanelClientID").style.position = "static";
And to hide it again:
document.getElementById("filterPanelClientID").style.position = "fixed";
You can test a jQuery-based implementation here.
The issue is that if you set Visible="false" on a server control, it won't render any of the HTML elements, including the combo boxes. Hiding the panel using the following is AJAX friendly:
<asp:Panel id="p" runat="server" style="display:none">
</asp:Panel>
Which will render a DIV and all your drop downs, but hide them from view, allowing you to toggle the div's visibility.
Don't apply the "display: none" to the panel, only "visibility: hidden":
filterpanel.Attributes.Add("style", "visibilty: hidden");
This will hide your panel (the <div> I suppose) but reserve the required space (and therefore will allow the dimension-related properties of the corresponding DOM element to have the right values).
Of course you'll see an empty spot but you could probably resolve this issue by playing with the styles of an element (maybe by nesting the panel inside another element and by applying styles to that element instead of doing that on the panel itself).