This question already has an answer here:
Issue with Navbar icon in jquery mobile
(1 answer)
Closed 8 years ago.
I have a question I have a problem to change the icon DataList Primeface Mobile.
I researched according to style: <p class="ui-li-aside" /> brings the icon and position, I tried to create my own style and add the icon does not work me.
default.css (created style)
.ui-li-edit {
margin: 0;
position: absolute;
right: 3.333em;
text-align: right;
top: 1em;
background-image:
url("/sgcc-web-app/javax.faces.resource/images/icons-18-white.png.jsf?ln=primefaces-mobile");
background-position: -108px 70%;
width: 18px;
height: 18px;
}
To have a custom icon on the side you need to create a class and add into the a tag in the list items. You need to add the :after in the class to make it work. This method acts the same as ui-li-aside but with a custom icon.
Demo
http://jsfiddle.net/0596ezfo/
CSS & HTML
.ui-icon-myicon:after {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/7/7e/Cute-Ball-Favorites-icon.png");
/* Make your icon fit */
background-size: 28px 28px;
}
<li><a class="ui-icon-myicon">MY Custom Icon</a></li>
Related
So I'm using Basecamp's Trix editor for a Ruby on Rails project.
What I'm trying to do is make the uploaded/ attached image fit to the width of its parent.
Trix automatically embeds the height and width of the image on the element itself.
Any way I can stop trix from doing this?
Maybe if you supplied your code, I can give you an exact answer. But what you can do is target the elements with CSS and then set the rendered dimensions thus:
.col-sm-10 a {
text-align: center;
img {
width: 600px;
height: 400px;
display: block; #ensures the caption renders on the next line
}
where .col-sm-10 is the class enclosing the <a> tag which in turn enclosed the <img> tag. Of course, the class will be different depending on your HTML.
Use inspect on your browser to determine the relationship.
Good luck.
UPDATE:
A better method would be to target the image like so:
#post-show-body a {
text-align: center;
img {
max-width: 100%;
height: auto;
max-height: 100%;
}
}
To resize the height and width of the attached image, you can simply add trix-content class to your trix-editor tag. And then make sure also to include the class into the result div. From there you can adjust trix-content class from your application stylesheet as usual.
The other way is to copy the trix stylesheets folder and play around with .attachment and img tag from within the content.scss
The following is how mine looks like:
img {
max-width: 500px;
height: auto;
}
.attachment {
display: inline-block;
position: relative;
max-width: 50%;
margin: 0;
padding: 0;
}
Read Styling Formatted Content https://github.com/basecamp/trix
In your \app\assets\stylesheets\actiontext.css you can define the image properties.
Mine looks like this.
.trix-content img {
max-width: 70%;
height: 450px;
}
I can't find a way to do this
There seems to be padding placed above and below the element, although I have set it zero
https://plnkr.co/edit/WvEqNCxEcLY5yS1IT738?p=preview
<div>
<button>hello</button>
</div>
<table><tr><td>
<button>hiya</button>
</td></tr></table>
td,
div{
padding: 0;
height: 10em;
border: solid;
}
button {
height: 100%;
width:100%;
border:solid 10px #f00;
}
I don't want to use absolute position as the contents vary, and JS would be an overhead I couldn't live with!
Is there a known bug here? Would anyone have a link to it so I can watch it not get fixed for years and drives me to a stress related end
Thanks in advance
ios pic
chrome on win 10 (desired result)
Thebutton, input, textarea, img, video, audio etc. are REPLACED ELEMENTS. The positioning rules for them are other than for standard elements. You can try to enclose replaced elements into a span or div.
Add <div/> inside <td/> and put <button/> into <div/> it will work properly. Add styles to new <div/> element and use:
button
{
height: 100%;
width:100%;
padding:0;
margin:0;
}
<table><tr><td><div class="replaced-element-container"><button>hiya</button></div></td></tr></table>
Well, this is embarrassing but it meets W3C requirements.
For one table cell in the row:
td, div
{
padding: 0;
height: 10em;
border: solid;
display:block;
}
button
{
height: 100%;
width:100%;
border:solid 10px #f00;
}
But it doesn't resolve problem that button is replaced element. It is still in container made from <td/> element.
Simply put the question is - is there a way to align link text within an action link vertically?
I need to make a button-looking Html.ActionLink control.
There is a reasonably good example at Html.ActionLink as a button or an image, not a link
I have implemented this approach, however, I need not just an "image" button,
but an image button with a text shown on it, and this text depends on view model's state, so that I cannot simply put it on an image.
Here is what I have (Razor):
#Html.ActionLink(#commitee.Name, "CommiteePage", "SecureFolder",
new { commiteeName = commitee.Name, page = 1 },
new { #class = "commiteeButton" })
and CSS:
a.commiteeButton {
background: transparent url("../Images/BlueButton.png") no-repeat top left;
display: block;
width: 304px;
height: 50px;
color: white;
text-decoration: none;
font: normal 14px Arial;
text-align: center;
margin-bottom: 10px;
}
The result is OK, but: the text of a link is located on the top of an image, and not in its middle (vertically).
I do not know how to center link text vertically, so that it can be located right in the center of an image.
Of course, there can be another approach (see below) but maybe it is still possible with approach mentioned above?
<a class="nonunderlinedlink" href="#Url.Action("CommiteePage", "SecureFolder", new { commiteeName=commitee.Name, page = 1 }, null)">
<div class="commiteeButton">
<p class="pstyle">#commitee.Name</p>
</div>
</a>
Try the following changes in your css
a.commiteeButton {
background: transparent url("../Images/BlueButton.png") no-repeat top left;
display: block;
width: 304px;
height: 50px;
color: white;
text-decoration: none;
font: normal 14px Arial;
text-align: center;
margin-bottom: 10px;
display: table-cell;
vertical-align: middle;
}
Rex (see comments to my question above) suggested putting padding-top to CSS, that has resolved issue without causing collateral layout problems.
Thank you all for your quick reply!
I know it's a bit late but you could also use line-height: 50px; to center your text vertically
I'm trying to put a div inside another div that stretches to the full height of the screen and center it vertically, like so:
Preview http://f.cl.ly/items/1a3L46453f0D271V1O2w/Schermafbeelding%202013-04-02%20om%2021.37.25.png
The large photo is the full screen div, the white band is the vertically centered div.
The solution below works gracefully on all possible computers and browsers that I tried... except for Mobile Safari.
For some reason, Mobile Safari (at least on iPad) decides to put the nested div 50% down the page instead of 50% down its parent div.
HTML:
<div class="band full">
<div class="band">
*content*
</div>
</div>
SCSS (irrelevant tags removed):
div.band{ //General styling for div.band elements
margin: 0px;
padding: 80px 0px;
width: 100%;
&.full{ //Style the parent div
height: 100%;
}
div.band{ //Style the nested div
position: relative;
top: 50%;
margin-top: -200px;
padding: 20px 0px;
height: 400px;
}
}
I've got a nagging feeling that this is a bug in Mobile Safari. I sure hope it isn't. Does anyone know how to fix this?
I really did my best to solve this in a clean manner, but I ran some more tests and it's clearly a bug in Mobile Safari's rendering engine. I decided to solve it with an admittedly dirty jQuery hack, but at least it works now.
My page had one of these full screen photos with a band in the middle on the very top, and another one on the very bottom of the page. The top one was easy to solve: just use absolute positioning instead of relative (which was positioning relatively to the top of the page anyway). The "top" property of the bottom band, on the other hand, has to be recalculated based on the height of the page after setting its positioning to absolute. I solved this by setting the "top" property to this: vertical offset from the top of the page to the bottom band + (the height of the full screen band to center in / 2).
Or in code form:
$(window).load(function() { //Wait until the page is fully loaded
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { //If the user is using an iDevice
$('div.band#top div.band').css('position', 'absolute');
$('div.band#bottom div.band').css('position', 'absolute');
$('div.band#bottom div.band').css('top', $('div.band#bottom').offset().top + ($('div.band#bottom').height() / 2));
}
});
check this out. Not tested on mobile but should work
HTML
<div class="panel">
<div class="panelInner">
<div class="box">
<div class="boxInner">hi there</div>
</div>
</div>
</div>
CSS
html {
min-height: 100%;
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.panelInner {
padding: 40px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.box {
height: 200px;
background: #999;
display: table;
width: 100%;
}
.boxInner {
display: table-cell;
vertical-align: middle;
}
And here's a fiddle
When moving through the list of suggestions in IE the graphic indicating the currently selected item extends past the vertical scrollbar. Is there a way to keep it within the visible area of the list?
I'm using IE7 and jQuery UI 1.8.16.
I have the autocomplete styled like so:
.ui-autocomplete {
width: 190px;
max-height: 132px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 20px;
}
* html .ui-autocomplete {
height: 132px;
}
.ui-autocomplete li {
font-size: 12px;
}
already tried overflow-y: scroll; ?
You can't use "auto" without setting a fixed height, and I think "max-height" didn't work on IE7.
Good luck!