CODEWITHSUNDEEP
jquerycssjquery-uicss-tables
rafaelcb21
rafaelcb21

Reputation: 13304

How to DIV block does not decrease

I have a table built by div, it has your width according with your content.

Html tags and body has width and large height, however, after the style left: 583px the div starts to decrease its width.

In jsFiddle example drag the table to the right: https://jsfiddle.net/rafaelcb21/ateL1gje/

I wonder how to make the div stay with same size anywhere in the available space by the width and height of the body tag, but stay with your width according with your content?

div

<div class="table node1" style="left: 583px; top: 121px;">
    <div class="td title">Test - Test</div>
    <div class="td body">Test Operation</div>
    <div class="td body">Test Type Operation</div>
    <div class="td body">Test Operation</div>
    <div class="td body">Test Operation</div>
    <div class="td body">Test Type Operation</div>
    <div class="td body">Test Type Operation</div>
    <div class="td body foot">Test Operation Raise now</div>
</div>

Jquery and Jquery UI

$('.node1').draggable();

css

html, body {
    padding:0px;
    margin:0px;
    width: 3300px;
    height: 5000px;
}

.table {
    position:absolute;
    cursor:pointer; 
    border: 1px solid #ffffff;
    border-radius: 10px;
    font-family: 'Proxima Nova Bold',"Segoe UI",Roboto,"Droid Sans","Helvetica Neue",Arial,sans-serif;
    font-style: normal;
    font-size: 70%;
    background: #E8EDFF;
}

.td {           
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 7px;
    padding-right: 7px;
    background: #E8EDFF;
    border: 1px solid #ffffff;
}

.title {
    border-top-left-radius: 10px;
    border-top-right-radius:10px;   
    background: #B9C9FE;
    color: #039;
    font-weight: bold;
}

.body {
    color: #669;
}

.body:hover {
    background: #d0dafd;
}

.foot {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius:10px;    
}

Upvotes: 0

Views: 70

Answers (3)

rafaelcb21
rafaelcb21

Reputation: 13304

I found the solution, I add display: table; https://jsfiddle.net/rafaelcb21/ateL1gje/3/

How to make div not larger than its contents?

.table {
     display: table; /*new style */
     position:absolute;
     cursor:pointer;    
     border: 1px solid #ffffff;
     border-radius: 10px;
     font-family: 'Proxima Nova Bold',"Segoe UI",Roboto,"Droid Sans","Helvetica Neue",Arial,sans-serif;
     font-style: normal;
    font-size: 70%;
    background: #E8EDFF;
}

Upvotes: 0

Picklejw_
Picklejw_

Reputation: 29

Adding a min-width property is a great idea to make sure that the width is never too small, if this causes your div to flow off the page you can set a 

margin-left: 583px;
min-width: 150px;

property instead of the 

left: 583px;

Upvotes: 0

JanR
JanR

Reputation: 6132

To stop your .table from resizing, add a min-width property to it's css:

.table {
    position:absolute;
    cursor:pointer; 
    border: 1px solid #ffffff;
    border-radius: 10px;
    font-family: 'Proxima Nova Bold',"Segoe UI",Roboto,"Droid Sans","Helvetica Neue",Arial,sans-serif;
    font-style: normal;
    font-size: 70%;
    background: #E8EDFF;
    min-width:150px /*new style */
}

Demo here

Upvotes: 1

Related Questions