Materialize collection secondary bottom not aligning properly - html

I am trying to align a button properly as a secondary content within a collection. However, no matter what I try, I cannot get the button centered. See image below:
Current Layout
Code snippet:
<div class="section">
<ul class="collection with-header">
<li class="collection-header">
<h5>Drawing basics</h5>
</li>
<li class="collection-item">
<div>Public Policy and the Community<i class="material-icons">delete</i><a href="#!" class="secondary-content"><i class="material-icons">edit</i><a href="#!" class="secondary-content"><i class="material-icons">remove_red_eye</i></div>
</li>
<li class="collection-item">
<div> Introduction to Geology Studies
<button class="btn waves-effect waves-light right"> Create
</button>
</div>
</li>
<li class="collection-item">
<div> Global Perspective<i class="material-icons">delete</i><a href="#!" class="secondary-content"><i class="material-icons">edit</i><a href="#!" class="secondary-content"><i class="material-icons">remove_red_eye</i></div>
</li>
</ul>
</div>
What can I do to solve this? I've tried almost everything.

Well I couldn't get it to work as I'd like to but it works with this hardcode....
.fix{
float: right;
margin-top: -8px;
}
https://jsfiddle.net/ggcewqaL/2/

Maybe this answer is a bit late but here is the fix without the need for an additional CSS class.
<ul class="collection with-header">
<li class="collection-header"><h4>Drawing basics</h4></li>
<li class="collection-item"><div>Public Policy and the Community<i class="">remove_red_eye</i></div></li>
<li class="collection-item">
<div>Introduction to Geology Studies
Create
</a>
</div>
</li>
<li class="collection-item"><div>Global Perspective<i class="material-icons">remove_red_eye</i></div></li>
</ul>
I just added an anchor tag inside the second div and styled it with .btn class
Create
I hope this would be helpful for someone at least!

Related

What does the data-option-value attribute do?

I am looking at the code for a gallery page. It is able to filter the type of media displayed (video, image, etc) and as far as I can see, it does this with the data-option-value attribute.
I cannot find any documentation explaining the functionality, application or anything else really about the data-option-value attribute.
Any help in explaining what this attribute is, what it does or how it assists in filtering the displayed media would be helpful.
Here is the code:
<ul class="nav nav-pills sort-source" data-sort-id="gallery" data-option-key="filter">
<li data-option-value="*" class="active"><i class="fa fa-th"></i> <span>Show All</span></li>
<li data-option-value=".images"><span><i class="fa fa-image"></i> Images</span></li>
<li data-option-value=".videos"><span><i class="fa fa-video-camera"></i> Videos</span></li>
<li data-option-value=".links"><span><i class="fa fa-link"></i> Links</span></li>
<li data-option-value=".sliders"><span><i class="fa fa-desktop"></i> Sliders</span></li>
</ul>
Here is one of the code for one of the images in the gallery:
<li class="col-md-3 col-sm-6 col-xs-6 grid-item gallery-grid-item links format-link">
<img src="http://placehold.it/600x400&text=IMAGE+PLACEHOLDER" alt="">
</li>
Anything starting with data-* is a custom HTML attribute that the author added to the HTML element to do something with it in JS.
Example:
<div id="mydiv" data-width="500" data-content="Hello World" data-favoritecolor="green"></div>
In short, you'll have to take a look at the JS, search for getAttribute("data-option-value")

Navbar width could not be changed

I am unable to ascertain what attribute is fixing the width of the navbar, so as to reduce it from the borders. The CSS is too big so I had to use JSfiddle
<nav id="NAV_1">
<ul id="UL_2">
<li id="LI_3">
Home
</li>
<li id="LI_5">
About
</li>
<li id="LI_7">
Blog
</li>
<li id="LI_9">
Freebies
</li>
<li id="LI_11">
Resources
</li>
<li id="LI_13">
Start a Blog
</li>
<li id="LI_15">
Shop
</li>
</ul>
</nav>
Why does #UL_2 have margin: 0px 543.031px;? That's where your whitespace is coming from. Removing the margin is enough to make the navbar display as normal:
http://jsfiddle.net/vicvipe/tbq0nhk1/
Line 83 in the CSS.
margin: 0px 543.031px;

Style not rendering in innerHTML in Angular2

I am developing a page in Angular2/4 which has a left navigation bar. I put this left menu in a separate component and nesting this in the main component. Reason being I need to reuse this left menu in multiple pages/ components, however, different page will have different menu items. So, I am trying to pass the menu items from the main component through #Input() binding:
sidebar.component.ts:
#Component({
selector:'sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent{
#Input() innerContent:string;
....
sidebar.component.html:
<div id='mySidebar' class='sidebar-primary sidebar-animate' [class.sideBarShow]='isSideBarShow'
[class.sideBarHide]='!isSideBarShow' >
<ul class='goo-collapsible' style="margin-bottom:0px" >
<li class='header'><!--Common header in left menu-->
<div class='glyphicon glyphicon-arrow-left' style='float: left; width: 33%;padding-left:5px;cursor:pointer;' (click)='editTheme()'></div>
<div class='glyphicon glyphicon-search' style='float: left; width: 34%;cursor:pointer;'></div>
<div class='glyphicon glyphicon-remove' style='float: left; width: 33%;cursor:pointer;' (click)='sideBarClose()'></div>
</li>
</ul>
<ul class="goo-collapsible" style="margin-bottom:0px" [innerHTML] = "innerContent"><!--This should hold menu items depending upon main page-->
</ul>
</div>
mainpage.component.html:
-------------------------
sidebar [isSideBarShow]="isSideBarShowShared" [innerContent] =
"viewLayout" (notify) ="onNotify($event)"></sidebar>
mainpage.component.ts
-----------------------
....
ngOnInit() {
//this.nav.hide();
this.viewLayout = `<!li class='dropdown'><a (click)='changeHeaderTextAlign()'><span class='icon-table'></span> Top Navigation Bar</a>
<ul>
<li ><a href='#'>Content</a></li>
<li ><a href='#'>Comments</a></li>
<li ><a href='#'>Tags</a></li>
</ul>
</li>
<li><a href='#'><span class='icon-folder-open'></span><input type='color' value='#999999' (input)='headerColorChange($event)'> Header Image with Text</a></li>
<li class='dropdown'><a><span class='icon-user'></span><input type='range' min='0.1' max='1' step='0.1' (change)='setHeaderOpacity($event)'> Page Section</a>
<ul>
<li ><a href='#'>Group</a></li>
<li ><a href='#'>User</a></li>
</ul>
</li>
<li><a (click) = 'addDynamicComponent()'><span class='icon-cogs'></span> Footer and Social Media</a>
</li>`;
}
What I am seeing is that the style is being dropped from the innerHTML. I followed following instructions, but no luck:
Angular2 innerHtml binding remove style attribute
I learned that accessing DOM directly is not recommended in angular2 but any better/ recommended approach for this scenario? Any help would be very much appreciated!!
regards
The thing you are trying to achieve by innerHTML can also be done using ng-content which will enclose the specific component html in your sidemenu html.
Your sidemenu.html should look like this
<div id='mySidebar' class='sidebar-primary sidebar-animate' [class.sideBarShow]='isSideBarShow'
[class.sideBarHide]='!isSideBarShow' >
<ul class='goo-collapsible' style="margin-bottom:0px" >
<li class='header'><!--Common header in left menu-->
<div class='glyphicon glyphicon-arrow-left' style='float: left; width: 33%;padding-left:5px;cursor:pointer;' (click)='editTheme()'></div>
<div class='glyphicon glyphicon-search' style='float: left; width: 34%;cursor:pointer;'></div>
<div class='glyphicon glyphicon-remove' style='float: left; width: 33%;cursor:pointer;' (click)='sideBarClose()'></div>
</li>
</ul>
<ul class="goo-collapsible" style="margin-bottom:0px">
<!--This should hold menu items depending upon main page-->
<ng-content></ng-content>
</ul>
</div>
You application-main.component.html or any file where you want to include sidemenu comeponent should be like this :-
<div>
..... Blah Blah whatever page component html
<sidebar [isSideBarShow]="isSideBarShowShared" (notify)="onNotify($event)">
<!---- Whatever goes inside the component tag , is part of ng-content ---->
<!li class='dropdown'><a (click)='changeHeaderTextAlign()'><span class='icon-table'></span> Top Navigation Bar</a>
<ul>
<li ><a href='#'>Content</a></li>
<li ><a href='#'>Comments</a></li>
<li ><a href='#'>Tags</a></li>
</ul>
</li>
<li><a href='#'><span class='icon-folder-open'></span><input type='color' value='#999999' (input)='headerColorChange($event)'> Header Image with Text</a></li>
<li class='dropdown'><a><span class='icon-user'></span><input type='range' min='0.1' max='1' step='0.1' (change)='setHeaderOpacity($event)'> Page Section</a>
<ul>
<li ><a href='#'>Group</a></li>
<li ><a href='#'>User</a></li>
</ul>
</li>
<li><a (click) = 'addDynamicComponent()'><span class='icon-cogs'></span> Footer and Social Media</a>
</li>
</sidebar>
</div>
Also you can put multiple ng-content in a component using [select] attribute.
<ng-content select="[header]"></ng-content>
And in the other component file using it, just on the parent html tag give the name assigned in select as an attribute to the tag like this..
<div header> Blah blah..... </div>

Creating multiple links inside a href

This is the a litle piece from a menu:
<li>Some Text
Now I want that after SOME TEXT to be 1 2 3 and when I click 1 2 3 to link me to another link, it has to be inside the >Some Text </a>.
Some ideas?
I'm not sure if that's what you are searching for:
<ul id="mega-menu-1" class="mega-menu">
<li>Products
<ul>
<li>Vehicles
<ul>
<li><a id="in_a_row" href="#">Coupe
<div class="cars">
<a class="car" href="#">1</a>
<a class="car" href="#">2</a>
<a class="car" href="#">3</a>
</div>
</a></li>
</ul>
</li>
</ul>
</li>
</ul>
For styling of the elements you can use this CSS code:
.cars,
.car,
#in_a_row
{
display: inline !important;
}
Use !important to overwrite styles which have been defined by the plugins CSS file.
Here you can grab the source code. Just replace the index.html of the plugin with that code.

JQueryMobile 1.1.1 List items not anchoring to the left

I'm trying to create a simple thumbnail list, the code is pretty much copied off jqm docs pages. However, when I use the code below the button element of the list isn't anchored to the left of the list item and instead appears centered...Can anyone help me? It's driving me crazy!
I haven't got any styles in other than what is in the jquerymobile default page template
<div id="listDiv" class="ui-content" data-role="main">
<div id="listInformation" data-role="content-primary">
<ul id="swipeMeChildrenList" data-role="listview" class="ui-listview">
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="index.html" class="ui-link-inherit">
<img src="images/album-p.jpg" class="ui-li-thumb">
<p>Ha</p>
</a>
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
</div>
</li>
</ul>
</div>
</div>
What code do you use to generate your list from? A simple list will be specified like this:
<ul data-role="listview">
<li>
<a href="index.html">
<img src="images/album-p.jpg" />Ha
</a>
</li>
</ul>
jQuery Mobile will take care of adding all the necessary classes depending on the platform.
I suggest opening a new document and using the defaults from that page, ie
<ul data-role="listview">
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a></li>
</ul>
Then if that works, piece by piece replace the code with yours until it breaks, that should isolate the issue.