CSS Means to change the leveling if the unit is not placed



  • There's a column button in the table heading that gives a menu of sorting.

    <div id="table_col_0" class="fixedColumn">
        <span>Колонка 1<i class="fa fa-sort"></i></span>
        <ul class="sort" id="sort_0">
            <li><div>По возрастанию</div></li>
            <li><div>По убыванию</div></li>
        </ul>
    </div>
    

    Steel is sorted. Accordingly, ul will be attached to the right edge of the parent div.

    right: 0px;
    width: 150px;
    position: absolute;
    

    If the width of the left column is less than the width of the menu of the sorting, the menu of the sorting will be incorrect, like:

    Меню сортировки выползает

    I'm using JS to change the leveling in another area and it's like,

    введите сюда описание изображения

    Is there any way to make this happen only to CSS?



  • Question withdrawn.

    .fixedColumn{
      border:1px solid red;
      position:absolute;
      width:100px;
      height:100px;
      text-align:right;
    }
    .sortMenu{
      background:lightblue;
      position:relative;
      display:inline-block;
      width:150px;
    }
    

    <div class="fixedColumn">
    <div class="sortMenu">
    xxx
    </div>
    </div>

    https://jsfiddle.net/hcfefm7n/

    The width of the unit with fixedColumn class is equating


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2