css - problemer med nestedSortable og indrykning af tekst - Udvikleren.dk

Tags: nestedsortable css jquerry

Bruger #879 @ 18.06.12 21:12

Hej

Jeg har et problem som jeg ikke helt forstår kommer om det er i min CSS eller om det er et andet sted ved jeg ikke helt.

Se eks. 1

Problemet er at boksene A-C skulle være indrykket 20px, men det er de ikke. Jeg kan fint gøre det hvis jeg flytter min </div> til at dække hele området men men det er jo ikke meningen, men de 20px indrykning skulle være sat pr. defaultLink til NestedSortable

Se eks. 2

Min CSS ser sådan her ud.

CSS kode

 #contentLeft {
     width: 400px;
     padding-left: 20px;    
 }
 
 #contentLeft li{
     list-style: none;
 }
 
 #contentLeft .box{
     margin: 0 0 4px 0;
     height: 16px;
     font-size: 14px;
     padding: 10px;
     background-color: #0099CC;
     color:#fff;
     border-radius: 5px;
 }
 
 #contentLeft .move_box_placeholder {
     margin: 0 0 4px 0;
     height: 16px;
     padding: 10px;
     background-color: red;
     border-radius: 5px;    
 }

Jeg håber det er nok information, ellers må i lige sige til.

Indlæg senest redigeret d. 18.06.2012 21:14 af Bruger #879

1 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #16762 @ 19.06.12 02:21

#contentLeft li{
list-style: none;
padding-left:20px;
}

virker med eksempel et.

Ialt bliver det følgende:

HTML kode

 <html>
 <head>
     <style type="text/css">
         @import "css/global.css";
     </style>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
     <script type="text/javascript" src="jquery.ui.nestedSortable.js"></script>
     <!-- PAGE LISTING JQ -->
     <script type="text/javascript">
     $(document).ready(function(){
         $("#contentLeft ul").nestedSortable({ 
             listType: 'ul',
             placeholder: 'move_box_placeholder',
             opacity: 0.6, 
             cursor: 'move', 
             update: function() {
                 var order = $(this).nestedSortable("serialize") + '&action=updateRecordsListings';
                 $.post("inc/page_list_update1.php", order, function(theResponse){
                 $("#contentRight").html(theResponse);
                 });
             }
         });
     });
     </script> 
 <style type="text/css">
 #contentLeft {
     width: 400px;
     padding-left: 20px;
     }
     #contentLeft li{
     list-style: none;
     padding-left:20px;
     }
     #contentLeft .box{
     margin: 0 0 4px 0;
     height: 16px;
     font-size: 14px;
     padding: 10px;
     background-color: #0099CC;
     color:#fff;
     border-radius: 5px;
     }
     #contentLeft .move_box_placeholder {
     margin: 0 0 4px 0;
     height: 16px;
     padding: 10px;
     background-color: red;
     border-radius: 5px;
     }
 </style>        
 </head>
 
 <body>
 <div id="contentLeft">
     <ul>
         <li id="recordsArray_1"><div class="box">Test 1</div></li>
         <li id="recordsArray_2"><div class="box">Test 2</div>
         <ul>
             <li id="recordsArray_1"><div class="box">Test A</div></li>
             <li id="recordsArray_2"><div class="box">Test B</div></li>
             <li id="recordsArray_3"><div class="box">Test C</div></li>
         </ul>
         </li>
         <li id="recordsArray_3"><div class="box">Test 3</div></li>
     </ul>
 </div>
 </body>
 </html>
 </html>

problemer med nestedSortable og indrykning af tekst

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler