My yellow-div jumps down when text in it get a little long. See imagesofproblem.
<html>
<div style="background-color:#00ff00; width:200px;">
<ul style="list-style:none;">
<li><span style="margin-right:5px;">></span><div style="display:inline-block; background-color:yellow;">Hit me! Hit me! -Hit me! -</div> </li>
</ul>
</div>
</html>
How can I make sure, that the yellow-div not jump down, when text get long. Log text should automatically get brokken to a new line.
(Is it possible to solve this problem without putting "width" to yellow div)
You can use Flexbox to achieve your desired result (if that is an option).
<div style="background-color:#00ff00; width:200px;">
<ul style="list-style:none;">
<li style="display:flex;"><span style="margin-right:5px;">></span><div style="display:inline-block; background-color:yellow;">Hit me! Hit me! -Hit me! -</div> </li>
</ul>
</div>
Edit: Here's a version with your margins in place
<div style="background-color:#00ff00; width:200px;">
<ul style="list-style:none;">
<li style="display:flex;"><span style="margin-right:5px;">></span><div style="display:inline-block; background-color:yellow; margin:2px 0 20px;">Hit me! Hit me! -Hit me! -</div> </li>
</ul>
</div>
Try to change display:inline-block to inline like this:
<html>
<div style="background-color:#00ff00; width:200px;">
<ul style="list-style:none;">
<li><span style="margin-right:5px;">> <span style="display: inline; background-color:yellow;"> Hit me! Hit me! -Hit me! -</span> </li>
</ul>
</div>
</html>
Related
I am trying to get a sidemenu to work on Materialize when should be very simple:
First I add the sidenav content to the page:
<ul id="slide-out" class="sidenav">
<li><div class="user-view">
<div class="background">
<img src="images/office.jpg">
</div>
<img class="circle" src="images/yuna.jpg">
<span class="white-text name">John Doe</span>
<span class="white-text email">jdandturk#gmail.com</span>
</div></li>
<li><i class="material-icons">cloud</i>First Link With Icon</li>
<li>Second Link</li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
Then I add the jquery code:
$( document ).ready(function() {
$('.sidenav').sidenav();
});
And finally the part where to problem is:
I have a nav which goes at the top of the page:
<nav>
<div class="nav-wrapper">
<img src="icon.png" alt="" />
<ul class="left hide-on-med-and-down" style="position: relative; left: 100px;">
<li>Trigger SideNav</li><!-- This is just not showing -->
</ul>
</div>
</nav>
For some reason this menu is not showing:
<li>Trigger SideNav</li>
unless I take this off it ... data-target="slide-out" class="sidenav-trigger"
How can I fix this?
In addition to what Moein said (the sidenav-trigger menu only appears when the page width is less than 993px), you can make it appear all the same adding the show-on-large class to your menu button.
Something like:
<nav>
<div class="nav-wrapper">
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Menu</li>
<li>Info</li>
</ul>
</div>
</nav>
as I know this is not a problem and the element that has sidenav-trigger class will be shown when the width of the browser is less than 993px. just resize your browser window width to reach less than 993px and see the result.
If it does not work:
I think the problem can be with the content of your link. replace the image with a text and try again.
For reputation reasons, I'm not allowed to comment. It'll work with the javascript code
document.addEventListener('DOMContentLoaded', function(){
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, {});
});
Instead of the code which is given in the official documentation you've to change this piece of code
M.Sidenav.init(elems, options);
with this
M.Sidenav.init(elems, {});
With the official javascript code you'll notice that there's an error in the console when you load the page.
For some weird reason i cant change the background of the entire list item even though i selected the list.
Here is the code:
<div class="project-item" ng-controller="openProjectsCtrl">
<ol>
<li class="list-item" ng-repeat="project in projects | orderBy:'Posted' : true">
<h4>{{project.Title}}</h4>
{{project.Skills}}
<span class="col-md-6">{{project.Budget}}</span>
<span class="col-md-6 timestamp">{{project.Posted|timeago}}</span>
</li>
</ol>
</div>
<style>
.project-item>ol>li:hover {
background-color: #eee;
}
</style>
The code you posted works fine. See this example.
.project-item>ol>li:hover {
background-color: #eee;
}
<div class="project-item" ng-controller="openProjectsCtrl">
<ol>
<li class="list-item" ng-repeat="project in projects | orderBy:'Posted' : true">
<h4>{{project.Title}}</h4>
{{project.Skills}}
<span class="col-md-6">{{project.Budget}}</span>
<span class="col-md-6 timestamp">{{project.Posted|timeago}}</span>
</li>
</ol>
</div>
This code seems to work.
Change the colors its pretty hard to see a gray color on a white background.
.project-item ol li:hover {
background-color: firebrick;
}
<div class="project-item" ng-controller="openProjectsCtrl">
<ol>
<li class="list-item" ng-repeat="project in projects | orderBy:'Posted' : true">
<h4>{{project.Title}}</h4>
{{project.Skills}}
<span class="col-md-6">{{project.Budget}}</span>
<span class="col-md-6 timestamp">{{project.Posted|timeago}}</span>
</li>
</ol>
</div>
I resolved the issue by removing float left on first span and just having a float right. That seemed to work.
I'm trying to give a different background-color to my button when it is active. The HTML code is as below.
<div class="tabs">
<div class="tab-content">
<div id="tab1" class="tab active">
<!-- some content -->
</div>
<div id="tab2" class="tab">
<!-- some content -->
</div>
<div id="tab3" class="tab">
<!-- some content -->
</div>
<ul class="tab-links">
<li class="active">
<a href="#tab1"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON ACTIVE</p></p></a>
</li>
<li>
<a href="#tab2"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON</p></p></a>
</li>
<li>
<a href="#tab3"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON</p></p></a>
</li>
</ul>
</div>
</div>
I used both this codes in my CSS files and i didn't sow nothing happened:
This is the CSS code for my project:
.cmimet_ne_vite:active
{
background:#787878;
}
.cmimet_ne_vite.active
{
background:#787878;
}
So who knows were is the problem to help me resolve it?
You have no element with both classes "cmimet_ne_vite" and "active". Instead you have a .cmimet_ne_vite element which is a descendant of your .active element, so instead of .cmimet_ne_vite.active you'll need to use:
.active .cmimet_ne_vite {
background:#787878;
}
Furthermore, you cannot wrap two <p> elements within each other. The browser will render this as two separate elements. Change:
<p class="arrow-up">
<p class="cmimet_ne_vite">BUTTON</p>
</p>
To:
<p class="arrow-up">
<span class="cmimet_ne_vite">BUTTON</span>
</p>
Or something similar.
Finally, if this element is intended to be used as a button you'll need to give it a role attribute set to "button":
<span class="cmimet_ne_vite" role="button">BUTTON</span>
Attempt 1
<div class="bs-docs-example">
<ul class="nav nav-tabs">
<li class="active">Homeaaa</li>
<li>Profilefff</li>
<li>Messagesbbb</li>
</ul>
</div>
JSfiddle
I have also tried setting a data-toggle attribute to "tab", but that only allowed me to click between tabs, it didn't separate the aaa/fff/bbb into different tabs.
This should be possible to be done without any JavaScript.
Attempt 2
The closest I've gotten to a working one is:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Stir
</li>
<li>
Drink
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="ter">fff</div>
<div class="tab-pane" id="gin">ggg</div>
</div>
</div>
JSfiddle
But this didn't change the URL of the viewer to /#ter or /#gin on click. Also it doesn't seem to work normally in the fiddle...
Your jsFiddle works as expected -- anchor links take you to #gin and #ter. On the other hand, I believe you need to use some JavaScript to actually change the active tab. Here's a try that uses a bit of jQuery:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Stir
</li>
<li>
Drink
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="ter">fff</div>
<div class="tab-pane" id="gin">ggg</div>
</div>
</div>
JavaScript:
$(document).ready(function() {
$(".nav-tabs li a").click(function() {
var li = $(this).parent("li");
var wch = this.getAttribute("href");
$(li).addClass("active"); //make current li active
$(li).siblings("li").removeClass("active"); //make others inactive
$(".tab-content div").removeClass("active"); //make all tabs inactive first
$(wch).addClass("active"); //activate our tab;
return false; //don't change URL
});
});
And a little demo: little link. Note that the use of jQuery isn't needed; you can easily convert to vanilla JavaScript if you want to avoid using it.
Hope that helped!
The page footer added as fixed icon based navbar. but when it come to display, naevbar converted to a grid layout. that is, three columns and two rows grid layout.
Following script I have used for footer nevBar,
<div data-role="footer" class="nav-footer" data-position="fixed">
<div data-role="navbar" class="nav-footer" data-grid="d">
<ul>
<li>H</li>
<li>M</li>
<li>A</li>
<li>T</li>
<li>S</li>
</ul>
</div>
</div>
but it render as follows.
<div class="nav-footer ui-bar-a ui-footer ui-footer-fixed fade ui-fixed-overlay" data-position="fixed" data-role="footer" role="contentinfo">
<div class="nav-footer ui-navbar" data-grid="d" data-role="navbar" role="navigation">
<ul class="ui-grid-b">
<li class="ui-block-a">XXX</div>
<li class="ui-block-b">...</div>
<li class="ui-block-c">...</div>
<li class="ui-block-a">...</div>
<li class="ui-block-b">...</div>
</ul>
</div>
</div>
Content of each li as follows.
XXX ==>
<li class="ui-block-a">
<a id="home" class="ui-btn ui-btn-icon-top ui-btn-up-a" data-icon="custom" href="#" data-theme="a">
<span class="ui-btn-inner">
<span class="ui-icon ui-icon-custom"></span>
<span class="ui-btn-text">H</span>
</span>
</a>
</li>
My output shows as two rows and three colomns grid. Please can you find the reason.
Check this out: http://jquerymobile.com/test/docs/buttons/buttons-grouped.html
<div data-role="controlgroup" data-type="horizontal"> your items </div>
You have specify the classes on your li elements to tell how many columns you want
<ul class="ui-grid-b">
<li class="ui-block-a">XXX</div>
<li class="ui-block-b">...</div>
<li class="ui-block-c">...</div>
<li class="ui-block-D">...</div> <--D here, column 4
<li class="ui-block-E">...</div> <--E here, column 5
</ul>
Default number of columns is three I guess, which is why the last two were pushed to the next row.