Блог

Я использую встроенный CSS для размещения модели в правой нижней части экрана, но он работает не идеально

 <div className="modal fade " style={{ width:'30%',position:'fixed',bottom:0,right:0,margin:0}} id="updateCategory" tabIndex="-1" aria-labelledby="exampleModalLabel2" aria-hidden="true" >
 

это дает мне следующий результат

даже если удалить все свойства css выше, кроме width:'30%' результата, будет то же самое.

но если я использую следующий стиль, он работает

 <div className="modal fade " style={{ width:'30%',bottom: 0,marginTop:260,marginLeft:900}} id="updateCategory" tabIndex="-1" aria-labelledby="exampleModalLabel2" aria-hidden="true" >
 

но я хочу использовать нижний 0 и правый 0 . как это будет работать. пожалуйста, помогите

попробовать это:

 margin-left: auto;
margin-right: 0;
margin-top: auto;
margin-bottom: 0;
top: 100%;
transform: translateY(-100%);
 

попробовать это:

 <div className="modal fade " style="display: flex; justify-content: flex-end; align-items: flex-end;" id="updateCategory" tabIndex="-1" aria-labelledby="exampleModalLabel2" aria-hidden="true" >
    <div class="modal-dialog" role="document" style="margin: 0;">
        HI THERE
    </div>
</div>
 

HI THERE Замените своим модальным контентом