Hey thanks for checking out my question, I am trying to create headers in ng-grid with an ng repeat but horizontally. I am able to the ng-repeat working but the items are repeating vertically. Is it possible to make them horizontal?
Here is my template:
headerCellTemplate: '<div ng-repeat="day in dayInfo" ng-class="col.colIndex()" >{{day.dayId}}</div>'
These elements are repeating vertically because you are using div's, which are block-level elements. To solve this, you can change your template to use an inline element like span:
<span ng-repeat="day in dayInfo" ng-class="col.colIndex()" >{{day.dayId}}</span>
You could use either add a CSS rule that styles these div's as inline or inline-block, but using span's is probably easiest.
Related
I am very new to CSS..
I would like to know if there is a way to dynamically position a div element based on the length of the previous div element.
Example:
<div id="A">
</div>
<div id="B">
</div>
<div id="C">
</div>
If these div elements were full width each and i want one to come after the other based on the length of the previous one without adjusting the length on the top property myself.
Is this possible or is there any top value that can be used?
Thank you so much.
As of now, there is no way that you can style a div (or any other element for that matter) dynamically on the basis of a previous element. But you have some options here -
either you can use Javascript to manage the styles of elements dynamically, or,
you can use CSS FlexBox Model or CSS Grid to position and change height/width of elements, which is highly recommended and super powerful for making any layout of your choice.
Here are some places which I used to learn flexbox -
freeCodeCamp flexbox tut
Brad Traversy flexbox crash course
Now for CSS grid-
Brad Traversy CSS Grid
freeCodeCamp CSS Grid
I have a clickable grid in which the cells toggle colour on clicking. I need to put some numbers along the borders of the grid. What is the best way to include that?
Final result should look like
4
1 5 3
1,2 [][][]
1,4,5 [][][]
1,3 [][][]
Here is my JSfiddle without the surrounding numbers.
Would using the existing table cells work as in https://jsfiddle.net/z9shwh0q/ If not you could create another table next to it and place these tables in a few wrappers.
<div class="top-key"
TOP KEY ETC
</div>
<div class="left-key">
TABLE FOR LEFT KEY ETC
</div>
<div class="clickable-table">
CURRENT TABLE
</div>
Then you would us CSS to postion these
I would define extra row / column which would be styled differently, and added distinct class (so you can avoid attaching listeners to these), pretty much like #Aly Sebastien outlined.
Then have your custom numbers in them.
If you want to create even smaller footprint, you could attach :before pseudos with content, and position them via css on the edges (see Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery)
I am using ngInfiniteScroll to enable infinite scrolling on my website. In order to get it to work I have had to set the height of the outer div to a value as shown below. If I don't do this the Infinite Scroll feature is triggered
<div style="height: 1px">
<post post-item="item" feed-items="items.feed" feed-name="feedName" ng-repeat="item in items.feed"></post>
<a style="bottom-padding 7%" infinite-scroll="nextPosts()" infinite-scroll-distance="1" href ng-click="nextPosts()" class="show-more">No more posts to show </a>
</div>
However, setting the height:1px kind of screws up my css styling and I feel like it is technically cheating, especially since I have to do the bottom-padding on the
Does anybody know a way I can get the Infinite Scroll to not be triggered on all scrolling events without using the style="height: 1px
I have already looked at this post but it has not really helped. How do you keep parents of floated elements from collapsing?
Thanks!
http://binarymuse.github.io/ngInfiniteScroll/documentation.html
Typically, you will use the infiniteScroll directive on an element
that contains another element that uses ngRepeat to show a series of
elements based on an array (or object); the expression you pass in to
the infinite-scroll attribute will generally add additional elements
to the array, expanding the ngRepeat.
maybe you could try the base example:
<div infinite-scroll="nextPosts()">
<post post-item="item" feed-items="items.feed" feed-name="feedName" ng-repeat="item in items.feed"></post>
</div>
I have css animations working based on the ng-show directive in Angular.
I'm trying to add ng-if directives to help me reduce the number of DOM elements in my page by removing hidden parts of it.
<div class="some classes" ng-show="isActive()" ng-if="isActive()">
<div class="other elements">
...
</div>
</div>
The problem is that the ng-if removes the element before it gets the chance to disappear "nicely".
The animation is a rollingUp/Down sort of animation and the outer div has a variable height dependent on the content of the inner div. I tried moving the ng-if down, but the problem stays the same as the height suddenly becomes 0 once the ng-if is true.
What would be the (best) strategy to achieve this? My main goal is to reduce the number of elements without sacrificing the animations.
(I'm using angular 1.2.0)
I am trying to put text on top and img in bottom in the container.
align bottom isnt working
<th id="ship_method" colspan="1" rowspan="1">
<div style="vertical-align:top;">Ship Method</div>
<div style="vertical-align:bottom;">
<img src="unsortImg.png">
</div>
</th>
The vertical-align style only applies to the container element (in this case the <th>), not the element you're trying to align. So you can't use vertical-align to align two elements differently in the same container.
Instead, you can use absolute positioning to place your two elements in the top and bottom. Be sure to make your container position:relative. Check out the demo here: http://jsfiddle.net/8qUeD/
Additionally to #tb11's answer: There is a good change you don't need to actually align your texts like this, but just have them look like they are.
Considering the "lower" content is an image, you could include it as a background image instead and add padding, to that the text doesn't overlap it.
Alternatively, tell us, what is the bigger picture here? What is your overall design? What are the contents/images you want to display here? Is this actually a data table or are you using the table for layout? If you give more details like this, we can give better suggestions.