Fixed div inside ion-content

#1

I want to fixed a div inside ion-content. I used CSS property position:fixed; but nothing is happen and also used 2 ion-contents to make the div fixed, but this is temporary solution or something like waste. could anyone help me to give any better solution for this? so that design can not changed. Any help is really appreciated. thanks in advance.

#2

Hello,

maybe you have some typo etc., because It fixes whatever to the viewport as expected.

Provide code of your whatever.

Best regards, anna-liebt

#3
    <ion-content class="padding">
            <div class="row">
                <div class="col">
                    <input type="text" placeholder="enter keyword" ng-model="filter.keyword" style="border-bottom: 1px solid #59a585;width: 100%;">
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <h4 class="m-0 arabic"> تحديد السعر</h4>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="list list-inset filtr-fld">
                        <label class="item item-input">
                            <input type="text" placeholder="من" ng-model="filter.from" class="arabic">
                        </label>
                    </div>
                </div>
                <div class="col">
                    <div class="list list-inset filtr-fld">
                        <label class="item item-input">
                            <input type="text" placeholder="إلى" ng-model="filter.to" class="arabic">
                        </label>
                    </div>
                </div>
            </div>
</ion-content>

i want to fix this to at top and other content can be scrolled.

  <div class="row">
                <div class="col">
                    <input type="text" placeholder="enter keyword" ng-model="filter.keyword" style="border-bottom: 1px solid #59a585;width: 100%;">
                </div>
            </div>
#4

Hello,


I see, it has something to do in conjunction with ion-header.

If ion-header is commented out, than it works as you expect. With ion-header, ion header is lying above ion content and your input is underneat ion header.

Maybe it is a solution to put your input inside ion header or comment it out.

Best regards, anna-liebt