CODEWITHSUNDEEP
javascriptjquerycssjquery-uiportlet
сами J.D.
сами J.D.

Reputation: 513

Draggable and sortable Jquery not looking good

I'm trying to replicate this behaviour: https://jqueryui.com/sortable/#portlets

I have included the required fields in my HTML site and it works well. However, it doesn't look as good because the portlet box has a fix width. Therefore, if I have a big form in one portlet and there are elements on the side, they are overlapped. I attach an screenshot (I cover some parts that can't be public):

enter image description here

With black arrows what should be on the side and not on top of my form. With red arrows, the surrounding border around the portlet which should be around the form (or whatever, or not exist at all).

What do I have to do to achieve what I want? I attach relevant code (I've simplify the form a little bit)

 $(function() {
    $( ".column" ).sortable({
      connectWith: ".column",
      handle: ".portlet-header",
      cancel: ".portlet-toggle",
      placeholder: "portlet-placeholder ui-corner-all"
    });
 
    $( ".portlet" )
      .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
      .find( ".portlet-header" )
        .addClass( "ui-widget-header ui-corner-all" )
        .prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
 
    $( ".portlet-toggle" ).click(function() {
      var icon = $( this );
      icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
      icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
    });
  });
 body {
    min-width: 520px;
  }
  .column {
    width: 170px;
    float: left;
    padding-bottom: 100px;
  }
  .portlet {
    margin: 0 1em 1em 0;
    padding: 0.3em;
  }
  .portlet-header {
    padding: 0.2em 0.3em;
    margin-bottom: 0.5em;
    position: relative;
  }
  .portlet-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -8px;
  }
  .portlet-content {
    padding: 0.4em;
  }
  .portlet-placeholder {
    border: 1px dotted black;
    margin: 0 1em 1em 0;
    height: 50px;
  }
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
	<script src="./JS/js.js"></script>
	<title>  </title>
	
	<!-- TESTING -->
	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
	<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<link rel="stylesheet" href="./CSS/dragtest.css">
	<script src="./JS/dragtest.js"></script>
</head>

<body>
<h2> cambiar </h2>
<div class="column">
 
  <div class="portlet">
      <div class="portlet-header">New pick</div>
    <div class="portlet-content">
<form>
	<fieldset>
	<legend>Upload</legend>

		<label for="usuari">User: </label>
		<select name="usuari" id="usuari">
		<option value='1'>Samy</option><option value='2'>Boji</option><option value='3'>Ferrer</option><option value='4'>Pajaru</option>		</select>

		<div>
			<label for="fet"> Fet: </label>
			<select name="fet" id="fet">
			<option value='1'>Si</option><option value='2'>No - Quota caiguda</option><option value='3'>No - Desaparegut del mercat</option><option value='4'>No - Línea moguda</option>			</select>
		</div>
		
		<div>
			<label for="data"> Data: </label>
			<input id="data" name="data" type="date" value="2016-06-28">
		</div>

		<div>
			<label for="horaRebut"> Hora rebut: </label>
			<input type="time" value="10:24" name="horaRebut" id="horaRebut">
		</div>

		<div>
			<label for="horaFet"> Hora posat: </label>
			<input type="time" value="10:24" name="horaFet" id="horaFet">
		</div>



        <div>
		<label for="comment"> Comentaris extra </label>
		<textarea rows="4" cols="80" maxlength="349" name="comment" id="comment"> </textarea>
			</div>
			
			<div>
				<button name="uploadp" type="submit">Donar pick d'alta</button>
			</div>
	</fieldset>
</form>
</div>
  </div>
  </div>
  
  
<div class="column">
 
  <div class="portlet">
    <div class="portlet-header">Feeds</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
 
  <div class="portlet">
    <div class="portlet-header">News</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
 
</div>
 
<div class="column">
 
  <div class="portlet">
    <div class="portlet-header">Shopping</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
 
</div>
 
<div class="column">
 
  <div class="portlet">
    <div class="portlet-header">Links</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
 
  <div class="portlet">
    <div class="portlet-header">Images</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
 
</div>

Upvotes: 0

Views: 133

Answers (1)

T J
T J

Reputation: 43166

Looks like the issue is solved if you add width:auto to the thingy having form (View the demo full screen)

$(function() {
  $(".column").sortable({
    connectWith: ".column",
    handle: ".portlet-header",
    cancel: ".portlet-toggle",
    placeholder: "portlet-placeholder ui-corner-all"
  });

  $(".portlet")
    .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
    .find(".portlet-header")
    .addClass("ui-widget-header ui-corner-all")
    .prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");

  $(".portlet-toggle").click(function() {
    var icon = $(this);
    icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
    icon.closest(".portlet").find(".portlet-content").toggle();
  });
});
body {
  min-width: 520px;
}
.column {
  width: 170px;
  float: left;
  padding-bottom: 100px;
}
.column.column-form {
  width: auto;
}
.portlet {
  margin: 0 1em 1em 0;
  padding: 0.3em;
}
.portlet-header {
  padding: 0.2em 0.3em;
  margin-bottom: 0.5em;
  position: relative;
}
.portlet-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -8px;
}
.portlet-content {
  padding: 0.4em;
}
.portlet-placeholder {
  border: 1px dotted black;
  margin: 0 1em 1em 0;
  height: 50px;
}
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  <script src="./JS/js.js"></script>
  <title></title>

  <!-- TESTING -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="./CSS/dragtest.css">
  <script src="./JS/dragtest.js"></script>
</head>

<body>
  <h2> cambiar </h2>
  <div class="column column-form">

    <div class="portlet">
      <div class="portlet-header">New pick</div>
      <div class="portlet-content">
        <form>
          <fieldset>
            <legend>Upload</legend>

            <label for="usuari">User:</label>
            <select name="usuari" id="usuari">
              <option value='1'>Samy</option>
              <option value='2'>Boji</option>
              <option value='3'>Ferrer</option>
              <option value='4'>Pajaru</option>
            </select>

            <div>
              <label for="fet">Fet:</label>
              <select name="fet" id="fet">
                <option value='1'>Si</option>
                <option value='2'>No - Quota caiguda</option>
                <option value='3'>No - Desaparegut del mercat</option>
                <option value='4'>No - Línea moguda</option>
              </select>
            </div>

            <div>
              <label for="data">Data:</label>
              <input id="data" name="data" type="date" value="2016-06-28">
            </div>

            <div>
              <label for="horaRebut">Hora rebut:</label>
              <input type="time" value="10:24" name="horaRebut" id="horaRebut">
            </div>

            <div>
              <label for="horaFet">Hora posat:</label>
              <input type="time" value="10:24" name="horaFet" id="horaFet">
            </div>



            <div>
              <label for="comment">Comentaris extra</label>
              <textarea rows="4" cols="80" maxlength="349" name="comment" id="comment"></textarea>
            </div>

            <div>
              <button name="uploadp" type="submit">Donar pick d'alta</button>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>


  <div class="column">

    <div class="portlet">
      <div class="portlet-header">Feeds</div>
      <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>

    <div class="portlet">
      <div class="portlet-header">News</div>
      <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>

  </div>

  <div class="column">

    <div class="portlet">
      <div class="portlet-header">Shopping</div>
      <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>

  </div>

  <div class="column">

    <div class="portlet">
      <div class="portlet-header">Links</div>
      <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>

    <div class="portlet">
      <div class="portlet-header">Images</div>
      <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>

  </div>

Upvotes: 1

Related Questions