1

I'm trying to build a planification calendar in HTML/CSS/JS using jQuery UI. In fact I need to have on the x axis the hours of the day (one TD = one hour, 20 px of larger) and on the y axis the different workshops. Into this I want to place, with drag and drop of jQuery, a div which represents an intervention. Of course an intervention can be of one, two, three or more hours longer.

So I want to place a div that is larger than his parent TD but without modifying his larger.

Any idea ?

PS: Sorry if my English is not as good as yours, I'm a french debutant programmer.

Here is my HTML page:

<table>
    <tr>
        <td class="snaponit"> </td>
        ...
        <td class="snaponit"> </td>
        <td class="snaponit">
            <div id="draggable" class="draggable ui-widget-content" style="position: absolute; right: 0; left: 0;">
                <p>Operation to be dragged on the grid.</p>
            </div>
        </td>
        ...
        <td class="snaponit"> </td>
    </tr>
    <tr>
        ...
    </tr>
    <tr>
        ...
    </tr>
    <tr>
        ...
    </tr>
</table>

A table with a certain number of rows containing 24 td. And a div placed on one of them, draggable, that is larger than his td.

Here is my css:

td {
    height: 100px;
    width: 20px;
    background-color: lightgray;
    border: solid gray 1px;
    overflow-x: visible;

}

table {
    position: relative;
    margin: 25px 25px 25px 25px;
}

tr {
    width: 480px;
}

I've tried to set the position of my attribute to "relative", "absolute" etc but none of these combinations worked. My Div is still forcing the td she's on to resize.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Aurel
  • 13
  • 4
  • Show what you have tried and describe what the remaining problem is. – Jukka K. Korpela Oct 22 '14 at 12:56
  • That's really ugly like that, what's the BB code on this site to format my code ? – Aurel Oct 22 '14 at 13:23
  • instead of putting code into a comment, edit your question instead, then you have much better formatting controls. – Kristian Oct 22 '14 at 13:28
  • That's better, thanks for the tip, I'm new to stackoverfull as a question asker. – Aurel Oct 22 '14 at 13:37
  • So you want to have a table cell that has a fixed size, 20 by 100 pixels, and you want to put there some content that does not fit into that size. Now, what do you want? By default, the content overflows to the areas of other elements, when you position the content absolutely; otherwise it causes the cell to expand. You need to specify what should happen instead. – Jukka K. Korpela Oct 22 '14 at 15:30
  • That's it, unknowing the size of my moving element (which will be determinated by the user) I want it to snap to my grid's tds, being placed under an "hour". But when i'll recreate the html page I'll need to place object(s) at the right place in the right td, but whithout having them in another size than 20 by 100. So to do that I need to make td postion: absolute ? What about tr and table, do they need to be in relative ? And last question, how do I make all my td at the good place, using right and left properties ? Thanks for your help, haven't touch css from a while. – Aurel Oct 23 '14 at 06:28
  • I don't know if i understand you properly, but what you need is something like this: http://jsfiddle.net/m7zhw9b3/ or like this: http://jsfiddle.net/nvvt8q4w/ ? – frikinside Nov 06 '14 at 10:08
  • That works when i set a bigger width to the

    balise, but another problem comes, the content overflows the td under the next cell, and not over. How do I fix that ?

     – Aurel Nov 12 '14 at 07:49

1 Answers1

0

Basically, what you're after is something like:

div {
  overflow-y: visible;
}

But apparntly, this doesn't always work out-of-the-box.

Please see here for a quite lengthy discussion about some issues regarding the implementation of this, including a possible workaround.

Community
  • 1
  • 1
Kristian
  • 278
  • 2
  • 6
  • I've tried it but it doesn't work, I've also tried to to set the position absolute (right:0 and left0 too) on my TD child's div, but it doesn't work too. Thanks, trying to do my best ! And my boss wants me to do that on IE 8, gonna be a long work ... – Aurel Oct 22 '14 at 13:26