CODEWITHSUNDEEP
javascripthtmlcss
user3682802
user3682802

Reputation: 89

Make Div Smallest Possible Width

The Fiddle: http://jsfiddle.net/GosuWhite/sXgAY/

You input numbers separated by any characters and it calculates some summary statistics. The summary statistics are output in area designated for the calculator in this divs:

<div id="solWrap">
    <div id="solTitles"></div>
    <div id="solStats"></div>
</div>

So You'd basically have something like this:

Sample Variance:    12.212
Population Variace: 12.291

I wanted to essentially center these statistics in the calculator area, but I don't know the width, so I used this:

solWrap.offsetWidth = outputTitles.offsetWidth + outputStats.offsetWidth + "px";

Cool, should work right? It turns out it doesn't and that's because outputStats is HIGHLY greedy and uses more width than it needs, and in fact, it actually uses all the remaining width available.

What can I do? Don't throw Jquery at me. Libraries are nice but I prefer sweet, sweet vanilla.

Edit: This is what I want: https://i.sstatic.net/GKptU.jpg I want that effect, but that was achieved through actually literally setting the width of the solWrap div. Since this calculator is dynamic, I want the width dynamically generated.

New Edit: No one has answered correctly yet.

Here is what is going on:

JavaScript is generating content inside two divs:

Sample Variance:    12.212
Population Variace: 12.291

Div 1 will contain "Sample Variance
Populati..."

And the other div will contain the data.

These are inside of the calculator text area which has a width of 400px and are both being displayed as inline-blocks.

The thing is when JavaScript generates this content inside of the divs, it does it corrently for the "sample variance...". It sets the width to the smallest possible value it can have.

But when JavaScript generates the content inside the div for the numbers, it sets the width way bigger than it needs to be and in fact takes up the rest of the area inside the calculator div.

How can I force the div that contains the numbers to be as small as it can?]

SOLUTION: I found a solution. Instead of display: inline-block, I used display: table and set the inner divs to display:table cell and it worked.

Upvotes: 0

Views: 1847

Answers (3)

Xion Dark
Xion Dark

Reputation: 3434

I apologize if I'm way off here but why can't you use a table?

<table id="stats_table">
    <tbody id="stats_table_body">
        <tr>
            <td class="title">Sample Variance:</td>
            <td class="value">12.212</td>
        </tr>
        <tr>
            <td class="title">Population Variace:</td>
            <td class="value">12.291</td>
        </tr>
    </tbody>
</table>

If you need to create though javascript:

var myStats = [{title: 'Sample Variance', value: 12.212},
               {title: 'Population Variace', value: 12.291}];
function makeStatsTable(stats){
    var table = document.getElementById("stats_table_body");

    stats.forEach(function(stat){
        var tr = document.createElement("tr");

        var title = document.createElement("td");
        title.className = "title";
        title.textContent = stat.title;
        tr.appendChild( title );

        var value = document.createElement("td");
        value.className = "value";
        value.textContent = stat.value;
        tr.appendChild( value );

        table.appendChild( tr );
    });
}

makeStatsTable( myStats );

Here is a jsfiddle: http://jsfiddle.net/xiondark2008/8X7MZ/

Upvotes: 0

CMPS
CMPS

Reputation: 7769

Try this:

Live demo

html

<form id="calcForm">
    <div id="outercalcTextArea">
        <div id="calcTextArea" contenteditable="true">

        </div>
    </div>
    <div id="calcButton"><center><button id="submit" type="submit">Submit</button></center></div>
</form>

css

#outercalcTextArea{
    background: none repeat scroll 0 0 #FFFFFF; 
    border: 1px solid #C9C9C9; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset, -5px -5px 0 0 #F5F5F6, 5px 5px 0 0 #F5F5F6, 5px 0 0 0 #F5F5F6, 0 5px 0 0 #F5F5F6, 5px -5px 0 0 #F5F5F6, -5px 5px 0 0 #F5F5F6; 
    border-radius: 2px 2px 2px 2px;
    min-width: 400px;
    width:auto;
    font-size:12px;
    height:200px;

    white-space:nowrap;

}

#calcTextArea { 
    width:100%;
    height:100%;
    padding: 8px;
    padding-left:21%;
    box-sizing:border-box;
}

Upvotes: 2

fuzzybear
fuzzybear

Reputation: 2405

html

<div id="solWrap" class='parentDiv'>    
 ....Child divs

css

 .parentDiv { 
 width: 100%;
 text-align:center;


 }

.chilDiv {
width: 90%;
text-align:left;
margin-left:auto;
margin-right:auto;
}

Upvotes: 0

Related Questions