0
bonne journée. J'ai un problème dans lequel je veux fixer la position d'un div à l'intérieur d'un modal. Here is the div i want to position fixedPosition fixe div à l'intérieur modal
Voici le code qu'il a fait:
<?php $this->load->view('includes/home-nav-bar'); ?>
<!--================================
= USER POSTS =
=================================-->
<div class="container-fluid nightMode-Black" style="padding: 0 !important;">
<div class="col-md-3 "></div>
<div class="col-md-6 a-divHome">
<div class="row" id="ideasActions">
<div class="row">
<br>
<h4>Share your Work</h4>
<br>
<div class="col s12">
<ul class="tabs tabs-fixed-width bg-color-white nightMode-Black">
<li class="tab col s3" >
<center>
<a class=" active hide-on-large-only " href="#discussion">
<li class="material-icons active">chrome_reader_mode</li>
</a>
</center>
<a class="active hide-on-med-and-down" href="#discussion">Discussion</a>
</li>
<li class="tab col s3">
<center>
<a class="active hide-on-large-only " href="#photoVideo">
<li class="material-icons">collections</li>
</a>
</center>
<a class="hide-on-med-and-down" style="font-size: 1vw" href="#photoVideo" >Photo/Video Upload</a>
</li>
<li class="tab col s3">
<center>
<a class="active hide-on-large-only " href="#file">
<li class="material-icons">attach_file</li>
</a>
</center>
<a class="hide-on-med-and-down" style="font-size: 1vw" href="#file" >File Upload</a>
</li>
</ul>
</div>
<div id="discussion" class="col s12">
<form id="formText" action="" method="post">
<div class="input-field">
<label>What are your thoughts?</label>
<textarea class="materialize-textarea validate"
value="" data-length="250" required name="txtStatus"></textarea>
</div>
<div class="input-field">
<button type="submit" value="Upload"
class="btn btn-floating btn-large pulse green right">
<i class="material-icons">cloud_upload</i>
</button>
</div>
</form>
</div>
<div id="photoVideo" class="col s12">
<form action="<?=base_url()?>Home/updatePost" method="post">
<div class="row" id="image_preview"></div>
<div class="file-field input-field">
<div class="btn">
<span>Choose Photo/Video</span>
<input type="file" id="upload_photo" name="upload_photo[]" onchange="preview_image();" multiple>
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<div class="row">
<button id="addCategory" type="button" class="btn waves-effect waves-light small">Add Categories</button>
</div>
<!--================================
= CATEGORIES =
=================================-->
<div class="row" id="categories" style="display: none;">
<div class="col s12">
<div class="col s3">
<p>
<input type="checkbox" id="digitalArt" />
<label for="digitalArt">Digital Art</label>
</p>
<p>
<input type="checkbox" id="traditionalArt" />
<label for="traditionalArt">Traditional Art</label>
</p>
<p>
<input type="checkbox" id="photography" />
<label for="photography">Photography</label>
</p>
<p>
<input type="checkbox" id="artisanCrafts" />
<label for="artisanCrafts">Artisan Crafts </label>
</p>
<p>
<input type="checkbox" id="literature" />
<label for="literature">Literature</label>
</p>
</div>
<div class="col s3">
<p>
<input type="checkbox" id="filmAndAnimation" />
<label for="filmAndAnimation">Film and Animation </label>
</p>
<p>
<input type="checkbox" id="motionBooks" />
<label for="motionBooks">Motion Books </label>
</p>
<p>
<input type="checkbox" id="flash" />
<label for="flash">Flash </label>
</p>
<p>
<input type="checkbox" id="desAndInt" />
<label for="desAndInt">Designs and Interfaces</label>
</p>
<p>
<input type="checkbox" id="customization" />
<label for="customization">Customization </label>
</p>
</div>
<div class="col s3">
<p>
<input type="checkbox" id="cartAndCom" />
<label for="cartAndCom">Cartoons and Comics </label>
</p>
<p>
<input type="checkbox" id="ManAndAnim" />
<label for="ManAndAnim">Manga and Anime</label>
</p>
<p>
<input type="checkbox" id="anthro" />
<label for="anthro">Anthro</label>
</p>
<p>
<input type="checkbox" id="fanArt" />
<label for="fanArt">Fan Art</label>
</p>
</div>
<div class="col s3">
<p>
<input type="checkbox" id="comProj" />
<label for="comProj">Community Projects </label>
</p>
<p>
<input type="checkbox" id="contest" />
<label for="contest">Contests </label>
</p>
<p>
<input type="checkbox" id="journals" />
<label for="journals">Journals </label>
</p>
<p>
<input type="checkbox" id="scraps" />
<label for="scraps">Scraps </label>
</p>
</div>
</div>
</div>
<!--==== End of CATEGORIES ====-->
<div class="input-field">
<button type="submit" value="Upload" class="btn btn-floating btn-large pulse green right">
<i class="material-icons">cloud_upload</i></button>
</div>
</form>
</div>
<div id="file" class="col s12">
<form action="<?=base_url()?>Home/updatePost" method="post">
<div class="row" id="file_preview"></div>
<div class="file-field input-field">
<div class="btn">
<span>Choose File</span>
<input type="file" id="upload_file" name="upload_file[]" onchange="file_preview();" >
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<div class="input-field">
<button type="submit" value="Upload" class="btn btn-floating btn-large pulse green right"><i class="material-icons">cloud_upload</i></button>
</div>
</form>
</div>
</div>
</div>
<div class="row hide-on-large-only">
<!--=====================================
= WORKFEED MOBILE =
=========================================-->
<div id="workFeed" class="col s12">
<div class="row a-padTop">
<div class="col s12 m12">
<div class="card sticky-action hoverable">
<div class="card-content nightMode-Black" style="padding:1%;">
<div class="row valign-wrapper" style="padding:1% 0 1% 3%; margin-bottom: 0;">
<div class="col-md-2" style="padding-right: 0; margin-right: 0;">
<img
src="<?=base_url()?>assets/img/sample.svg"
style=" width:80%"
class="responsive-img circle bg-color-black ">
</div>
<div class="col-md-6">
<h5>
<blockquote>
<!-- @change dynamic data from database -->
<?=ucfirst($userInfo['firstname']." ".$userInfo["lastname"]);?>
</blockquote>
</h5>
<p>Shared at October 27, 2017</p>
</div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
</div>
<div class="card-image">
<!-- @change use dynamic data in data-caption and card title from database -->
<img class="materialboxed" data-caption="Loren Legarda" src="<?=base_url()?>assets/img/sample_pic.jpg">
<span class="card-title">Loren Legarda</span>
</div>
<div class="card-content nightMode-Black">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</div>
<div class="card-action nightMode-Black">
<!--================================
= FOR MOBILE =
=================================-->
<div class="row hide-on-large-only">
<div class="row">
<div class="col s12">
<!-- @change 54 and 15 to dynamic data from database-->
<div class="chip bg-color-orange">
Appreciations <span class="color-red">54</span>
</div>
<div class="chip bg-color-lightblue ">
Comments <span class="color-red">15</span>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="col s3">
<a class="btn-floating btn-small waves-effect waves-light bg-color-red right">
<i class="material-icons ">flag</i>
</a>
</div>
<div class="col s3">
<a class="btn-floating btn-small waves-effect waves-light bg-color-orange right">
<i class="material-icons ">book</i>
</a>
</div>
<div class="col s3">
<a class="btn-floating btn-small waves-effect waves-light bg-color-orange right">
<i class="material-icons ">lightbulb_outline</i>
</a>
</div>
<div class="col s3">
<a class="btn-floating btn-small waves-effect waves-light bg-color-lightblue right">
<i class="material-icons activator">comment</i>
</a>
</div>
</div>
</div>
</div>
<!--==== End of FOR MOBILE ====-->
<!-- COMMENTS -->
<div class="row">
<div class="col-md-8">
<div class="row input-field">
<label>Add Comment</label>
<input type="text" name="">
</div>
</div>
<div class="col-md-4 ">
<div class="row input-field valign-wrapper">
<button type="submit" class="btn red right waves-light waves-effect">Comment</button>
</div>
</div>
</div>
</div>
<!--===================================
= USER COMMENTS =
====================================-->
<div class="card-reveal nightMode-Black">
<span class="card-title nightMode-Black">Comments<i class="material-icons right">close</i></span>
<div class="row">
<div class="col s6">
<div class="chip">
<!-- @change // DYNAMIC COMMENTS CHANGE TO USER ID NUNG NAG COMMENT -->
<img src="<?=base_url()?>assets/img/sample.svg" alt="Contact Person">
<?=$userInfo['firstname']?>
</div>
</div>
<div class="col s6">
<!-- @change // DYNAMIC COMMENTS CHANGE TO COMMENT NUNG NAG COMMENT -->
<[email protected] id to Comment<?=$userInfo['user_id']?> -->
<span class="truncate Comment1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
<h6>
<a data-value="Comment1" class="color-blue showMore">More</a>
</h6>
</div>
</div>
<div class="row">
<div class="col s6">
<div class="chip">
<!-- @change // DYNAMIC COMMENTS CHANGE TO USER ID NUNG NAG COMMENT -->
<img src="<?=base_url()?>assets/img/sample.svg" alt="Contact Person">
<?=$userInfo['firstname']?>
</div>
</div>
<div class="col s6">
<!-- @change // DYNAMIC COMMENTS CHANGE TO COMMENT NUNG NAG COMMENT -->
<[email protected] id to Comment<?=$userInfo['user_id']?> -->
<span class="truncate Comment2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
<h6>
<a data-value="Comment2" class="color-blue showMore">More</a>
</h6>
</div>
</div>
</div>
<!--==== End of USER COMMENTS ====-->
</div>
</div>
</div>
</div>
<!--==== End of WORKFEED MOBILE ====-->
</div>
<div class="row hide-on-med-and-down">
<!-- Modal Trigger -->
<!-- @change postID to post ID -->
<a class="waves-effect waves-light btn modal-trigger " href="#postId">Modal</a>
<!-- Modal Structure -->
<div id="postId" class="modal workFeedPost nightMode-Black bg-color-white">
<div class="modal-content">
<!--==================================
= WORKFEED WEB =
===================================-->
<div id="workFeed" class="row">
<div class="col s8">
<div class="card nightMode-Black bg-color-white sticky-action hoverable">
<div class="card-image">
<!-- @change use dynamic data in data-caption and card title from database -->
<img class="materialboxed" data-caption="Loren Legarda" src="<?=base_url()?>assets/img/sample_pic.jpg">
<span class="card-title">Loren Legarda</span>
</div>
<div class="card-content nightMode-Black">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</div>
<br><br>
</div>
<div class="card hoverable">
<div class="card-image">
<!-- @change use dynamic data in data-caption and card title from database -->
<img class="materialboxed" data-caption="Loren Legarda" src="<?=base_url()?>assets/img/sample_pic.jpg">
<span class="card-title">Loren Legarda</span>
</div>
<div class="card-content nightMode-Black">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</div>
<br><br>
</div>
</div>
<div class="col s4" >
<div class="card">
<div class="card-content bg-color-white nightMode-Black" style="padding:1%;">
<div class="row valign-wrapper" style="padding:1% 0 1% 3%; margin-bottom: 0;">
<div class="col-md-6">
<h5>
<blockquote>
<!-- @change dynamic data from database -->
<?=ucfirst($userInfo['firstname']." ".$userInfo["lastname"]);?>
</blockquote>
</h5>
<p>Shared at October 27, 2017</p>
</div>
<div class="col-md-4" style="padding-right: 0; margin-right: 0;">
<img
src="<?=base_url()?>assets/img/sample.svg"
style=" width:80%"
class="responsive-img circle bg-color-black ">
</div>
<div class="col-md-2">
<a data-position="bottom" data-delay="50" data-tooltip="Save to collections" class="tooltipped btn-floating btn-small waves-effect waves-light bg-color-orange right">
<i class="material-icons ">book</i>
</a>
</div>
</div>
</div>
<div class="card-action bg-color-white nightMode-Black">
<!--=============================
= FOR WEB =
==============================-->
<div class="row hide-on-med-and-down">
<div class="col s7">
<div class="chip bg-color-orange">
<!-- @change 54 and 15 to dynamic data from database-->
Appreciations <span class="color-red">5400</span>
</div>
<div class="chip bg-color-lightblue ">
Comments <span class="color-red">15</span>
</div>
</div>
<div class="col s5">
<a data-position="bottom" data-delay="50" data-tooltip="Report" class="tooltipped btn-floating btn-small waves-effect waves-light bg-color-red right">
<i class="material-icons ">flag</i>
</a>
<a data-position="bottom" data-delay="50" data-tooltip="Appreciate" class="tooltipped btn-floating btn-small waves-effect waves-light bg-color-orange right" >
<i class="material-icons ">lightbulb_outline</i>
</a>
<a data-position="bottom" data-delay="50" data-tooltip="Show Comments" class="tooltipped btn-floating btn-small waves-effect waves-light bg-color-lightblue right">
<i class="material-icons activator">comment</i>
</a>
</div>
</div>
<!--==== End of FOR WEB ====-->
<!-- COMMENTS -->
<div class="row">
<div class="col-md-8">
<div class="row input-field">
<label>Add Comment</label>
<textarea class="materialize-textarea validate"
value="" data-length="250" required name="txtStatus"></textarea>
</div>
</div>
<div class="col-md-4 ">
<div class="row input-field ">
<button type="submit" class="btn btn-small red right waves-light waves-effect">Comment</button>
</div>
</div>
</div>
</div>
<!--===================================
= USER COMMENTS =
====================================-->
<div class="card-reveal bg-color-white nightMode-Black">
<span class="card-title nightMode-Black">Comments<i class="material-icons right">close</i></span>
<div class="row">
<div class="col s6">
<div class="chip">
<!-- @change // DYNAMIC COMMENTS CHANGE TO USER ID NUNG NAG COMMENT -->
<img src="<?=base_url()?>assets/img/sample.svg" alt="Contact Person">
<?=$userInfo['firstname']?>
</div>
</div>
<div class="col s6">
<!-- @change // DYNAMIC COMMENTS CHANGE TO COMMENT NUNG NAG COMMENT -->
<[email protected] id to Comment<?=$userInfo['user_id']?> -->
<span class="truncate Comment1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
<h6>
<a data-value="Comment1" class="color-blue showMore">More</a>
</h6>
</div>
</div>
<div class="row">
<div class="col s6">
<div class="chip">
<!-- @change // DYNAMIC COMMENTS CHANGE TO USER ID NUNG NAG COMMENT -->
<img src="<?=base_url()?>assets/img/sample.svg" alt="Contact Person">
<?=$userInfo['firstname']?>
</div>
</div>
<div class="col s6">
<!-- @change // DYNAMIC COMMENTS CHANGE TO COMMENT NUNG NAG COMMENT -->
<[email protected] id to Comment<?=$userInfo['user_id']?> -->
<span class="truncate Comment2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
<h6>
<a data-value="Comment2" class="color-blue showMore">More</a>
</h6>
</div>
</div>
</div>
<!--==== End of USER COMMENTS ====-->
</div>
</div>
</div>
</div>
<!--==== End of WORKFEED WEB ====-->
</div>
</div>
</div>
<div class="col-md-3 hide-on-med-and-down a-div-height a-divHome" >
<div class="row">
<h5 class="color-black right-align">Actions</h5>
<div class="switch right-align">
<label>
Hide ideas actions
<input type="checkbox" class="hideIdeasActions" checked="">
<span class="lever" ></span>
</label>
</div>
<br>
<div class="switch right-align">
<label>
Switch to night mode
<input type="checkbox" class="toNightMode" >
<span class="lever" ></span>
</label>
</div>
</div>
</div>
</div>
<!--==== End of USER POSTS ====-->
Quels sont les résultats à ceci: Image
Le problème ici est qu'il change sa position et la position fixe ne fonctionne pas. P.s cette div est à l'intérieur d'un modal Pps. Ce div est dans un autre div
grillez votre div parent en deux parties comme 1: «col-md-8» et 2ème: «col-md-4» et organisez votre code de cette façon [les bases de la grille] (https: // www. w3schools.com/bootstrap/bootstrap_grid_basic.asp) –
@ChetanShankar je l'ai déjà fait il –
alors le code postal entier ou donner bout de code –