I'm attempting to shrink the height of a jQuery Mobile Button for a better fit in a list view, but I cannot get the text to line up properly. Here's my implementation so far:
.listDelBtn .ui-btn-text {
margin: -5px -15px -5px -15px;
}
<a class="listDelBtn" data-role="button" data-theme="b" style="float: right; width: 75px; line-height: 11px; margin-top: 6px; z-index: 12; padding: 0 0px 0 0px;">delete</a>
the styled margins do affect the width of the button to give it a shorter length, however, the top and bottom margin values have no affect, regardless of the values tried. I've also attempted various padding , height, and other values with no luck. Line height was also the only inline style that had any affect on height of the button, but the text within is misaligned. Attempting on versions 1.0b1+ of jQuery Mobile btw.
Here's an image of the resulting button for reference:
You can give height to your button then give same line-height to it.
For example
.listDelBtn{
height:30px;
line-height:30px;
}
Check this example http://jsfiddle.net/EQash/
#Inator I think vertical align middle works only for the Table elements and not for other cases.
In that case in the class you apply to button:
Set: display: table-cell
and vertical-align: middle
and possibly create a outer element say div and set its display to table
like display: table
and vertical-align: middle
Hope it might work
The Inline margin-top style takes precedence over the the styles defined in the CSS class. That's why CSS defined values have no effect. Solution is to add
margin-top: -5px !important;
to your CSS if you want the negative top margin to take effect.
Related
Here is my emoji one fiddle.
https://jsfiddle.net/L8a9zazh/
How do i resize the emojis and make it align in center with text and make it look neat.
Css:
img.emojione {
// Override any img styles to ensure Emojis are displayed inline
margin: 0px !important;
display: inline !important;
}
Your content should always be placed within HTML tags that give context to what structural component you're trying to build. In the fiddle example below, we encapsulate the emoji inside a span tag which in turn is wrapped in a p tag for the wording content. By doing this, we can target specific CSS on the emoji content to vertical align within the p tag without having to deal with line-height. The font-size CSS property can control unicode characters and font-face content.
Update 1
I see now that you're trying to convert the chars to an image; your jsfiddle was broken because it wasn't using the jquery framework and you don't have to declare onLoad; instead this should all be set in the js settings window pane.
Update 2: updated jsfiddle
Example
https://jsfiddle.net/L8a9zazh/15/
HTML
<br><br>
<p>Hello world I'm buzz 😠</p>
<br><br>
<p id="wrong-test">Hello world I'm buzz <span class="emoji">😠</span></p>
CSS
img.emojione {
// Override any img styles to ensure Emojis are displayed inline
margin: 0px !important;
display: inline !important;
height: auto;
width: 50px;
}
p#wrong-test {
border-top: 1px solid black;
border-bottom: 1px solid black;
display: inline-block;
}
span.emoji {
font-size: 30px;
vertical-align: middle;
line-height: 2;
}
What it sounds like you want would be expressed by the following: vertically centered at a point half the x height of the font above the baseline. For that you need to address line-height.
Your text and inline images will never align vertically if the image size exceeds the line-height of the font. You need to make the line-height of the font to be at least equal to the image height.
Experiment with different line-heights and see where the images line up. If you get a good fit, you're done. If you still can't find get there, get yourself close and then give the image a pixel or two of margin or padding top or bottom where appropriate.
You can wrap your emoji in a container element (such as a <div> or a <span> and style that element, such as:
<div style="font-size:5rem;width:100%;text-align:center;">😠</div>
I did this for your jsFiddle, here:
jsFiddle Demo
I have a button html element on my page and want to use the JQuery button so I do
$( "#myButton" ).button();
This works great, but I want to edit the style of the button, namely (as it says in the title) I want to make the button shorter with smaller text and center the text vertically. I've tried
#myButton {
height: 22px;
font-size: 16px !important;
}
And this works in terms of making my button and text the size I want them, but it doesn't center the text vertically in the button. I've tried setting padding-bottom: 2px;, I've tried setting line-height: 22px;, and I've tried setting vertical-align: center;, but none have worked. The button still looks like: Any help would be greatly appreciated. Thanks!
Try to use padding: 0; instead height: 22px; and your height will be defined by your font-size attribute.
Example: https://jsfiddle.net/dmonti/mz8k7kkw/
For centering small elements relative to a parent I usually just use absolute positioning:
HTML
<div>
<span>Process</span>
</div>
CSS
div {
position: relative;
border: 5px solid grey;
background: black;
color: white;
width: 200px;
height: 300px;
}
span {
position: absolute;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}
The important things to note here are that your "Process" element is self-contained (inside it's own span element), and that its parent element's position property is set to relative.
The CSS transform property might look a little confusing, but it essentially keeps the element perfectly centered inside of it's parent, no matter how it's resized.
Fiddle
In my fiddle, you can see how it centers by adjusting the div's height property in the css.
Hope this helps!
I have a div that users input text in it. But I want to increase it's width according to it's text, until a max of 50% of the screen. My CSS code:
.messages {
max-width:50%;
min-width:150px;
background: #ffeec0;
padding:2px;
margin:3px;
-webkit-border-radius: 2px;
border-radius: 2px;
border:1px solid #ffdd7c;
}
Result:
There's a lot of space after the "555" message, I want this size only if the user inputs some text like:
So, how can I increase the div's width dinamically, depending on the text size?
There are many ways to achieve this, but IMHO the cleanest is the following.
Your problem is that the boxes are "greedy" and will try to expand to the available width.
To prevent this, you can:
Make it "float: left;"
But also "clear: left;" to prevent additional "left floating" elements to use the available space on the right.
The CSS becomes:
.messages {
max-width:50%;
min-width:150px;
background: #ffeec0;
padding:2px;
margin:3px;
border-radius: 2px;
border:1px solid #ffdd7c;
float: left;
clear: left;
}
I provided full code and additional explanation (on mouseover) on the Liveweave here: http://liveweave.com/DFCZFj
Try changing display type of the div to table.
Example Here
.messages {
display: table;
max-width: 50%;
min-width: 150px;
/* other declarations omitted due to brevity */
}
Just add display:inline;. You can also remove the min width property, otherwise if the text is smaller, you will still have that gap.
Block elements (div's default display type) will attempt to take up the maximum horizontal space of the container. Imagine an implicit width:100% whenever you see them. inline-block will create block level elements in which the next element will attempt to render horizontally adjacent (provided there is enough room). This is what you want to use (display: table will work in this solution as well, but it has its own idiosyncrasies. I avoid them.
So your solution requires three parts:
First, you need to specify that the rows will be no larger than 50% of the available area. You will do this with an outer frame:
.frame {
max-width:50%;
}
Next, the messages themselves should each be given space entire row(s) at a time. So we'll use an undecorated div tag around each message.
Finally, you will use display: inline-block for your innermost messages elements. Since they are the only child of their parent tag, you won't have to worry about elements winding around on one another. By using the inline-block, width is respected and this gives us a great place to apply the background color.
.messages {
display: inline-block;
min-width: 150px;
background: #ffeec0;
padding:2px;
margin:3px;
-webkit-border-radius: 2px;
border-radius: 2px;
border:1px solid #ffdd7c;
}
Just as a reference, one would expect your markup will look like the following:
<div class="frame">
<div><div class="messages">2014</div></div>
<div><div class="messages">2014</div></div>
<div><div class="messages">
2014-09-20 17:46:41 minhavidaemquotes:555
</div></div>
<div><div class="messages">
2014-09-20 17:46:41 minhavidaemquotes:555 this is some extra
text
</div></div>
</div>
I think you'll find this gives you the intended effect. By the way, this is a general solution -- but if you choose a min-width that is larger than 50%, you will ensure that two siblings of type inline-block will be too wide for a line. If you do this, then you can dispense with the extra div in the markup.
Look at my code here.
You need to resize Result panel so that you can view at least two block inline. If you click on "More details" link then it will show details but it will shift next rows block also.
Any suggestion why this it is showing like this though I have used clear:both.
.reviewimg_blk {
border: 1px solid #9B9B9B;
float: left;
margin-bottom: 15px;
margin-right: 15px;
margin-top: 15px;
padding: 5px 5px 5px 10px;
position: relative;
width: 395px;
}
That's a common problem with floats.
Use display: inline-block; vertical-align: top; instead of float:left; if you don't need IE7 support.
See https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/ for a cross-browser solution.
This is happening because of position:relative. Position:relative keeps div's or blocks in a relation so the below block was moving down. Use instead position:absolute at the places related to that dropdown part.
That is because your 1st itemStyle div has more content so it is taking more height than other divs.
So add <div class="clear"> </div> after every two itemStyle divs or fix the min-height to the itemStyle div.
I have added clear class after every two itemStyle divs in demo.
DEMO
..Live demo
Hi now used to Even and odd rules in css
.itemStyle:nth-child(odd) {
clear:left;
float:left;
}
more info even or odd rules
Basically what the title says. Though the spacing needs to be the same on any resoulution. I tried to do it with css but on different resolutions it moves around a bit. It dosn't matter how you do it (javascript, css, html), as long as it works.
You can view the site that im having issues on here.
If the error is the Fatal Error. Check Code. bit at the top, then do this
Change
#newscontent {
top: 4px;
left: 14%;
position: fixed;
}
to
#newscontent {
top: 4px;
left: 18%; //CHANGE HERE
position: fixed;
}
This will keep the text from overlapping the Latest News bit, at least until the page shrinks smaller than the BB.
Even better would be to make #newscontent a span and place it inside the #news div, so there would be no overlapping or separation no matter what the screen size.
only #topbar should be positioned absolute (if needed), child divs can have float left and margin/padding right
OK, so bottom line is you don't want to solve this using absolute or fixed positioning with left-offset percentages. This approach will fail depending on screen resolution and length of text. A better approach is to float the items, which will allow them to "push" the next element to the right, if need be. Try this:
First, remove all your CSS for your #serverstats, #news, and #newscontent selectors.
Second, on all three of those divs, add a menu-item class:
<div id="serverstats" class="menu-item">...</div>
<div id="news" class="menu-item">...</div>
<div id="newscontent" class="menu-item">...</div>
Third, add the following CSS to your style sheet:
.menu-item {
float: left;
font: bold 120% Arial,Helvetica,sans-serif;
margin-left: 15px;
padding-top: 3px;
text-decoration: none;
}