I have String with ul,li and style tag in it. And I am trying to show them in HTML formatting in textview.
String
<style type='text/css'>
ul
{
list-style-type: circle;
font-size: 16px;
}
<div style='font-family: Montserrat;line-height: 30px; text-align: left; color: #383838;'>
<ul>
<li>
Hello Everyone <span style='font-weight: 600; color: #b49fe1;'>Good Morning</span> How are You ?.</br>
</li>
<li>
Good morning <span style='color: #b49fe1;font-weight: 600;'>Have a nice day</span>.</br>
</li>
</ul>
textView.setText(Html.fromHtml(myHtmlText));
But textview shows the plain text.
SomeHow i managed to convert the ul and li tag by using this but didn't look like i want .
Is anyone know How can I have use style,ul and li tag in textview?
You are using CSS but CSS is not supported in android. You can use webview instead.
Below tags are supported in android.For more details look here
br
p
div
em
b
strong
cite
dfn
i
big
small
font
blockquote
tt
monospace
a
u
sup
sub
I need to finalize a company email signature. It looks great on the desktop, but when it is opened on an iPhone or Android, the images wrap onto the next line. They should all be on the same line to create the full effect. See code below.
<span style="color: #000000;"><em><span style="color: #808080;"><img class="alignnone size-full wp-image-250" src="https://mtgrecruiter.files.wordpress.com/2016/09/kelley-lobona-051-e1473885068625.jpg" alt="kelley-lobona-05" width="392" height="100" /><img class="alignnone size-full wp-image-251" src="https://mtgrecruiter.files.wordpress.com/2016/09/kelley-lobona-061-e1473885082990.jpg" alt="kelley-lobona-06" width="53" height="100" /><img class="alignnone size-full wp-image-252" src="https://mtgrecruiter.files.wordpress.com/2016/09/kelley-lobona-071-e1473885094151.jpg" alt="kelley-lobona-07" width="48" height="100" /></span></em></span><br />
<em><span style="color: #808080;">p</span></em>: <span style="color: #000000;">713-572-2100 |</span><em><span style="color: #808080;"> c:</span></em> <span style="color: #000000;">770-891-6968 |<span style="color: #808080;"><em> w: </em></span>www.proalt.com</span>
That effect is happening because the outter span is not big enough to hold the images. So, you can set the min-width to de span, in order to get it as big as your three images. Furthermore, you should set de display property to block, since you can't fix the width for inline elements.
I advice you to use a div instead of that span. Anyway, here you have a working example.
The trick is adding this to your span:
min-width:495px;
display:block;
Some text (not all) in the div suddenly go to new line while the text is not reach the max width of the div. For example:
With this long text, in the view it show correctly: "UMI TERIYAKI & SUSHI", this text is placed on the same line in my div.
My HTML:
<listitem><div style="width: 100%;background-color: white; margin-bottom: 1px;">
<div class="row">
<div class="col">
<div class="row font-weight-bold ng-binding">UMI TERIYAKI & SUSHI</div>
<div class="row ng-binding">MONTREAL ROAD</div>
</div>
</div>
</div>
</listitem>
Result in browser:
UMI TERIYAKI & SUSHI
MONTREAL ROAD
But with this shorter text: "MACS SUSHI", "MACS" and "SUSHI" are placed on two seperated lines in my div => I expect these text are placed on the same line too because the text length is not reach the max width of div no need to go to the new line.
My HTML:
<listitem><div style="width: 100%;background-color: white; margin-bottom: 1px;">
<div class="row">
<div class="col">
<div class="row font-weight-bold ng-binding">MACS SUSHI</div>
<div class="row ng-binding">BAYSHORE DRIVE</div>
</div>
</div>
</div>
</listitem>
Result in browser:
MACS
SUSHI
BAYSHORE DRIVE
Can you paste the code?
Edit
There's no problem with the code in the div. The <listitem> and <div>'s are fine themselves.
It's more likely the width of the div on the page is the problem. But I don't know for sure without seeing more of the code.
You could try giving the <div> in question a background color to clearly see it's actual size.
I am developing the android apps in phonegap but in that my html not showing properly on android phone. problem is that i have four div's first div showing the canvas which is width and heigh is 100% , second div showing the header and third div showing the text data which is coming from server and last is div is for contact form but what happen if content of the third div is increases then it showing content from the middle but i want to show the page from top. please see the below image. following is the my html and css which is working properly on browser but not working properly on real device and i am also uploading screen shot. Please help me find out this bug.
html
<div id="page">
<div id="wrapper" style="display: none">
<div id="header">
<div class="designtech-left back"><a href="javascript:void(0);" id="backToFirstPage" class="back_button" >Back</a>
</div>
<div class="designtech-left"><h3 style=" font-size:14px; font-weight:bold;">Coures Detail</h3></div>
</div>
<div class="designtech-clear"></div>
<div class="course_info_div" id="courseInfo">
//dynamic content name , branch, duration and desc
<p class="pclass">Course name : <span> Catia & 3D Max</span> </p>
<p class="pclass">Branch name :<span> Pune</span> </p>
<p class="pclass">course duration :<span> 6 Months</span> </p>
<p class="pclass">Description : <span> Details</span> </p>
</div>
<div class="designtech-clear"></div>
<div class="contact">
<form id="contact-form" method="post">
<h3>Enquiry form</h3>
<div>
<label>
<span>Name: (required)</span>
<input placeholder="Please enter your name" type="text" id="name" >
</label>
</div>
<div>
<label>
<span>Email: (required)</span>
<input placeholder="Please enter your email address" type="email" id="email-id" >
</label>
</div>
<div>
<label>
<span>Telephone: (required)</span>
<input placeholder="Please enter your number" type="tel" id="contact" >
</label>
</div>
<div>
<label>
<span>Message: (required)</span>
<textarea placeholder="Include all the details you can" id="enquiry" ></textarea>
</label>
</div>
<div class="center">
<button name="enquiry-form" type="button" id="enquiry-form">Submit</button>
<img src="res/drawable-mdpi/gif-load-medium.gif" id="email-progress" style="display: none;"/>
</div>
</form>
</div>
</div>
</div>
css
#page{
width:100%!important;
height:100%;
background-color:#ffffff;
text-align: left;
margin: 0pt auto;
padding: 0 0px;
position: relative;
}
#wrapper{ width:100%;}
#header {
position: fixed;
z-index: 3;
top: 0px;
left: 0px;
width: 100%;
min-height:45px;
color: #eee;
font-weight: bold;
border-bottom: 1px solid #FFFFFF;
background: rgb(255,5,5); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,5,5,1) 0%, rgba(143,2,34,1) 69%, rgba(109,0,25,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,5,5,1)), color-stop(69%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0505', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.course_info_div
{
position:relative;
top:45px;
background:#BCB9B9;
padding: 12px 10px 20px 10px;
font-weight:bold;
font:16px;
text-align: justify;
}
.course_info_div p.pclass{
font-weight:bold;
padding: 5px 0;
}
.contact{
width:100%;
margin:0 auto;
}
#contact-form {
text-shadow:0 1px 0 #FFF;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
background:#F9F9F9;
padding: 10px 30px 0px 10px;
position: relative;
}
below image showing the two views. left side view which is I want and right side view is on real device and emulator.
Pardon if this is way off but have you tried calling an location.href to an anchor point on the page after the server data has been received? I'm curious if that would work. So something like:
HTML:
<div id="courseInfo">
<a name="courseInfo"></a>
<p class="pclass">Course name : <span>
<!-- ...etc -->
</div>
Javascript:
function refreshUIAfterServerData(){
document.location.href = 'index.html#courseInfoAnchor';
}
Clearly this doesn't get to why the issue is occurring - but honestly after dealing w/Android PhoneGap stuff myself for a while now - I've given up asking why on many things and just do what I have to to get in and out fast as I can!
I have a Input text type search the problem is when a i run the app on emulator its working fine. But when i run the app on the device and enter a character in the Input field it shows two text box at that time I don't know why its happening .
Here is the code for Input Text:
<div data-role="header" data-position="fixed">
<h1>CRM</h1>
<div class="srchdiv" data-theme="b" , data-overlay-theme="b">
<input type="search" placeholder="Search" data-icon="search" id="searchfield">
<a href="#popupMenu1" class="btn_delete" data-rel="popup" data-role="button" data-inline="true" data-icon="deletebtn" data-transition="pop" ></a>
</div>
</div>
and the CSS file i used is:
.srchdiv{
top:43px;
position:fixed;
width:100%;
margin:0;
padding:0;
background-color: #999999;}
Thanks in advance