Can't figure out a way around this...
I have a header (H1 tag) whose value is dependent on a variable. This header also has an icon in it. The following code displays the header text, but the icon is gone. I can understand why... the th:text is replacing everything in the tag. Is there a way to keep the icon and have a dynamic header?
Here is the code:
<h1 class="ui header" th:text="${'Widget ' +widget.id}"><i class=" ui grey cog icon"></i>Default Text</h1>
If I remove the th:text="${'Widget ' +widget.id}" piece the icon comes back.
Any thoughts?
Thanks, Keith
The th:text attribute will replace everything in the body of the <h1> tag.
You can put the text in a separate <span> instead:
<h1 class="ui header"><span th:text="${'Widget ' +widget.id}"></span><i class=" ui grey cog icon"></i>Default Text</h1>
Related
When creating some clickable dropdowns, I noticed the dropdown menu will hide behind any clickable dropdown buttons if they overlap. Here is an example
How can I fix this? Here is the code used to create the dropdown.
<div class="w3-container">
<div class="w3-dropdown-click">
<button onclick="myFunction()" class="w3-btn">Click Me!</button>
<div id="Demo" class="w3-dropdown-content w3-border">
Link 1
Link 2
</div>
</div>
</div>
I also made a fiddle, but it doesn't seem to be working: https://jsfiddle.net/n2fole00/99d8d7pj/
BTW, would this be considered a bug?
Thanks.
Based on Tony Hensler's comment, it was the z-index.
<div id="<?php echo $course->course_id; ?>" class="w3-dropdown-content w3-border" style="right:0; z-index:1;">
I just added z-index:1 to the w3-dropdown-content div as an inline style for the fix.
Thanks Tony.
Using Jquery-mobile, the following (abbreviated here) footer
<div data-role="footer">
<a href="#table" data-role="button" data-icon="plus"
data-iconpos="left" class="ui-btn-left">Open</a>
<a href="#" data-rel="back" data-role="button" data-icon="delete"
data-iconpos="notext" class="ui-btn-right">Close</a>
</div>
that exist in a popup, when popped-up, its buttons
are displayed outside the popup-frame, aligned under it.
Why? What am I doing wrong?
The full example is in http://jsfiddle.net/yotam/d0aqmx6m/
I'm beginning to wonder if button footers are not supported in popups. Or at least, not fully supported. From the docs, you need to throw a "ui-title" in there too - it's what will give the footer height (The docs show a span after the button definitions).
I've done that here:
<div data-role="footer">
Open
Close
<span class="ui-title"></span>
</div>
See: http://jsfiddle.net/had4or71/
Of course, it only partially solves your problem, as though they are now in the footer, they don't yet look good. I tried with a navbar in the footer with similarly disappointing results (the navbar was well positioned top, bottom, and left, but ran over the right border pretty badly.
Finally, I did this version real quick as well:
http://jsfiddle.net/ph0e54ee/2/
Which shows pushing the close button into the header like the demos site does, and just presenting your open button inline as a standard button - alas, it's a compromise, and not what you asked for.
On further investigation, it would appear the "ui-btn-left" and "ui-btn-right" classes are not supported in the footer, see:
gh:6331
gh:6872
gh:6137 (comment)
Again, I messed about with the CSS a bit, and managed to get something sort of nice, at least on my test browser of chrome. I suspect your mileage will vary greatly outside of chrome.: http://jsfiddle.net/9crnjakr/
The documentation says
The footer bar has the same basic structure as the header except it uses the data-role attribute value of footer.
But this fiddle shows that I can't put controls in the footer the same way as I can the header.
Q: How can I write a footer such that there is text followed by an h1 tag followed by text, and they are all on the same line?
You can use the same classes jQM applies to the header elements (ui-btn-left, ui-title, ui-btn-right):
<div data-role="footer">
<a href="JavaScript:;" class="ui-btn-left" >c</a>
<h3 class="ui-title">Footer</h3>
<a href="JavaScript:;" class="ui-btn-right" >d</a>
</div>
Here is your updated fiddle: http://jsfiddle.net/ezanker/mXjHJ/86/
I'm trying to put a help icon from jquery ui next to a input field. I get a button with a question mark but no effect when I hoover over it.
<span class="ui-state-default ui-corner-all ui-icon ui-icon ui-icon-help"></span>
Also, the questionmark is not yellow like is not yellow like it is in the demo. I have all the files.
What am I missing?
Dynamically injecting buttons into JQM footers seems to be an exercise in frustration. Anyone have a clue how to apply proper formatting for this? Here are several anomalies I found trying to do this:
Multi-column button grids are not properly formatted in the footer
data-corners="false" attribute (to get flush buttons) does not apply to the first and last buttons in the footer
With data-role="controlgroup" data-type="horizontal" for the footer buttons, if there are too many buttons to fit in one row the styling looks weird (since some buttons will have rounded corners, others will not)
If data-role="controlgroup" data-type="horizontal" are omitted for the footer buttons, buttons may be rendered partially off the screen...
In general - argh!!!! Anyone have any success dynamically injecting buttons into a footer? If so, would much appreciate to hear how this was achieved.
Thanks!
Would something like this work:
http://jsfiddle.net/eznh8/7/
JS
$('#addButtonName').click(function() {
var theFooter = $('#addMoreButtons');
var buttonName= $('#newButtonName');
if(buttonName.val() != '') {
theFooter.append(''+buttonName.val()+'');
buttonName.val('');
$('#theHomePage').trigger('create');
}
});
HTML
<div data-role="page" id="theHomePage">
<label for="basic">Button Name:</label>
<input type="text" name="newButtonName" id="newButtonName" value="" />
Add New button
<div data-role="footer" class="ui-bar" id="addMoreButtons">
</div>
</div>
Multi-column button grids are not properly formatted in the footer - this is my response to that.
One thing to check if you are using controlgroup with a href links - make sure your each of the links in the control group has the following CSS;
vertical-align:top;
You will also have to get more control over how the elements look if you are styling them as buttons. I posted a similar discussion over here:
https://forum.jquery.com/topic/jquery-mobile-horizontal-control-groups-creating-a-custom-split-list
https://forum.jquery.com/topic/css-code-to-help-control-entire-button-in-a-jquery-mobile-theme
Hope that helps.