I am using materials Md-button's in a md-side-nav and this button is offset when it it 4 characters long. I inspected the css of these two button and the only thing that is different is the origin transform
Codepen: click toggle right nav to see the effect.
http://codepen.io/anon/pen/oXpdae
<md-button ng-click="close()" class="md-primary">
123456
</md-button><br>
<md-button ng-click="close()" class="md-primary">
123456789
</md-button>
Solution was to add this to the menu, as when wrapping the button with an the text is centered
a {
text-align: left;
}
Related
I am having trouble with a placeholder. I would like to change the color of the asterisk inside of the placeholder to red and leave the rest the dim black.
I am using bootstrap .form-control for markup.
I would like to know if there is a plugin/easy method of doing this.
JS or CSS.
I don't know of any easy way to have 2 colors in a place holder.
You can try adding an asterisk after your placeholder using -webkit-input-placeholder::after, and change its color, but this solution does not work in all browsers: See here
You can try something like this and add your placeholder as a label...
input[required] + label {
position: relative;
left: -170px; /* move the label left and place it inside the input */
color: #757575; /* placeholder color here */
}
input[required] + label:after {
content:'*';
color: red;
}
<input type="text" id="myInput" name="myInput" required="required" />
<label for="myInput">IME IN PRIIMEK</label>
I have a footer toolbar on my ionic2 app that has a center-aligned text, but the text only seems to take the center 50% or so of the width of the toolbar and then cuts off with an ellipses (see image). The width seems to correspond to the same width of the text allowed for the header toolbar (which I've grayed out in the image). Is there a way to override this and make the text take up the full space? So far I've only noticed this issue on an iPhone 6, although I haven't tried that many devices.
<ion-content class="no-scroll">
<ion-tabs [selectedIndex]="mySelectedIndex">
tabs omitted..
</ion-tabs>
</ion-content>
<ion-footer>
<ion-toolbar color="{{threatLevelColor}}">
<ion-title *ngIf="threatLevel" text-center>
Security Threat Level: {{threatLevel.level}}
</ion-title>
</ion-toolbar>
</ion-footer>
You can apply below SCSS change only for iOS platform.
.scss
.ios,
{
your-page {
.padding-0 {
padding-left: 0;
padding-right: 0;
}
}
}
.html
<ion-footer>
<ion-toolbar color="{{threatLevelColor}}">
<ion-title *ngIf="threatLevel" text-center class="padding-0">
Security Threat Level: {{threatLevel.level}}
</ion-title>
</ion-toolbar>
</ion-footer>
I'm working on a JQuery Mobile app. I need to enlarge the font used for the title text. Whenever I enlarge the text size, the height of the ui-header bar grows. I do not want it to grow. Instead, I want the ui-header to stay the same size of the default ui-header. I just want to enlarge the text size. Currently, I have the following:
.t1 { color: blue; font-size:24pt; font-weight:normal; }
.t2 { color: white; font-size:24pt; font-weight:normal; }
<div data-role="header" data-position="fixed">
Back
<h1><span class="t1">My</span><span class="t2">App</span></h1>
</div>
How do I change the font size without making the header grow?
You also have to modify .ui-header .ui-title rule changing top and bottom margin values. For example:
.ui-header .ui-title {
margin: 0 30% 0;
}
http://jsfiddle.net/Pwqtm/1/
Is there a way to modify the Twitter 'follow' button to display the number of followers in a bubble but hide the word "followers"? I basically want my 'follow' button to look the same as the 'tweet' button.
The current code looks like this:
<a href="https://twitter.com/User" class="twitter-follow-button" data-show-count="true"
data-show-screen-name="false" data-dnt="true">Follow #User</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id))
{js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
I had this same issue and solved it by basically hiding the word 'followers' and creating a fake right edge to the bubble, if that makes sense. So, you have to wrap the button in its own div, then hide the overflow of that div and set the width to the exact point where the word disappears and the height precisely to the height of the button you are using. Here's a code example:
#titter-div {
border-radius: 4px; /* to mimic the curved edges of the count box */
border-right: 1px solid #AAAAAA; /* this is the width and color of the count box border */
height: 20px; /* this height works for the medium button */
width: 88px; /* precise width to hide the word */
overflow: hidden; /* actually hides the word */
}
This worked for me to create exactly what you are looking for. Hope this helps.
To display the number of followers in a bubble but hide the word "followers", here is the code I use with an iframe :
<iframe
src="//platform.twitter.com/widgets/follow_button.html?screen_name=Vacance_Luberon&show_screen_name=false"
style="width: 88px; height: 20px;"
allowtransparency="true"
frameborder="0"
scrolling="no">
</iframe>
Am using the following code to attach a panel to a toolbar button.
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="test-toolbar-button"
label="test"
class="toolbarbutton-1 chromeclass-toolbar-additional"
tooltiptext="test"
type="panel"
>
<panel class="test-panel" id="test-panel" position="after_end" onpopupshown="" width="643px" >
<iframe id="test-panel-iframe" src ="chrome://url.html"
style="height:568px;width:343px;border:none;padding-left:3px;background-color:white;" >
</iframe>
</panel>
</toolbarbutton>
As per the documentation we need to specify two icons for Firefox toolbar button - 16x16 and 24x24
This is the CSS am using,
#test-toolbar-button {
list-style-image: url("chrome://test-24.png");
-moz-image-region: rect(0px 24px 24px 0px);
}
#test-button:hover {
}
#test-toolbar-button[disabled="true"] {
-moz-image-region: rect(0px 48px 24px 24px);
}
toolbar[iconsize="small"] #test-toolbar-button
{
list-style-image: url("chrome://test-16.png");
-moz-image-region: rect(0px 16px 16px 0px);
}
But the toolbar height increases since its having a down arrow which indicates its a panel attached to the toolbar button, there by screwing the whole toolbar.
Screenshot of the sample is attached.
http://postimage.org/image/sqwtwbfip/
Can anyone help me out of this.
-moz-box-orient: horizontal !important;
This worked . Thanks #WladimirPalant