Hopefully this is somewhat simple to figure out. I have a list of items of an unknown height and a content editable div underneath it. I need to figure out how to resize the list when the content editable div gets bigger with content. Is there a css trick that I missed somewhere? Do I need to listen for an event? What's the best solution here?
Here is a fiddle to show what I'm talking about.
here's html structure in the fiddle just cause it makes me post code with a fiddle.
<div class="containerDiv" ng-controller="MyController">
<ul>
<li ng-repeat="item in items">
<p>{{item.message}}</p>
</li>
</ul>
<div id="inputDiv" contenteditable></div>
<button ng-click="addItem()">Add</button>
</div>
For example look at the facebook chat window. How does it resize when you have multiple lines of text before you send the message? Is there a simpler way of doing it?
First, you need to encapsulate your list in a div and let that div be dynamically handled by CSS.
You would then need to modify your height property and make the same 'auto'.
Next, provide a min-height if you require.
containerDiv {
border:1px solid blue;
height:auto;
width:150px;
min-height:100px;
}
.containerDiv ul {
height:auto;
overflow-y:auto;
}
Updated JS Fiddle: http://jsfiddle.net/q78jN/1/
Related
I am developing a web application using AngularJS.
I have a problem: in an HTML page I needed to show a table that dynamically show the number of rows based on a user's choice. I achieved this effect using a script and bootstrap rules.
I won't go into details, but I just show you the high-level code and a screenshot of the result:
HTML code:
<script type="text/ng-template" id="custom/pager">
<ul class="pager ng-cloak">
<!-- Code of the element drop down menu.....-->
</ul>
</script>
<div>
<ng-form >
<div class="panel panel-default table-panel noborder">
<div class="table-responsive">
<table ng-table-dynamic="$ctrl.tableParams with $ctrl.cols" class="table" template-pagination="custom/pager">
<!-- Code of the table.......-->
</table>
</div>
</div>
</ng-form>
</div>
The result is something like that:
My problem is that no type of CSS code seems to work to move the dropdown menu position to this position:
I tried to use position (relative, absolute, fixed) and also to encapsulate the <script> element inside <div> or <span> and refer it with CSS rules. But nothing seems to work! The dropdown menu always remains at the bottom and center of the page. I guess it's bootstrap's fault. Can you tell me how I can resolve this issue?
The pagination buttons are working. If the css should also work. You can place the below code into the codepen to see the effect.
Codepen
.table{
position:relative;
}
.ng-table-counts{
position:absolute;
top:0;
right:0;
}
I currently have many images in an ng-repeat. I want them to fill the page horizontally then go down however far (kinda like google images...they fill up the whole page). Well, I need to have the ng-repeat on a parent div because of some ng-class stuff that I'm doing based on certain image criteria and stacking things and so forth. The code I originally had (when I had the ng-repeat on the image) worked well, but now I need the ng-repeat on the div, and it is repeating the div attribute making the images stack. I got that solution from here. Here is the previous code:
<img class="movImg" ng-src="{{movie.imgPath}}" ng-repeat="movie in movies"/>
Now I need to do something like this:
<div data-ng-repeat="movie in movies">
<div class="mainContent" Overflow:scroll style="">
<img class="movImg" ng-src="{{movie.imgPath}}"/>
</div>
</div>
The repeat works, but I end up with a billion images in one column. Does anyone know how I can have the ng-repeat on the div, but keep the layout as before (dynamic number of columns/with the images taking up the width on the page)?
Here is the CSS that I'm using
.mainContent {
padding-left:10px;
padding-right:10px;
width:100%;
height:100%;
margin-top:40px;
overflow:scroll;
padding-bottom:50px;
}
.movImg {
display:inline;
margin:7.5px;
width:150px;
}
The answer to this question is that I needed to put a style of display:inline on the div of the ng-repeat.
Thank you all for the help.
I have an HTML structure below:
<div style="overflow:auto;" id="wrap">
<div id="text">content</div>
<div id="a"> </div>
</div>
Is it possible to have the overflow only take the size of #text into account and ignore #a, even if #a overflows further? I can't put #a outside the wrap DIV. I'm fine with using javascript if that is the only option.
EDIT: Here is an example of what I have, to show what I'm asking more clearly: http://jsfiddle.net/mAHMb/
Maybe this could help?:
Please try adding overflow-y:auto; to #text then set its heigth, remove #wrap height and you should be able to scroll #text without scrolling #a.
Here's the jsfiddle sample: http://jsfiddle.net/R4QWP/
I'm creating a mobile website with jQuery, and I was wondering if there was a way to align a list to the bottom of a page, I just want the list to stay at the very bottom of the page, and be fixed in the spot. Thanks
This is the list im trying to get fixed on the bottom of the page:
<div data-role="content">
<div class="content-primary">
<ul data-role="listview">
<li><img src="file.jpg" /><h3>List name</h3>
</li>
</div>
What about using position:fixed?
sample: http://jsfiddle.net/zmjhQ/4/
update: revised fiddle
You can use css absolute positioning.
#list {
position: absolute;
bottom: 10px;
}
edit based on your code sample, in jquery:
$('.content-primary ul').css('position', 'absolute').css('bottom', 0);
If you are using jQuery Mobile, you can wrap the element in a div with data-role="footer" and it should do what you want.
See this tut in net.tutsplus.com: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-build-an-rss-reader-with-jquery-mobile-2/
As class of div is CONTENT-PRIMARY so track this div using "". operator of jquery as ::
emphasized text$('.content-primary') and then place the part of css in it as explained by Jake Feasel
One thing make sure the class you specify for catching the div is same as you specify in the property of div class.
I have a page that static data in it will push a div down to make it longer. But when I use ajax loaded content then the div will stay as big it originally was and it looks like my new content will just overlap it...
I have a setup like this
<div id="wrap">
<div id="main-content">
<div id="content-fill">
<div id="files_left_pane">static content</div>
<div id="files_right_pane">ajax content</div>
</div>
</div>
</div>
#content-fill {border:1px solid #BDBDBD; width:919px;}
#files_left_pane {float:left; border-right:1px solid #BDBDBD; width:100px;}
#files_right_pane {float:right; widht:819px}
the height of the right pane is controlled by the height of the left pane since there is static content in there, mainly my navigation menu.
any advice?
as far as I test it when you add content then the div start from the left side. This happens because you didn't set width. for example add width:200px for #files_right_pane and check the results.
live example: http://jsbin.com/udori5
Set Your div position as relative
<div id="files_right_pane" style="position: relative;">ajax content</div>
Easiest fix is add float:left to content-fill