I have several similar tables inside a page, and, using scriptaculous, I would like to drag and drop one row from one table to another. I can already do this with the code:
new Draggable('some-id').
Where 'some-id' is the table row id.
However, there is no visible drag, which is bad for user interaction...
Applying the same code to a simple div works fine, which makes me believe that it is a problem with dragging a table row.
Edit:
For example:
<table>
<tr id="drag_tr"><td>Drag</td></tr>
</table>
<div id="drag_div">some content</div>
<script type="text/javascript">
new Draggable("drag_tr")
new Draggable("drag_div")
</script>
In this code, the div will have a visual drag (i.e. the div will follow the cursor), while the table row won't, even though I know it's being dragged.
So this is a problem with <div>s vs <tr>'s
a <div> can have an absolute position which allows the div to move wherever the mouse is but a tr lives within a table and thus cannot be moved about on the page
here is a jsfiddle to illustrate (tr is green, div is red)
http://jsfiddle.net/PUHPH/
no matter what coordinates you put in for the tr it will not move from the top left corner of the page - but the div will go where ever you put it
Related
I'm using Bootstrap 3 and I'm trying to craft up a grid of photos and captions that scales down in the number of columns as screen width gets smaller and maintains a proper height for the tallest element on a "row". I put row in quotes here. I can't use the row class because the row break changes depending upon screen width (3, 2 or 1 column per "row").
Here's a general idea of what each cell looks like in HTML.
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="..."/>
<div class="caption">...</div>
</div>
</div>
Here's what I'm seeing on screen. At medium screen width we have three photos across and it looks fine. Note the second "line" of photos starts on the far left:
When the screen is scaled down to a small size the column count properly goes to 2. However, due to the varying "cell" heights subsequent photos do not return to the leftmost spot:
Does Bootstrap have a way of maintaining a consistent height for all cells in a "row" and ensure that cells starting on a new "row" clear all of the previous cells and starts from the leftmost spot?
I am new to this so I hope my question is relevant and useful to others.
I have a bigcommerce store and I removed the side category display panel from the category page (I did not want a side category to dispay) but this has now left me with only 4 columns of products displayed on a page 5 columns wide. Could any kind person tell me how to add an extra column of products, so that the page width is full again, or how to alter the image size so that 4 columns of product images fills the space previously occupied by 4+sidecategory ?
To change the layout of your category page you require to do change in category.html. As per your requirement you need to remove the below code from the category.html (Any change in this file will reflect in all your category pages)
<div class="Left fleft">
%%SNIPPET_SubCategories%%
%%Panel.SideCategoryShopByPrice%%
</div>
I am saying to remove the entire side column div because you want the full page layout but you can just remove the particular snippets or panels which you don't want but with that sometime what happens is like any panel which is currently not active from admin panel but later whenever it will active then it shows the problem like your layout will display with side column having that particular panel and also your wide column (products column) with 5 products in a row.
After this you have to do change in css file named styles.css, In this file search for the .ProductList li in which you can see the width which is given in percentage to 25 so please make it to 20.
Please save the above files and you can see the changes.
Thanks.
I've encountered this in a couple spots in my app:
Let's assume I have 3 items in a carousel. I'm viewing item #2. I need to reload that carousel, so I do the following operations:
Ext.getCmp('carousel_name').removeAll();
var new_objects = (bunch of code that recreates the carousel's objects again, with the same IDs; this is the same code that was used to create the objects the first time, so it is likely not the issue)
Ext.getCmp('carousel_name').add(new_objects);
In the carousel object items list (Ext.getCmp('carousel_name').getItems()), all three items exist. However, only #1 and #3 (the ones which weren't the active item prior to the carousel reload) actually appear. #2 presents a blank white screen, and in the HTML nothing exists except for the item shell markup (no code that I've written shows up). If I do Ext.getCmp('carousel_item_2').show();, the item does appear, but is full-screen, and I get the error:
[DEPRECATE][Ext.Panel#show] Call show() on a component that doesn't currently belong to any container. Please add it to the the Viewport first, i.e: Ext.Viewport.add(component);
When I try to manually add that item to either the Viewport or the carousel, nothing is fixed.
I've tried inserting a dummy item in-between removal and reinsertion of new items, that doesn't work. Nor does hiding the entire Viewport before doing any of this and showing it afterwards. Nor does using setItems() rather than add(). Nor does doing Ext.getCmp('exercises_carousel').each(function(item){ item.destroy(); }) rather than removeAll(true)
I don't believe the issue is the code snippet that re-creates the new items, since it's the same code that's used to create the items the first time, and there are no issues on the first creation.
Pretty stumped here.
EDIT: I've found that if, when I get to the end of the carousel, if I add a empty item after the last item in the carousel, I don't get the blank item at N-2. No clue why this is the case. Still not a real solution, it's a hack.
Assuming there are no problems in your code snippet to re-populate new items in your carousel, then the only problem is because of this issue (I'm not sure whether it's a bug in Sencha Touch 2.1 or not but it does exist): when you call yourCarousel.removeAll() and add some new items again, your carousel will NOT set proper active item.
I've seen a similar problem and I added this after adding new items, which works:
carousel.setActiveItem(0);
Alright, this is a hack, so if anyone has a legitimate solution, that would be awesome. But the hack does work, so here it is:
Add an empty item in the carousel
Set active item to the new empty carousel item
Destroy all carousel items
Recreate (and re-add) all of the items
In code:
Ext.getCmp('carousel_name').add({});
Ext.getCmp('carousel_name').setActiveItem(Ext.getCmp('carousel_name').getMaxItemIndex());
Ext.getCmp('carousel_name').removeAll(true);
var new_objects = (bunch of code that recreates the carousel's objects again, with the same IDs)
Ext.getCmp('carousel_name').add(new_objects);
EDIT: As it turns out, this for some reason works 90% of the time; for some unknown reason 10% of the time it still doesn't get inserted. The only way to guarantee that all items get inserted correctly is to clear the entire viewport (Ext.Viewport.removeAll(true)), recreate all of the original items in the viewport, and reinsert them. I'd rather not have to do this every time an item doesn't get inserted.
There is a table that js creates dynamically.
A button triggers a function that get the tables first rows innerHTML.
And replace its with
While raplacing it takes style informations as is to the divs.
After these i add some extra styling to div with replace() too.
But that function creates and fills with . Is it about percentage width or another thing?
The sample code is spagettied too much. So i couldn't paste here.
I am using HTA (HTML Application) and vbs+javascript.
Thank you in advance
Çağlar
I created an HTML for email marketing. I placed a table, and applied a border around it:
<table border="0" cellspacing="0" cellpadding="0" style="border:1px solid #982676; margin:0 16px;">
For some reason I am getting 1 pixel extra white space inside when I test it in OUTLOOK 2010. I see it around images that are aligned to the top and to the left, and I see it around other cells that have a solid background color.
See image at this link:screenshot
The top triangle is an image in a cell by itself. The bottom rectangle is a cell with a background color. These were supposes to stick to the border. This is a recurring problem. Has anyone encountered this issue before?
Campaign monitor has a really great solution on how to solve this type of problem. Simple add this style code to your table elements. The code below solved my problem (same as OP) on Outlook 2010
<table align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> ... </table>
EDIT: Links have been replaced with wayback machine since both are gone. I also included a gif of the Email on acid version.
http://www.campaignmonitor.com/blog/post/3694/removing-spacing-from-around-tables-in-outlook-2007-and-2010
If that doesn't work, try this.
http://www.emailonacid.com/blog/details/C13/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010
I found this here:
http://www.emailonacid.com/blog/details/C13/7_tips_and_tricks_regarding_margins_and_padding_in_html_emails
" Table element margins and padding in Outlook 2007 and 2010 can cause issues
If you add margin or padding properties to your TABLE element, it will add that same margin and padding to every nested TD in Outlook 2007 and 2010. Cellpadding and cellspacing attributes are safe but it's best to avoid CSS margins and padding within the containing TABLE element."
So I guess your margin on the table could be causing this.I m not sure.
In case you haven't found a solution to this problem yet:
Make sure you set border="0" for those images within the table cells.
Add border-collapse:collapse; to the table style.
I solved this problem going into the table properties section and then clicking on "Options". Once the options box appears, change the default cell margins for Left and Right to 0" and then click OK.
For borders of 1 and 3 pixel width, the right border has a 1 pixel space behind it. One solution for this (weird...) kind of problem is a "ghost table" behind the current table, with the width of the current table minus 1 and border of 1.
For example:
<!--[if mso]><table border="1" width="699">
<tr style="display:none;"><td> </td></tr>
</table><![endif]-->
Good luck...