As you can see here: http://jsfiddle.net/kralco626/3BYDu/
The icon does not show up when you use display:inline
How do I get around this?
Useui-icon, before of the ui-icon-ICON and use the CSS display:inline-block should work properly
<span class="ui-icon ui-icon-home" style="display: inline-block"/>
<table>
<thead>
<th>
<div style="float:left">My Header</div>
<div style="float:left" class="ui-icon ui-icon-triangle-1-n"></div>
</th>
</thead>
</table>
Edit for formatting.
Well, I guess you could try inline-block instead of inline.
Related
I'm beginning a web app using Materialize CSS v0.97, jQuery Mobile v1.4.5, and jQuery v2.1.4.
I'm trying to use the mobile collapse tutorial to have a navbar in the jQuery Mobile header, which on mobile devices changes to a hamburger button with the menu appearing when clicked.
When I resize my browser (Chrome, latest on Mac v10.11) to mobile size, the hamburger appears but clicking or hovering or anything does not make the menu appear.
The only thing I have changed was commenting out a line in jQuery Mobile JS because of this post about how to fix the Chrome security warning.
Could that be why the nav bar isn't working? My site doesn't load at all with the below code because of that warning, so I have everything js and css saved locally with relative links to them. But this snippet worked in the snippet preview...
$( document ).ready(function(){
$(".button-collapse").sideNav();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<div data-role="page" id="home">
<div data-role="header">
<nav>
<div class="nav-wrapper">
Logo
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
</div>
</nav>
</div>
<!-- /header -->
<div role="main" class="ui-content">
<table class="centered">
<thead>
<tr>
<th data-field="collection">Collection</th>
<th data-field="description"></th>
<th data-field="progress"></th>
<th data-field="link"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Stuff 1</td>
<td>Description of things in Stuff 1. Stuff 1 is really great, ya know? So much stuff in it.</td>
<td></td>
<td><i class="material-icons">chevron_right</i></td>
</tr>
<tr>
<td>Stuff 2</td>
<td>Description of things in Stuff 2. Stuff 2 is really great, ya know? So much stuff in it.</td>
<td></td>
<td><i class="material-icons">chevron_right</i></td>
</tr>
<tr>
<td>Stuff 3</td>
<td>Description of things in Stuff 3. Stuff 3 is really great, ya know? So much stuff in it.</td>
<td></td>
<td><i class="material-icons">chevron_right</i></td>
</tr>
</tbody>
</table>
</div>
<!-- /content -->
</div>
<!-- /page -->
</body>
Such is life -- as soon as I complain, the next thing I try works.
I kept the above code and only changed the jQuery Mobile import to point to the local, edited version, and now it runs in Chrome and the menu works.
Most likely something's messed up with me localizing the rest of the dependancies, but for now I'm good.
I am using asp.net mvc 4 and jqGrid. Is it possible to add more than 1 jqGrid to the same page? if so, could you tell me how? I have two jgGrid, both in the same page, but one appears in one tab and the another in another tab. I have a jquery ui tab. My problem is that only one is shown, the another not. Any ideas what's wrong?
<div id="jqGrid" class="jqGrid">
#Html.Partial("../Grids/_ComponentGrid")
</div>
<div id="jqGridCapsules" class="jqGrid">
#Html.Partial("../Grids/_CapsuleGrid")
</div>
Partial views:
../Grids/_ComponentGrid:
<table id="_componentGrid" cellpadding="0" cellspacing="0">
</table>
<div id="_componentPager" style="text-align: center;">
</div>
../Grids/_CapsuleGrid:
<table id="_capsuleGrid" cellpadding="0" cellspacing="0">
</table>
<div id="_capsulePager" style="text-align: center;">
</div>
I have debugged it with Internet explorer and as I can see, it seems like jqGrid is being applied correctly for first (I post main div, within them there are others divs nested):
<div class="jqGrid" id="jqGrid">
<div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" id="gbox__componentGrid" style="width: 790px;" dir="ltr">
<div class="ui-widget-overlay jqgrid-overlay" id="lui__componentGrid"/>
<div class="loading ui-state-default ui-state-active" id="load__componentGrid" style="display: block;">
<div class="ui-jqgrid-view" id="gview__componentGrid" style="width: 790px;">
<div class="ui-jqgrid-resize-mark" id="rs_m_componentGrid">
<div class="ui-state-default ui-jqgrid-pager ui-corner-bottom" id="_componentPager" style="width: 790px; text-align: center;" dir="ltr">
</div>
However, for second is not being applied as generated code is:
<div class="jqGrid" id="jqGridCapsules">
<table id="_capsuleGrid" cellspacing="0" cellpadding="0">
<div id="_capsulePager" style="text-align: center;">
as you can see for second, the code generated is completely different from the first. It should be the same as first. So it seems like jqGrid style is not being applied to the second one, Why? What's happening? any ideas, please?
<tr bgcolor="#FFFFFF">
<td>
<div align="center">
<font face="Arial" size="2">1</font>
</div>
</td>
<td>
<div align="left">
<font face="Arial" size="2">
<a href="displayCompany.php?name=AAMRATECH " target="_self" class="ab1">AAMRATECH
</a>
</font>
</div>
</td>
i have an html file like this. from where i want to retrieve the company name, share price and other values. there isn't any id or name attribute to retrieve this information easily. can you suggest me how to do this?
N.B. i want to use javascript/ jquery / php framework.
In general, seeing you dont say anything about a language or a more specific situation, you can use XPath to select the values you want.
I'm using the twitter boot-strap library within groovy grails and can currently get both modals and dropdowns to work, but not one inside the other. Here's the code I'm writing, it's so close, when I click on something inside of the dropdown, a psuedo modal shows up, it turns the screen black (transparency included in modals) but doesn't display the box with the info I supplied. Also I've noticed upon further inspection with firebug that only the first set of modals are made but the rest aren't, I'm confused why this is the case. Can anyone help?
Code:
<table>
<thead>
<tr>
<g:sortableColumn property="name" title="${message(code: 'course.name.label', default: 'Name')}" />
<g:sortableColumn property="description" title="${message(code: 'course.description.label', default: 'Description')}" />
</tr>
</thead>
<tbody>
<g:each in="${courseInstanceList}" status="i" var="courseInstance">
<tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
<td>
<ul class="nav nav-pills">
<li class="dropdown" id="menu${courseInstance.id}">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu${courseInstance.id}">
${courseInstance.name}
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<g:each in="${courseInstance.hasMany}" var="param">
<a data-toggle="modal", href="#myModal${courseInstance.id}${param.getProperties().key}", id="${courseInstance.id}${param.getProperties().key}">${param.getProperties().key}</a>
<div class="modal" id="myModal${courseInstance.id}${param.getProperties().key}">
<div class="modal-header">
<a class="close" data-dismiss="modal">x</a>
<h3>Students in ${courseInstance.name}</h3>
</div>
<div class="modal-body">
<g:javascript>
$('#myModal${courseInstance.id}${param.getProperties().key}').modal({
keyboard: true
})
$('#myModal${courseInstance.id}${param.getProperties().key}').modal('hide')
</g:javascript>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</li>
</g:each>
</td>
<td>${fieldValue(bean: courseInstance, field: "description")}</td>
</tr>
</g:each>
</tbody>
</table>
There is a missing <li> element between the g:each and the a reference...but this should not be the point.
I'am using bootstrap with grails too, and I also use a modal within a navbar dropdown button, it works (but takes me several hours...).
I dont know for sure that it matters but i render the modal template outside of the dropdown. I also set the javascript to "modalize" the dialog below the modal div (not inside the modal-body).
Are you sure that everywhere the expression: myModal${courseInstance.id}${param.getProperties().key} is evaluated to same?
Also make sure that you dont import the modal.js manually (it is already imported in bootstrap.js). This caused some weird behaviour.
I'm using <div class="modal hide fade" id="..."> for the modal. This auto hides the div and adds some nice fade transitions (requires transitions.js).
Then the code reduces to: $('#...').modal({
keyboard: true,
show : false
})
Maybe some of these tips helps...
M.
I'm using jQuery UI icons in a table and they take up the size of the table cell, which is elongated horizontally.
Q: What html/css is necessary to make the icon have the same width as it's height?
Here's what I have so far:
<td class="delete">
<div class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-circle-minus"></span>
</div>
</td>
If the result you are expecting is the icon wrapped in a rounded box then you have to do set the container div a width of 16px, like here:
http://jsfiddle.net/marcosfromero/n2tYP/
#wanted .delete div {
width: 16px;
}
Not entirely sure if this is what you want, but maybe you need to set the behaviour of the div so that it does not fill 100%. Like this:
<table>
<td class="delete">
<div class="ui-state-default ui-corner-all" style="display:table">
<span class="ui-icon ui-icon-circle-minus"></span>
</div>
</td>
</table>
The div's display style is changed so that it does not scale to full width.
I can't tell if you want a jQuery specific answer or just a css answer. Since I don't know the former here's the latter. If you want to limit the width to known pixels and have the height adjusted so that it maintains the proper aspect ratio, a style like
img{width=32px; height= auto;}
should do the trick. Since most icons are square and of known size I would think
img{width=32px; height=32px;}
would work out too.
I don't understand. Are you sure some other CSS in your page isn't causing this problem?
jQuery UI CSS uses the background-image property to display images, and generally those images shouldn't be "taking up the size" of its parent.
I put together a quick jsFiddle with the following contents:
Dependencies:
jQuery 1.5.1
jQuery UI 1.8.9
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css
HTML:
<table>
<tr>
<td class="delete">
<div class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-circle-minus"></span>
</div>
</td>
<td class="delete">
<div class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowthick-1-w"></span>
</div>
</td>
</tr>
</table>
<br />
<table>
<tr>
<td class="delete">
<div class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-circle-minus"></span>
Hello
</div>
</td>
<td class="delete">
<div class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowthick-1-w"></span>
world!
</div>
</td>
</tr>
</table>
CSS:
/* Extend the width ... */
td.delete { width: 100px; }
And it came out looking fine in Google Chrome:
Is there a particular browser this is happening on for you? Can you provide a concrete example?