I am trying to align a ui-icon from a jquery theme to the right of a textbox element with no luck.
I've tried different floats (floating left pushes it to the left side of my textbox, floating right pushes it all the way to the end of my parent element so it doesn't sit snug next to my textbox), I've tried display:inline, I've tried display:inline-block...nothing seems to work.
Shouldn't a span just render the html inline anyway, right where I put it on the page?
<td><input type="text" maxlength="4" name="tb" id="tb" style="width:30px;" /><span class="ui-icon ui-icon-help ui-state-default" id="tbHelp" style="inline-block;" title="What's This?"></span></td>
You could assign class or id to the td and assign width to this element. This width should be assigned taking in mind the icon size. Then proceed with float right. Span elements are used for text so why don't you use image tag for this icon?
<head>
<style type="text/css">
.tdd{
width: 50px;
height: 20px;
background-color: blue;
}
</style>
</head>
<body>
<table>
<td class="tdd"><input type="text" maxlength="4" name="tb" id="tb" style="width:30px;" /><img src="img/bgFlag.png" width="16" height="16" class="ui" id="tbHelp" style="inline-block;" title="What's This?"></td>
</table>
Related
I need to create a footer with 2 simple rows the company name and the year. Here is my html snippet,
<mat-toolbar color="primary" style="height: 176px">
<span>Company name</span>
<span>Copyright ©2019</span>
</mat-toolbar>
So that company name has to be at the center (vertically and horizontally) and the copyright should be below of the company name.
Just place the spans into a mat-toolbar-row. They are basically made for structuring content in lines.
<mat-toolbar>
<mat-toolbar-row>
<span class="span">First Line</span>
</mat-toolbar-row>
<mat-toolbar-row>
<span class="span">Second Line</span>
</mat-toolbar-row>
</mat-toolbar>
Then you just have to center the spans.
.span {
margin: auto;
}
I'm trying to override the colors on my material input elements to always be white. This includes the outline of the input/select field, the placeholder, and the text itself even when the field is out of focus.
I did read through the official material overriding styles guide, but I found it a bit broad and was hoping for some more direction to do this.
This is my code:
<mat-card class="coverage-card">
<mat-card-content>
<form>
<mat-form-field appearance="outline" class="address-zip white-text">
<mat-label>Square Footage</mat-label>
<input type="number" matInput>
</mat-form-field>
</form>
</mat-card-content>
</mat-card>
css styles:
.coverage-card{
min-width: 400px;
max-width: 620px;
background-color: #FF6A13;
height: 575px;
border-radius: 20px;
}
.address-zip{
max-width: 190px;
margin-right: 10px;
}
.white-text{
color: white;
}
The out-of-box material color only applies when the field is focused on. I haven't been able to find the style that is being applied to the outline or placeholder when the field isn't in focus.
I tried overriding classes like .mat-form-field-appearance-outline in styles.scss with an !important, just to see if I could find the right class and haven't had any luck yet.
Not in Focus
Focused
Filled In
I have to show Thai and Roman text in a WebView (with NavigateToString). In CSS I've defined the font-sizes for Roman as 1.0em and for Thai as 1.8em. But Thai is displayed very small, smaller than Roman. If I set the font-size for Thai to 8em, then the result is about I want to have.
OK, I can set the font-size to 8.0. But if this wrong behavior an bug in the OS, and Microsoft correct it in the next version, then my customers will have Thai script in 800% that fills up the screen.
Is this a bug in the OS? Or am I missing something obvious?
Edit: this is the generated html
<html>
<head>
<title>ClickThai</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
.Text { font-size: 1.0em}
.News { font-size: 1.0em; font-weight: bold; color: #333333}
.ThaiText { font-size: 2.0em; line-height: 2.2em;}
.TTiT { font-size: 1.0em; line-height: 1.3em;}
.Tones { font-size:80%; position:relative; bottom: 0.1em; letter-spacing: -0.15em; color: #FF0000;}
.Tonex { font-size:80%; position:relative; bottom: 0.1em; letter-spacing: -0.15em; color: #00FF00;}
.NoWrap { white-space:nowrap;}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td bgcolor="#00FF00">
<p class="ThaiText">ไก่</p>
</td>
</tr>
</table>
<p class="News">Transcription</p>
Description
</body>
</html>
It works on Internet Explorer and other browsers. Not in WebView on Windows Phone.
now I have found out that the problem is elsewhere.
My Thai text will be displayed in a table (just to colorize the background). And there lies the problem: the class definition in tables does not work as expected. This also applies to Roman text.
The text size is about 25% of the defined value. Outside tables everything is in order.
Because my app is an universal app I have added my code to the Windows 8.1 area.
There the size specifications are correctly rendered.
Conclusion: The code is error-free, but there is a bug in Windows Phone 8.1 when rendering the css font sizes within html tables.
EDIT:
How do i bring the bottom graph to the right of the top chart and align them as if they look like one chart
http://jsfiddle.net/dP93u/
<div><div id="container1" style="width: 300px; height: 400px;"></div><div id="container" style="width: 300px; height: 400px; margin: 0 auto"></div></div>
New EDIT:
The only way i can change the answer is if someone can develop the same chart in just one container div instead of 2.
I will suggest you to build two barcharts, set their offset such that they get aligned, take care that only one will have the xAxis.
Hope this will be useful for you.
If you would't mind including bootstrap.css library, the solution is pretty simple. Check this fiddle.
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
Do you intend: how can I have value labels between the two bar series?
You can done it via css:
<div style="font-family:verdana">
<p style="text-align:center">Population pyramid for Germany, midyear 2010</p>
<p style="font-size:small;text-align:center">Source: www.census.gov</p>
<div id="container1" style="width: 50%; height: 400px;float:left"></div>
<div id="container" style="width: 50%; height: 400px;float:left;position:relative;left:-55px"></div>
</div>
<div style="clear:both"></div>
and some refinements of HighCharts code. See jfiddle.
Using iOS 4.2.1 on iPad/iPhone, when I view a specific web page with type="number" for a text field, the text input space is slightly shorter than when it's type="text". And when I enter 3 digits, the first one gets cutoff, while it does not get cutoff with type="text". This problem does not happen on iOS 3.x on iPad/iPhone. The input field input area is identical, and it works fine.
Has anyone noticed this problem? Is there anything I can do to fix it? Thanks.
It's probably to do with the device browser's default style sheet. If you just apply styles the same styles to the text and number input fields it should render the same.
input[type=text], input[type=number] {
width: 100px;
padding: 1px 0;
...etc...
}
You need to set the unit when styling width and height.
<input syle="width: 45px; padding: 1px 0;" name="mname" type="text" value="" autofocus />
or preferred:
input[type=number] {
width: 45px;
}