What I wanted to do is that I had multiple tables and/or images of different heights and wanted them positioned on the page side by side, so that the tops of the objects were aligned.
I couldn't figure this out, it didn't matter whether I put these 'in-line' or in separate Boxes (Minipages) (that seemed to be aligned the way I wanted in the editor), in output Lyx always seemed to align these objects somehow around the center of their height and not the top.
Finally, (after several hours of googling and trying to figure this out) I have the answer, so I'm posting it below, because I hope someone like me will find it useful in the future.
The way I solved this is relatively easy.
For each image/table I created a Box (Minipage). In each Box I put, on the first line, Vertical Space (Insert -> Formatting -> Vertical Space) and set the size to 0 in. After the Vertical Space I inserted the graphic/table. This way, if you put several boxes next to each other (for example by setting their width to 25% page width, or whatever you desire), they will be aligned by the top in the output.
You can also do Ctrl+Space (to insert a 'protected space') and then Enter, which seems to work the exact same way.
Hope this helps.
Related
Been using Slider Revolution on WordPress recently for a new client and having one big issue that I cannot find an answer to.
SITUATION
- I have 2 text elements, a Title text element and a Description text element (one above the other - vertically stacked)
- They have been manually placed to be aligned-left inside the slider area.
- I have them with a fixed width so they only cover the left side of the slider panel
- I have them set for auto-wrap so words do not get cut off and the test will drop to another line if needed.
PROBLEM
With this configuration, if the Title text element is too long (too many words) it will dynamically expand vertically (drop down lines) and cover up or overlap the description text element box below it.
SOLUTION
I would like to find a way to "link" or "hook" these 2 elements together (stacked one on top of the other with little space) so they do not overlap and the top element will automatically push down the 2nd text element box. Is it an html issue? a z-index issue? a placement process issue?
In the image I provided, you can see the difference between a 1, 2 & 3 line TITLE, and how the space between them is fixed. HOW DO I GET IT TO BE DYNAMIC? I apologize if this has been answered before, but I have searched for hours and cannot find an answer. Maybe I am searching with the wrong keywords.
slider-revolution-examples
This is a common situation with Revolution Slider when we use different text elements since they will be different layers and used with position:absolute.
The best solution for this is to merge all the text elements inside one element using basic HTML and style them as needed inside this element. Like this we only have one element used with position:absolute and inside it we have well formed HTML.
Simple question: is it possible to stack one WKInterfaceLabel on top of another inside a WKInterfaceGroup? I’m dragging like a mad man and I cannot get the blue target line to setting above or below the first label. It’ll sit beside it, to its left or right, but it won’t settle above or below it.
I’m trying to do something inside a table row akin to a master/detail, but I simply can’t figure out if it’s possible.
You can set the layout of the WKInterfaceGroup as Vertical and that will make your labels be one on top of the other.
This happens because WKInterfaceGroup doesn't work like a view, it has a layout flow that automatically arranges the inner WKInterface's as specified by the Layout property that can be horizontal or vertical. You can also tweak the appearance with custom insets.
I lifted Pacman and Space Invaders (henceforth, collectively called "object") from this website, and I'm trying to flow them one after the other in a straight line (randomly), but there are jumps currently.
How would I wrap each object (Pacman or Space Invader) in this case, and make them flow?
Here's what I have so far, along with float: left; on every object:
http://codepen.io/anon/pen/ijraw
(refresh to see alternative renders)
This is what I do want:
(all the DIVs flowing one after the other, one fluid line at a time)
This is what I don't want:
See the lone red Space Invader on line 2? I don't want that -- I want a line full of stuff.
PS there is too much code to post here. The Pacman and Space Invader objects aren't uniform, nor similar in any way, which is why I'm wondering if there's a way to wrap them with something more consistent.
Floating divs will find their place in the DOM flow. Your two images are different sizes so floating is actually doing it's job.
Simply change float : left to display : inline-block and it should work.
http://codepen.io/anon/pen/uapkL
I am using Telerik's Radgrid for a website. Often the grid columns exceed the available width, and extend outside the main content area (fixed width).
So what are my options for presenting very wide grids. horizontal scroll bars just look ugly on my site
Your choices are a combination of the following:
Smaller fonts
Consolidate some cells to have more than one row (e.g. if you have a "start date" and "end date" put the start date on top and the end date on the bottom.
Widen the window
Make some cells appear conditionally (based on user-defined filters). Maybe the most frequently used cells appear normally and a checkbox unhides the less frequently used cells or groups of cells.
Allow horizontal scrolling
Make the window a fluid width
Popup data in a floating <div> via javascript instead of putting it in a column
Am I missing anything?
i am using telerik controls too, one thing i have learned after a lot of work with them is their CSS is usually good, but i also face your problem, and here is my advise.
what Keltex said.
always add a custom class to your Rad Grid where you do fix those nasty stuff.
don't use fixed width for Grid, instead use it on columns and make the grid Fluid, so does the page.
hope this helps.
I agree with devmania and making the grid fluid, I had a similar problem recently. So I made a few of my columns nowrap and left the rest to wrap. It doesn't look great on smaller screens but it's still usable because I've stopped things like date+time columns wrapping. However, once you start using it on a wider screen it looks great.
It all depends on how much of a scrollbar you have. Is it possible to strip out some of the columns and have that information in a popup/flyout somewhere?
Another option is to make which columns are shown user configurable, but you're not really addressing the problem, just making it the responsibility of the user to make it look nice.
If you can't get rid of the horizontal scrollbar you should at least try to put the more important columns first so that your users don't have to scroll to the right very often.
If you go to my site: www.ryancoughlin.com - and if you see the Google, Yahoo, etc. RSS buttons on the right side of the page. I am trying to get them to align evenly, they are all the same image height and I have been trying to get them to evenly line up. But I have had no success.
Seems you are missing class="feed-image" on the Yahoo image.
Try to specify them as "inline" instead of block, this should allow you to treat them as words.
Another chance is to make a list (this seems appropriate since the nature of that "list" of images) and let the "li" elements float left (then adjust margins).
Also I think you should change your title in "Aligning images - vertically" to ease future users' search.