CODEWITHSUNDEEP
htmlcss
Mohamed Taboubi
Mohamed Taboubi

Reputation: 7021

display button in the correct place

I have 7 buttons to display in my html page,

These buttons represents the days number as in this picture :

enter image description here

I'm using a javascript function that display only buttons of specific days (in my case : days that have null value on the chart) ...

However when the button are hidden I lose the correct position of the rest of buttons (that I should have).. like in this picture :

enter image description here

I want that the buttons keep there correct positions. What I want have is something like this :

enter image description here

Here is my Html code :

   <div id="graph-wrapper" style="height:200px; width:100%; display:inline-block;">   <table class="graph-actions">
        <tr>
          <td id="graph-edit0" class="btn hidden" style="width: 14%">btn 1</td>
          <td id="graph-edit1" class="btn hidden" style="width: 14%">btn 2</td>
          <td id="graph-edit2" class="btn hidden" style="width: 14%">btn 3</td>
          <td id="graph-edit3" class="btn hidden" style="width: 14%">btn 4</td>
          <td id="graph-edit4" class="btn hidden" style="width: 14%">btn 5</td>
          <td id="graph-edit5" class="btn hidden" style="width: 14%">btn 6</td>
          <td id="graph-edit6" class="btn hidden" style="width: 14%">btn 7</td>
        </tr>       </table>  </div>

Upvotes: 0

Views: 64

Answers (2)

Mohamed Taboubi
Mohamed Taboubi

Reputation: 7021

After correction, and to summarize here is the response :

I edit my code to be as follow : 

<div id="graph-wrapper" style="height:200px; width:100%; display:inline-block;">
    <table class="graph-actions" style="width:100%">
        <tr>
            <td id="graph-edit0" class="btn " style="width: 14%;visibility: hidden">btn 1</td>
            <td id="graph-edit1" class="btn " style="width: 14%;visibility: hidden">btn 2</td>
            <td id="graph-edit2" class="btn " style="width: 14%;visibility: hidden">btn 3</td>
            <td id="graph-edit3" class="btn " style="width: 14%;visibility: hidden">btn 4</td>
            <td id="graph-edit4" class="btn " style="width: 14%;visibility: hidden">btn 5</td>
            <td id="graph-edit5" class="btn " style="width: 14%;visibility: hidden">btn 6</td>
            <td id="graph-edit6" class="btn " style="width: 14%;visibility: hidden">btn 7</td>
        </tr>
    </table> </div>

And I used a JQuery function to edit the css for the given buttons as this : 

$.each( indexesNullValue(data),function( index, value ){
        $("#graph-edit"+value).css("visibility","visible");
    });

Thank you all :)

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206505

if your .hidden in CSS does 

display:none;

it will collapse the remaining cells to the available space. Instead try like:

td.hidden{
    display: table-cell; /* reset the .hidden */
    visibility: hidden;  /* use visibility instead*/
}

https://developer.mozilla.org/en/docs/Web/CSS/visibility
Here's a demo:

.hidden{
  display:none;
}
/* the above is from Bootstrap? OK, let's keep it.*/

/* Now let's fix it instead for the TD elements: */
td.hidden{
  display: table-cell;
  visibility:hidden;
}
<div id="graph-wrapper" style="height:200px; width:100%; display:inline-block;">
  <table class="graph-actions">
    <tr>
      <td id="graph-edit0" class="btn hidden" style="width: 14%">btn 1</td>
      <td id="graph-edit1" class="btn hidden" style="width: 14%">btn 2</td>
      <td id="graph-edit2" class="btn" style="width: 14%">btn 3</td>
      <td id="graph-edit3" class="btn hidden" style="width: 14%">btn 4</td>
      <td id="graph-edit4" class="btn" style="width: 14%">btn 5</td>
      <td id="graph-edit5" class="btn" style="width: 14%">btn 6</td>
      <td id="graph-edit6" class="btn hidden" style="width: 14%">btn 7</td>
    </tr>
  </table>
</div>

Upvotes: 2

Related Questions