CSS: Keep the style when making a display: inline-block

Question

CSS: Keep the style when making a display: inline-block

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (1 votes)

1

I have a table in which I can drag rows doing drag and drop.

To break some words I use the word-wrap:break-word; and the display:inline-block to work on browsers like Chrome.

The style, when dragging a row which has the applied display style: inline-block changes and looks bad.

I leave a JSFiddle so that it can be tested. (The second row is the one that goes wrong.)

link

It looks good: (row not affected by the inline-block)

It looks bad: (row affected by the inline-block)

html css bootstrap

asked by Lluís Puig Ferrer 20.09.2017 в 15:26

source

3 answers

2

In the context of your example, the only solution I see is to eliminate the display:inline-block rule and let the text occupy as much space as needed:

$("#tabs").tabs();

$("#tabs ul li a").droppable({
    hoverClass: "drophover",
    tolerance: "pointer",
    drop: function(e, ui) {
        var tabdiv = $(this).attr("href");
        $(tabdiv + " table tr:last").after("<tr>" + ui.draggable.html() + "</tr>");
        ui.draggable.remove();
    }
});

$("#tbodyproject").sortable({
    items: "> tr",
    appendTo: "parent",
    helper: "clone",
    update: function( event, ui ) {
        let newOrder = $(this).sortable('toArray');
        $.ajax({
            type: "POST",
            url:'/admin/projects/updateOrder',
            data: {ids: newOrder}
        })
       .done(function( msg ) {
        //location.reload();        
       });
    }
}).disableSelection();

img {
  width: 100px;
  
}
.name{

  word-wrap:break-word;
  width:60px;
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script><div id="tabs">
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <div class="col-md-12">
            <div id="table1">
              <table class="table">
                <thead>
                  <tr>
                    <th class="thcenter"><!--<a href="{{route('admin.projects.order', ['field' => 'id','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByIdAsc"></span></a>-->ID<!--<a href="{{route('admin.projects.order', ['field' => 'id','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByIdDesc"></span></a>--></th>
                    <th class="thcenter"><!--<a href="{{route('admin.projects.order', ['field' => 'slug','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderBySlugAsc"></span></a>-->Visible<!--<a href="{{route('admin.projects.order',['field' => 'slug','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderBySlugDown"></span></a>--></th>
                    <th><!--<a href="{{route('admin.projects.order', ['field' => 'order','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByOrderAsc"></span></a>-->Nombre<!--<a href="{{route('admin.projects.order', ['field' => 'order','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByOrderDesc"></span></a>--></th>
                    <th>Header</th>
                    <th>Home</th>
                    <th class="thcenter"><!--<a href="{{route('admin.projects.order', ['field' => 'public','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByPublicAsc"></span></a>-->Orden<!--<a href="{{route('admin.projects.order', ['field' => 'public','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByPublicDesc"></span></a>--></th>
                    <th><span class="glyphicon glyphicon-cog"></span>Acciones</th>
                  </tr>
                </thead>

                <tbody id="tbodyproject"> 
                    <tr id="id1" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">1</p></td>
                      <td class="tdcenter"> 
                        <i class="fa fa-times" aria-hidden="true" id="margindata"></i>  
                      </td>
                      <td><p id="margindata">Slug</p></td>
                      <td><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td><img src="http://via.plom/350x150" class="sizehome"></td>
                      <td class="tdcenter"><p id="margindata">Order 1</p></td>
                        <td>
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                    
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 1">Delete
                          </form>
                      </td>
                      
                    </tr>
                    <tr id="id2" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">2</p></td>
                      <td class="tdcenter"> 
                        <i class="fa fa-times" aria-hidden="true" id="margindata"></i>  
                      </td>

                      <td class="name" width="50px"><p id="margindata">Slugggggggggggg</p></td>
                             
                      <td><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter"><p id="margindata">Order 2</p></td>
                            <td>
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 2">Delete
                      </form>
                             </td>
                    </tr>
                    <tr id="id3" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">3</p></td>
                      <td class="tdcenter"> 
                        <i class="fa fa-times" aria-hidden="true" id="margindata"></i>  
                      </td>
                      <td><p id="margindata">Slug</p></td>
                      <td><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter"><p id="margindata">Order 3</p></td>
                       <td>
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 3">Delete
                      </form>
                     </td>
                    </tr>
                </tbody>
              </table>
              <br><br>
            </div>
        </div>

When the text Slugggggggggggg does not have space, the property word-wrap:break-word does not have any effect, now if you add even a perfect functional space:

$("#tabs").tabs();

$("#tabs ul li a").droppable({
    hoverClass: "drophover",
    tolerance: "pointer",
    drop: function(e, ui) {
        var tabdiv = $(this).attr("href");
        $(tabdiv + " table tr:last").after("<tr>" + ui.draggable.html() + "</tr>");
        ui.draggable.remove();
    }
});

$("#tbodyproject").sortable({
    items: "> tr",
    appendTo: "parent",
    helper: "clone",
    update: function( event, ui ) {
        let newOrder = $(this).sortable('toArray');
        $.ajax({
            type: "POST",
            url:'/admin/projects/updateOrder',
            data: {ids: newOrder}
        })
       .done(function( msg ) {
        //location.reload();        
       });
    }
}).disableSelection();

img {
  width: 100px;
  
}
.name{

  word-wrap:break-word;
  width:60px;
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script><div id="tabs">
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <div class="col-md-12">
            <div id="table1">
              <table class="table">
                <thead>
                  <tr>
                    <th class="thcenter"><!--<a href="{{route('admin.projects.order', ['field' => 'id','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByIdAsc"></span></a>-->ID<!--<a href="{{route('admin.projects.order', ['field' => 'id','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByIdDesc"></span></a>--></th>
                    <th class="thcenter"><!--<a href="{{route('admin.projects.order', ['field' => 'slug','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderBySlugAsc"></span></a>-->Visible<!--<a href="{{route('admin.projects.order',['field' => 'slug','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderBySlugDown"></span></a>--></th>
                    <th><!--<a href="{{route('admin.projects.order', ['field' => 'order','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByOrderAsc"></span></a>-->Nombre<!--<a href="{{route('admin.projects.order', ['field' => 'order','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByOrderDesc"></span></a>--></th>
                    <th>Header</th>
                    <th>Home</th>
                    <th class="thcenter"><!--<a href="{{route('admin.projects.order', ['field' => 'public','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByPublicAsc"></span></a>-->Orden<!--<a href="{{route('admin.projects.order', ['field' => 'public','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByPublicDesc"></span></a>--></th>
                    <th><span class="glyphicon glyphicon-cog"></span>Acciones</th>
                  </tr>
                </thead>

                <tbody id="tbodyproject"> 
                    <tr id="id1" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">1</p></td>
                      <td class="tdcenter"> 
                        <i class="fa fa-times" aria-hidden="true" id="margindata"></i>  
                      </td>
                      <td><p id="margindata">Slug</p></td>
                      <td><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td><img src="http://via.plom/350x150" class="sizehome"></td>
                      <td class="tdcenter"><p id="margindata">Order 1</p></td>
                        <td>
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                    
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 1">Delete
                          </form>
                      </td>
                      
                    </tr>
                    <tr id="id2" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">2</p></td>
                      <td class="tdcenter"> 
                        <i class="fa fa-times" aria-hidden="true" id="margindata"></i>  
                      </td>
                      
                      
                      <!--AQUI LE DI UN ESPACIO Y SE VE PERFECTAMENTE CUANDO SE HACE DRAG-->
                      <td class="name" width="50px"><p id="margindata">Sluggggg ggggggg</p></td>
                      
                      
                      
                      <td><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter"><p id="margindata">Order 2</p></td>
                            <td>
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 2">Delete
                      </form>
                             </td>
                    </tr>
                    <tr id="id3" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">3</p></td>
                      <td class="tdcenter"> 
                        <i class="fa fa-times" aria-hidden="true" id="margindata"></i>  
                      </td>
                      <td><p id="margindata">Slug</p></td>
                      <td><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter"><p id="margindata">Order 3</p></td>
                       <td>
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 3">Delete
                      </form>
                     </td>
                    </tr>
                </tbody>
              </table>
              <br><br>
            </div>
        </div>

For what remains to your decision on what form suits you best.

answered by 20.09.2017 в 16:50

1

that happens because word is not a valid value for the property word-wrap , try placing the following value:

word-wrap: break-word

I hope you serve, greetings!

answered by 20.09.2017 в 15:53

Separate name and surname in SQL Failed to confirm () in JavaScript [duplicate]

score 2 · Accepted Answer

You can try applying the style to the paragraph instead of the cell:

$("#tabs").tabs();

$("#tabs ul li a").droppable({
    hoverClass: "drophover",
    tolerance: "pointer",
    drop: function(e, ui) {
        var tabdiv = $(this).attr("href");
        $(tabdiv + " table tr:last").after("<tr>" + ui.draggable.html() + "</tr>");
        ui.draggable.remove();
    }
});

$("#tbodyproject").sortable({
    items: "> tr",
    appendTo: "parent",
    helper: "clone",
    update: function( event, ui ) {
        let newOrder = $(this).sortable('toArray');
        $.ajax({
            type: "POST",
            url:'/admin/projects/updateOrder',
            data: {ids: newOrder}
        })
       .done(function( msg ) {
        location.reload();        
       });
    }
}).disableSelection();

img {
  width: 100px;
  
}
td.name{
  overflow: hidden;
}
td.name p{
  display:inline-block;
  word-wrap:word;
  width:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<div id="tabs">
        <div class="col-md-12">
            <div id="table1">
              <table class="table">
                <thead>
                  <tr>
                    <th class="thcenter"><!--<a href="{{route('admin.projects.order', ['field' => 'id','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByIdAsc"></span></a>-->ID<!--<a href="{{route('admin.projects.order', ['field' => 'id','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByIdDesc"></span></a>--></th>
                    <th class="thcenter"><!--<a href="{{route('admin.projects.order', ['field' => 'slug','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderBySlugAsc"></span></a>-->Visible<!--<a href="{{route('admin.projects.order',['field' => 'slug','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderBySlugDown"></span></a>--></th>
                    <th><!--<a href="{{route('admin.projects.order', ['field' => 'order','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByOrderAsc"></span></a>-->Nombre<!--<a href="{{route('admin.projects.order', ['field' => 'order','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByOrderDesc"></span></a>--></th>
                    <th>Header</th>
                    <th>Home</th>
                    <th class="thcenter"><!--<a href="{{route('admin.projects.order', ['field' => 'public','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByPublicAsc"></span></a>-->Orden<!--<a href="{{route('admin.projects.order', ['field' => 'public','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByPublicDesc"></span></a>--></th>
                    <th><span class="glyphicon glyphicon-cog"></span>Acciones</th>
                  </tr>
                </thead>

                <tbody id="tbodyproject"> 
                    <tr id="id1" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">1</p></td>
                      <td class="tdcenter"> 
                        <i class="fa fa-times" aria-hidden="true" id="margindata"></i>  
                      </td>
                      <td><p id="margindata">Slug</p></td>
                      <td><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter"><p id="margindata">Order 1</p></td>
                        <td>
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                    
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 1">Delete
                          </form>
                      </td>
                      
                    </tr>
                    <tr id="id2" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">2</p></td>
                      <td class="tdcenter"> 
                        <i class="fa fa-times" aria-hidden="true" id="margindata"></i>  
                      </td>
                      <td class="name"><p id="margindata">Slugggggggggggg</p></td>
                      <td><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter"><p id="margindata">Order 2</p></td>
                            <td>
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 2">Delete
                      </form>
                             </td>
                    </tr>
                    <tr id="id3" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">3</p></td>
                      <td class="tdcenter"> 
                        <i class="fa fa-times" aria-hidden="true" id="margindata"></i>  
                      </td>
                      <td><p id="margindata">Slug</p></td>
                      <td><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter"><p id="margindata">Order 3</p></td>
                       <td>
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 3">Delete
                      </form>
                     </td>
                    </tr>
                </tbody>
              </table>
              <br><br>
            </div>
        </div>