positioning

Vertical space on elements with position:absolute

由 孤街浪徒 提交于 2019-12-05 01:08:07
How can I make elements with position:absolute and dynamic height occupy vertical space using only css? Is there any trick with containers and display that I can use? Unfortunately, using absolute positioning means, by definition, that your element is no longer taking up space. So no, only through css there is no way to do this. You can of course use jQuery (or plain javascript) to accomplish this. How I'd do it is have a space element next to each vertical element. Enclose both the space element and the absolutely positioned vertical element in a relatively positioned div. On page load,

Facing issue in Position value during Drag and drop in RecyclerView android

由 耗尽温柔 提交于 2019-12-04 17:51:22
How do i get new position value during drag and drop in RecyclerView adapter? Drag and Drop is working perfect but when i set setOnClickListener to open my detail activity. it gives me the old position value. For example : If i drag 2nd item (INDEX 1) and drop at 1st item's position (INDEX 0). On debuging inside setOnClickListener when i am calling Intent. Position value is 1 (INDEX 1) but what i need is value 0 (INDEX 0). @Override public void onBindViewHolder(final ItemViewHolder holder, final int position) { holder.textView.setOnClickListener(new View.OnClickListener() { @Override public

Break an absolutely positioned element out of its relatively positioned ancestor?

由 独自空忆成欢 提交于 2019-12-04 16:14:33
Suppose I have a document like <style type="text/css"> div { border:1px solid; padding:15px; } #i_am_relatively_positioned{ background-color:#fcc; margin:50px; padding:50px; position:relative; } #inner { background-color:#cfc; } #i_want_to_be_absolute_to_body{ background-color:#ccf; left:0; position:absolute; top:0; } </style> <body> <div id="i_am_relatively_positioned"> <div id="inner">inner</div> <div id="i_want_to_be_absolute_to_body">absolute to body</div> </div> </body> Is there a way to make #i_want_to_be_absolute_to_body positioned absolute with respect to the body element, rather than

How to best overlay a canvas on an image?

由 北战南征 提交于 2019-12-04 14:18:09
I would like to place a canvas on top of an image that I have on a page. The canvas will be the exact dimensions of the image. However, the following conditions must be met: The canvas must remain exactly on top of the image at all times. Therefore, using absolute positioning will not work because if content is inserted above the image, it will move the image down without moving the canvas . The image may be resized from its original size. Therefore, replacing the image with the canvas and setting its background to the image will not work. What options do I have? You should be able to use

jQuery UI: Draggable Scroll Issue

由 依然范特西╮ 提交于 2019-12-04 14:13:04
问题 I'm trying to build a draggable/droppable folder-file view with jQuery UI, but I'm running into a problem with, what I believe is attributed to the helper. Here is my code: The HTML <body> <div id="topContainer"> <span>Parent Directory 1</span> </div> <span id="topFolder" class="folder"> <div class="drop"> </div> </span> <hr /> <div id="container" class="container"> <div class="dropzone"> <span>Parent Directory 2</span> </div> <div id="cont1" class="container"> <div class="dropzone"> <span

Div position shifts when adding content

由 a 夏天 提交于 2019-12-04 11:35:42
Following yesterday's issue ( DOM Equidistant divs with inline-blocks and text justify won't work when inserting through JS ) which @Snuffleupagus was kind enough to help me understand, I stumbled into another weird browser behaviour. Updated fiddle in here: http://jsfiddle.net/xmajox/NUJnZ/ When any kind of content is added (block or inline) to the divs they shift down. When all divs have content, they magically move back into their correct places. I tried starting them all with some dummy content div and then just changing that children's text but it reacts the same way. Any ideas? Add

How to select options overlapping an absolute positioned DIV?

由 醉酒当歌 提交于 2019-12-04 08:35:30
问题 I have an absolute positioned div which works like a tooltip. On mouse over of an element it shows and then hides at mouse out. I have few <select> elements in the page which is placed above the tooltip element. In normal case the tooltip div will appear over the select tag. But when a user clicks on select tag and the options are shown, it overlaps the tooltip. Giving a higher z-index for select or options tag did not work. Here is a sample code to illustrate the problem. <body> <h1>Select

How to place autocomplete menu above the text input?

由 痴心易碎 提交于 2019-12-04 08:09:27
Is there any way to display the Autocomplete result set above the text input? The problem is that I am using it in a lighbox application. The background element being set to 100% of the pages' height and width, it will naturally not expand with its content. So if the content above the text box increases so much that the input is forced towards the bottom of the page, and then the user types something into it, the autocomplete menu appears, and the input being towards the end of the page, the menu causes scrollbars to appear Since the background element (dark colored) won't expand to

z-index of elements in different parents in Chrome

由 落爺英雄遲暮 提交于 2019-12-04 03:57:23
问题 There are two containers. One is fixed and covers 100% of the screen. Second is relative - contains scrollable content. The problem is that there are four elements to be positioned relative to each other as follows: 1st in a fixed container, 2nd in absolute, 3rd fixed, 4th in absolute. <div class="container fixed"> <div class="el z1"></div> <div class="el z3"></div> </div> <div class="container relative"> <div class="el z2"></div> <div class="el z4"></div> </div> However, z-index of one of

How can I positioning LI elements to the bottom of UL list

由 十年热恋 提交于 2019-12-04 03:07:21
问题 I have menu items like: Row1 Row2.. RowN and I want them not to be that wide - that's why including breaks (with max-width) I have this HTML: <div> <ul> <li>Row1</li> <li>Row1 Row2 Row3</li> <li>Row1</li> <li>Row1 Row 2</li> </ul> </div> with this CSS: /* MENU */ .menudiv {padding-left:10px; border-bottom: 1px solid #d0db88;} ul.menu { list-style-type: none; min-width: 1050px; position: relative; left:10px; display: block; height: 45px; margin: 0; padding: 0; } ul.menu li { float: left;
订阅 positioning