I have an unordered list with links. The links have display:block; in the css so the hover will also have effect in the padding surrounding the links. I replace the list-items with sIFR 3. In the sifr-config.js I specify a hover color for the text but this only works on the text itself, not on the padding surrounding the text. Is there a solution for this problem?
I got it working for the padding on the left side of the text by adding margin-left:'25' in the config for .sIFR-root but margin-right doesn't have the same effect. Help greatly appreciated ;-)
It's hard to say based on your question, but if you replace the individual list items, the entire list item will be a sIFR link. If you want more space around the text you should do this within the Flash movie rather than in CSS. You can use the tuneWidth, tuneHeight, offsetTop and offsetLeft parameters for this.
Related
On my jQuery Mobile page, i'm using a horizontal control group for some buttons.
But in some languages the text within these buttons is too long.
Instead of wrapping the text within each button, the buttons themselves wrap onto the next line.
this is the base code:
<div data-role="controlgroup" data-type="horizontal">
short button
really really really insanely long button is really really insanely long. No really, who makes buttons this big?
</div>
and with this css, we convince it to wrap inside the buttons. Otherwise the text is truncated with an ellipsis
.ui-btn-inner{
white-space: normal !important;
}
On the third page of this fiddle the problem is demonstrated
http://jsfiddle.net/koesper/R8Kwe/
Anyone have any ideas how I might tackle this?
Thanks in advance,
Casper
ps. Inspiration for the original fix came from Tosh in Jquery Mobile Multiline Button
You could set widths for the links in your control-group:
.ui-page .ui-content .ui-controlgroup a {
width : 49%;
}
This will keep them on the same line. Here is a demo: http://jsfiddle.net/R8Kwe/6/
Also, just to be thorough, the white-space : normal actually needs to be applied to the .ui-btn-text element which is a child of the .ui-btn-inner element (so it still receives the inherited value).
Trim your long buttons - that's a usability issue. If you have action buttons named that long seems like that just defeats the purpose of an action? Other than that I wouldn't use controlgroups for something like this. I would use a custom data theme & some grids to house my buttons inline.
I am generating PDF file using TCPDF, when I try to use inbuilt functions for setting margin, i.e. $pdf->SetMargins(), it doesn't work. My main purpose for it to remove extra space for ul and li tags, because it is disturbing my pdf format and text content mixing into each other.
Any help would be appreciated.
Set margins is for the document itself and it will not affect the ul or lis on the document. You got to set the styling for those yourself. One tip is to do the styling all inline (just pretend that you building up a page for 1990).
I'm trying to override the default behavior of list items and buttons in jQuery Mobile, which has text which doesn't fit on one line as hidden overflow.
If you view this on a skinny browser window or iPhone you'll see what I mean: http://m.gizmag.com
I'd like to be able to wrap the text in the h3 and p tags of each list item onto new lines.
Thanks in advance!
Try setting a style of white-space:normal for the elements.
I just did this with an anchor (<a>) element inside a jQuery Mobile listview-styled li, and it worked to wrap the text as I expected. I used Chrome's developer tools to determine where the CSS attributes were coming from and interactively changed them to make it work the way I wanted.
--
Derek
If feasible, enclosing it inside a <div> will also make it wrap. (But finding the affected element and declaring white-space:normal is the more proper solution)
Source: http://forum.jquery.com/topic/list-items-are-truncating-text-is-there-a-way-around-this
As far as I use sifr.setup(); every h2, h1, and so on becomes invisible. But I don't want that.
I just want the "selectors" to provide a replacement and become invisible and replaced.
How can I prevent that?
I also have another problem where every font is blue and it never gets that color from anywhere.
Sounds like you've kept the original CSS, which hides those elements. Have a look at the CSS file and remove the original .sIFR-hasFlash h1 selectors.
Can you post an example for the color problem?
Looking forward to any help/comments on any aspect of this, but the main question is about sIFR text wrapping, and how to disallow it. This was supposed to be a simple html-izing job (ha ha ha)
Check out here
So I've housed the nav and the content clip boxes in tables, which I know you purists might disdain, but it seemed the easiest/most consistent way... please forgive.
The problem is the sIFR - I can't get one of the nav items ("Exchange Technologies") to behave; it keeps wrapping. Meanwhile, the sIFR headlines in the little content boxes have become unruly and are trying to escape.
I've clogged up the CSS trying to fix it in various elements -- I would be so eternally grateful if a sIFR expert would check it out and see if there are any suggestions on making the sIFR heads work.
Note that I do not need any padding on the bottom of the sIFR elements because the headlines are rendered in all caps.
If it would help I could send along the image of what the designer was looking for.
The forceSingleLine parameter for sIFR.replace() is the easiest way to resolve this. The problem usually arises when the Flash text is wider than the HTML text, and the elements being replaced are exactly the width of the HTML text. In this case the sIFR text won't fit in the allowed space without wrapping.
Another solution is to use letter-spacing through .sIFR-active .myNavItemToBeReplaced CSS rules, to make the HTML text wider so the Flash text does fit without wrapping.