this may be a stupid question... but I have a simple TextBlock nested within a ScrollViewer. When the user scrolls up, the content moves, but then snaps back to default position when you stop scrolling and remove your finger. How can I set up the ScrollViewer so that the textblock stays at the position it was scrolled to, without snapping back?
<ScrollViewer>
<TextBlock Height="500" HorizontalAlignment="Left" Margin="130,529,0,0" Name="statusTextBlock" Text="TextBlock" VerticalAlignment="Top" Width="298" TextWrapping="Wrap" />
</ScrollViewer>
Many thanks!
EDIT:
Based on a suggestion, I wrapped the ScrollViewer in a Grid. This did not help - the text still snaps back to the original position when you release your finger from the scroll action.
<ScrollViewer Margin="130,540,0,0">
<Grid Height="500" >
<TextBlock HorizontalAlignment="Left" Name="statusTextBlock" Text="TextBlock" VerticalAlignment="Top" TextWrapping="Wrap" />
</Grid>
</ScrollViewer>
I did not find such issue with TextBlock here. My device is updated with Mango build and the Windows Phone SDK 7.1 RC is installed in my machine.
Wrap the TextBlock in a Grid, and set the height (if necessary) on the Grid. Also, I wouldn't recommend using a static width for a TextBlock. Specially not when using Wrapping. You're not accounting for future screen sizes, which is a bad thing™.
<ScrollViewer>
<Grid Height="500">
<TextBlock HorizontalAlignment="Left" Margin="130,529,0,0" Name="statusTextBlock" Text="TextBlock" VerticalAlignment="Top" Width="298" TextWrapping="Wrap" />
</Grid>
</ScrollViewer>
Update
I can't re-create your problem. Here's an example that works just fine:
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
<ScrollViewer>
<Grid>
<TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sagittis auctor quam ac dictum. Nam tincidunt nisl id turpis dignissim fringilla. Sed elementum euismod fringilla. Etiam sem sem, congue at euismod ut, blandit vitae metus. Sed venenatis rutrum elit sed vestibulum. Etiam nec tempus massa. Pellentesque leo velit, laoreet nec pulvinar non, tempor et felis. Nunc at pulvinar ipsum. Nullam id lorem id augue viverra elementum sed vitae nibh. Nunc pulvinar purus a est porttitor sit amet rutrum mi eleifend. Praesent vitae urna non est volutpat mattis. Nulla sit amet mollis lectus. In hac habitasse platea dictumst. Duis viverra, lacus ut sollicitudin auctor, lacus velit elementum turpis, a faucibus nibh velit sed ipsum. Vivamus laoreet purus consectetur dui faucibus in ornare lacus congue. Suspendisse laoreet leo laoreet nisl fermentum ut tempus urna placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean sit amet quam odio. Quisque eu mattis mauris. Maecenas congue diam quis magna dignissim a facilisis lectus aliquam. Nunc tristique odio id velit pretium eu scelerisque velit dictum. Cras eget purus massa. Suspendisse potenti. Duis at egestas nunc. Nullam vehicula urna eget neque interdum pellentesque. Nulla non nisl ipsum. Vestibulum congue viverra felis quis congue. Duis sodales, odio vitae aliquam euismod, dolor augue iaculis quam, non hendrerit felis metus quis purus. Suspendisse fringilla vulputate tellus ac consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus pulvinar accumsan luctus. Nunc vel orci purus, sollicitudin hendrerit orci. Nam commodo, massa volutpat venenatis eleifend, tortor velit tincidunt metus, at molestie felis neque non est. Curabitur lorem est, ullamcorper quis pellentesque et, consequat a tortor. Duis at lorem et erat pretium ultrices. Sed fringilla neque nec ante interdum ultricies. In facilisis augue eget nisi porttitor in semper risus vulputate. Suspendisse id mi velit. Pellentesque in libero ac neque ullamcorper vulputate interdum pharetra ligula. Pellentesque ac diam justo. Maecenas augue est, tincidunt vel lobortis in, condimentum nec felis. Morbi sodales luctus velit, in fringilla augue consectetur sed. Pellentesque ut sodales augue. Etiam et sem lacus. Nullam at erat lectus, lobortis vulputate augue. Curabitur nec risus blandit libero ornare posuere quis ac mi. Quisque sed odio tellus, eu vehicula dolor. Aenean luctus pellentesque rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget augue quis ligula adipiscing molestie. Suspendisse ac dictum lorem. Vivamus lacus diam, tincidunt ut sagittis non, consectetur ut magna. Maecenas lectus lectus, suscipit vitae commodo nec, mollis id nibh. Curabitur venenatis posuere ipsum, nec tincidunt tortor pulvinar vel. Vestibulum metus tortor, gravida eu lacinia ut, mattis sed ante. In eu justo id arcu consectetur molestie. Praesent mattis scelerisque mauris, ac porttitor velit malesuada quis. Etiam elementum sem a eros aliquam venenatis eget in tortor. Pellentesque a risus libero. Donec erat diam, porta id blandit vel, vulputate ac diam."
TextWrapping="Wrap" />
</Grid>
</ScrollViewer>
</Grid>
Related
I currently have two views for an app, "about" and "work." Both pages are in a horizontal scroll view that snaps to feel like a page.
The only problem is when there is a lot of content on one page the other page stretches to be as large which causes there to be a lot of blank space at the bottom.
Here is an example of what I'm talking about.
"About" and "Work Pages
<scrollview>
<View>
//small content
</View>
<View>
//large content
</View>
</scrollview>
You need to wrap the content of each page with a div that has the same height.
.horizontal-pages {
width: 300px;
max-height: 400px;
display: flex;
flex-direction: column;
}
.page-slider {
display: flex;
flex: auto;
overflow: hidden;
}
.page-wrapper {
width: 100%;
height 100%;
overflow: auto;
}
<body>
<section class="horizontal-pages">
<div class="page-header">
page header
</div>
<div class="page-slider">
<div class="page-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisi sem, congue eu diam sit amet, malesuada commodo elit. Ut semper ante id lacus faucibus luctus. Mauris vitae turpis et quam blandit eleifend. Nam laoreet lacus vel egestas molestie. Pellentesque vulputate lacus id orci rutrum dapibus. Proin maximus ligula sit amet justo fringilla volutpat. Integer porta posuere tempus. Aliquam semper blandit est in faucibus.</p>
<p>Morbi vel metus lorem. Aliquam sapien massa, tempus in vehicula eu, sodales vitae magna. Sed vel rhoncus purus, tristique egestas nisi. Sed cursus nulla elit, nec malesuada augue facilisis sit amet. Morbi placerat euismod magna sit amet euismod. Duis quis feugiat massa, quis scelerisque mi. Curabitur eu quam pretium, auctor metus posuere, bibendum libero. Donec eu diam lectus. Sed pellentesque porttitor leo. Curabitur iaculis neque vel dignissim finibus. Vestibulum placerat sollicitudin dictum. Donec dignissim pharetra leo et finibus. Curabitur venenatis ligula a elit laoreet, id facilisis augue ultricies.</p>
<p>Aliquam volutpat enim quis ante vehicula faucibus. Fusce aliquet laoreet malesuada. Morbi tristique nibh sit amet nunc posuere, non facilisis velit venenatis. Aliquam id finibus elit, vitae auctor metus. Ut mollis ex vitae metus placerat condimentum. Donec consequat dapibus accumsan. Nullam mollis dui odio, et pharetra urna auctor non.</p>
<p>Sed sed tellus eu nunc scelerisque mattis. Suspendisse leo dui, congue vitae euismod quis, iaculis et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. In ac condimentum ex. Curabitur tristique velit purus, eget tempus tortor posuere sodales. Nullam vestibulum felis id quam ullamcorper pharetra. Nunc at ultricies purus. Maecenas molestie magna id faucibus lacinia. Vivamus consequat gravida eros, nec pharetra turpis interdum iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam feugiat mauris arcu, vel auctor eros faucibus at. Aliquam tincidunt est non arcu sodales aliquet.</p>
<p>Donec tristique tempor sapien vel vestibulum. Nulla eleifend gravida congue. Donec feugiat arcu sit amet odio posuere, eu lacinia ex iaculis. Fusce a mollis ligula. Donec varius, purus in gravida iaculis, est risus posuere ante, quis tincidunt purus velit sodales ante. Ut ut nulla ligula. Cras enim neque, feugiat dignissim urna pretium, cursus condimentum justo. Praesent mauris quam, vehicula at sem id, sodales consectetur tellus. Suspendisse quis magna rhoncus, dapibus ipsum vel, vulputate lacus. Fusce molestie dui neque, eu iaculis augue porta in. In faucibus interdum massa, et tempor lorem imperdiet a. Aenean sed nulla porttitor, maximus massa eget, pulvinar orci. Suspendisse non volutpat leo, in feugiat dui. Vestibulum eu suscipit purus, in suscipit leo. Nam urna mauris, efficitur vitae commodo non, mollis facilisis massa.</p>
</div>
<div class="page-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisi sem, congue eu diam sit amet, malesuada commodo elit. Ut semper ante id lacus faucibus luctus. Mauris vitae turpis et quam blandit eleifend. Nam laoreet lacus vel egestas molestie. Pellentesque vulputate lacus id orci rutrum dapibus. Proin maximus ligula sit amet justo fringilla volutpat. Integer porta posuere tempus. Aliquam semper blandit est in faucibus.</p>
<p>Morbi vel metus lorem. Aliquam sapien massa, tempus in vehicula eu, sodales vitae magna. Sed vel rhoncus purus, tristique egestas nisi. Sed cursus nulla elit, nec malesuada augue facilisis sit amet. Morbi placerat euismod magna sit amet euismod. Duis quis feugiat massa, quis scelerisque mi. Curabitur eu quam pretium, auctor metus posuere, bibendum libero. Donec eu diam lectus. Sed pellentesque porttitor leo. Curabitur iaculis neque vel dignissim finibus. Vestibulum placerat sollicitudin dictum. Donec dignissim pharetra leo et finibus. Curabitur venenatis ligula a elit laoreet, id facilisis augue ultricies.</p>
</div>
</div>
<div class="page-footer">
page footer
</div>
</section>
</body>
I was able to more or less get what I was looking for. I set a conditional for the content in the large view to only show when the scroll was > 0. That way the smaller view isn't stretched when the other view isn't visible
I wish I was able to recreate this small menu from the material ui website in my app :
By now I have a component with a list and links :
import { Link, List, ListItem } from '#material-ui/core';
const burgerRecipe = [
{
id: 0,
name: "bread",
quantity: 2
},
{
id: 1,
name: "steak",
quantity: 1
},
{
id: 2,
name: "cheddar",
quantity: 1
},
{
id: 3,
name: "pickles",
quantity: 2
}
]
/**
* MenuInteractiveColumn :
* #description
*/
const MenuInteractiveColumn = props => {
return (
<>
<List>
{burgerRecipe.map(value => {
return (
<ListItem key={value.id}>
<Link href={`/reservations#${value.name}`}
underline="none"
onClick={() => {
console.info("bip bop");
}}
>
{value.name}
</Link>
</ListItem>
)
})}
</List>
<List>
{burgerRecipe.map(value => {
return (
<div id={value.name}>
{value.name} -------------
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in lectus sit amet est mollis pharetra nec non augue. Phasellus eleifend ac erat non aliquam. Donec varius vel orci vel tempus. Suspendisse non dolor est. Duis at consequat diam. Etiam at bibendum orci, at tincidunt nulla. Integer vel quam non urna malesuada auctor. Quisque feugiat ligula dolor, vitae consequat magna mattis nec. Nulla massa nisl, fringilla et felis nec, lobortis placerat lectus. Praesent eget vehicula nulla. Cras lobortis metus sed pellentesque maximus. Proin nisi diam, euismod sit amet lacinia in, fringilla eget dolor. Nunc molestie magna id varius facilisis. Pellentesque sit amet posuere justo. Nullam faucibus lectus at mauris efficitur, sit amet hendrerit massa auctor.
Fusce a dapibus nibh, at dignissim nulla. Donec tempus ut justo eu volutpat. Pellentesque eget diam ipsum. Nullam vehicula lorem et rhoncus mattis. Duis arcu libero, consectetur a sodales eget, malesuada at purus. Integer a mattis eros. Etiam sagittis, lectus cursus commodo molestie, ante justo maximus diam, pellentesque hendrerit nibh est sed ex. Cras pharetra interdum sagittis. Nulla tincidunt scelerisque purus, eget varius ipsum venenatis porta. Etiam fermentum, diam vitae tempor tempus, quam diam iaculis eros, id fringilla sapien felis ut metus. Quisque et mi condimentum, semper justo ultrices, euismod metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras posuere et nisl ac ultrices. Donec eu dolor tincidunt, maximus augue quis, suscipit metus. Praesent convallis ut metus vel eleifend.
Sed eu dignissim urna. Quisque sit amet risus sollicitudin, lobortis purus nec, consequat justo. Vestibulum non mauris faucibus, maximus nulla eu, convallis augue. Aenean vel libero nec felis ullamcorper auctor. Mauris efficitur sed tellus eget semper. Etiam blandit et lectus ut lacinia. Suspendisse faucibus enim convallis, placerat eros vitae, ullamcorper mauris. Quisque quis quam vestibulum, mollis justo ac, pellentesque nisl. Nunc iaculis tortor sit amet ex tristique convallis sit amet sit amet augue. Nulla aliquam sit amet enim eget placerat. Ut quis ex tincidunt, dignissim ligula non, euismod mauris. Sed euismod faucibus massa, vel aliquam elit euismod in.
Aliquam id sapien nibh. Sed eu tellus eros. Cras interdum magna quis arcu dignissim, eget posuere felis dictum. Donec dictum euismod lectus, nec ornare erat suscipit at. Fusce mi nibh, ullamcorper porttitor orci sit amet, placerat ultrices eros. Nam rutrum mauris sit amet magna iaculis aliquet. Sed venenatis urna in metus volutpat, id sagittis nulla tempor. Curabitur odio metus, porttitor sit amet urna ac, posuere rhoncus neque. Morbi tortor libero, dapibus vitae finibus rutrum, placerat quis leo. Vivamus nunc leo, vehicula vulputate cursus ac, placerat vitae ex. Nullam eu nisl purus. Curabitur vitae egestas turpis, quis volutpat felis. Quisque sit amet purus facilisis, posuere ante in, laoreet nisl. Pellentesque ornare dolor nec lectus porttitor, et venenatis orci auctor. Vestibulum ultrices id enim vel interdum. Ut non tortor placerat, consectetur sem at, viverra elit.
Etiam non tellus in nisl facilisis pharetra. Vivamus porttitor justo at fringilla euismod. Nunc neque lacus, scelerisque sed pellentesque quis, ullamcorper nec leo. Nullam sed dolor metus. Vivamus aliquet at erat eu blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis neque at eros feugiat, nec lacinia lorem finibus. In semper vel lacus eu porttitor. Curabitur mollis lectus ac purus pretium, non facilisis odio viverra. Aliquam erat volutpat. Pellentesque ultrices nulla et nisi placerat, non tempus nisl elementum. Sed dui dui, vestibulum posuere enim vitae, sollicitudin rhoncus metus.
</div>
)
})}
</List>
</>
)
};
export default MenuInteractiveColumn;
And I would like it to go to some div in my page like it does on the material ui website
EDIT : It kinda works now but it hides the top of the lorem Ipsum under my navbar
While i do not have the time to make an example based on your code here are some resources which might be interesting to you:
material-ui - AppTableOfContents
react-scrollspy - see example on how this can be used with tabs
react-scroll-agent
Antd anchor
see also material-ui: issue 16359 for more information
Is it possible in WP8 XAML wrap text around an image? How?
I know this is possible, in more than one way, using WPF.
Like #Jogy recommended, a RichTextBlock can be pretty handy when you throw in some RichTextBlockOverflow in the mix, say something like;
<Grid Background="White" Width="800" Height="800">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<RichTextBlock IsTextSelectionEnabled="True" TextAlignment="Justify"
OverflowContentTarget="{Binding ElementName=FirstOverflowArea}"
TextIndent="12">
<Paragraph>
<Italic>Whoa! An Image!</Italic>
<InlineUIContainer>
<Border Background="Gray">
<Image Source="Some/Image/Path/Pic.png" Height="100" Width="100"/>
</Border>
</InlineUIContainer>
So the idea is, we throw a bunch fluff in here and as it runs out of room,
it flows into our chain of Overflow containers that
we can put wherever and however we want, yay! Nam vitae ligula non ligula suscipit semper.
Duis sed nulla metus, id hendrerit velit. Curabitur dolor purus, bibendum eu cursus lacinia,
interdum vel augue. Aenean euismod eros et sapien vehicula dictum. Duis ullamcorper, turpis
nec feugiat tincidunt, dui erat luctus risus, aliquam accumsan lacus est vel quam. Nunc lacus
massa, varius eget accumsan id, congue sed orci. Duis dignissim hendrerit egestas. Proin ut
turpis magna, sit amet porta erat. Nunc semper metus nec magna imperdiet nec vestibulum dui fringilla. Sed sed ante libero, nec porttitor mi. Ut luctus, neque vitae placerat egestas,
urna leo auctor magna, sit amet ultricies ipsum felis quis sapien. Proin eleifend varius dui,
at vestibulum nunc consectetur nec. Mauris nulla elit, ultrices a sodales non, aliquam ac est. Quisque sit amet risus nulla. Quisque vestibulum posuere velit, vitae vestibulum eros scelerisque
sit amet. In in risus est, at laoreet dolor. Nullam aliquet pellentesque convallis. Ut vel tincidunt nulla. Mauris auctor tincidunt auctor.
</Paragraph>
<Paragraph>
, consectetur adipiscing elit. Sed ac mi ipsum. Phasellus vel malesuada mauris. Donec
pharetra, enim sit amet mattis tincidunt, felis nisi semper lectus, vel porta diam nisi in augue.
Pellentesque lacus tortor, aliquam et faucibus id, rhoncus ut justo. Sed id lectus odio, eget
pulvinar diam. Suspendisse eleifend ornare libero, in luctus purus aliquet non. Sed interdum, sem
vitae rutrum rhoncus, felis ligula ultrices sem, in eleifend eros ante id neque. Vivamus quam lorem,
varius vitae porta mollis, placerat quis est. Aenean eget sagittis massa. Sed tellus turpis,
ullamcorper eget imperdiet vel, faucibus vel nisl. Nunc sed suscipit quam. Vivamus convallis faucibus
dignissim. Fusce sollicitudin, quam vel cursus mattis, nisl velit tristique sapien, ac vestibulum
ante arcu a nisl. Vestibulum commodo gravida ante at tincidunt. Vestibulum in ornare nunc. Nullam ut
lorem vitae dui placerat lacinia sit amet a arcu. Nulla sit amet odio nisi. Praesent erat urna,
venenatis ac adipiscing vel, congue at lectus. Proin ac metus at quam luctus ultricies.
</Paragraph>
</RichTextBlock>
<RichTextBlockOverflow Grid.Column="1" x:Name="FirstOverflowArea"
Margin="10"
OverflowContentTarget="{Binding ElementName=SecondOverflowArea}"/>
<RichTextBlockOverflow Grid.Row="1" Grid.ColumnSpan="2" x:Name="SecondOverflowArea"
Margin="10"/>
</Grid>
Hope this helps, Cheers!
This is probably really simple but I've been on it for ages and can't figure it out....
If I have a simple ordered list, which when I view it in Fire Fox, everything looks fine; the list is displayed the full width of the browser.
If I look at the same page in my Android browser, the list only takes up about a third the width of the screen.
I don't understand it, I have no CSS rules applied so why should the Android browser not use the full width of the screen?
Here's my HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h2 style="text-align:center">This is a long heading which stretches across the page</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor diam, lobortis eu volutpat in, accumsan vel massa. Curabitur justo mauris, tempus ut feugiat nec, pellentesque et felis. Proin aliquam varius mi a ultrices. Nam purus tellus, posuere hendrerit tristique at, blandit eu tellus. Curabitur egestas diam at nunc volutpat rhoncus. Cras elementum, magna id tristique porta, justo leo ultrices nisl, et rhoncus magna odio id purus. Aenean pretium augue ut metus congue sed lobortis urna varius. Duis augue diam, posuere sit amet viverra vel, facilisis ac odio. Vestibulum nisi orci, luctus vitae luctus eget, lacinia ut dui. Ut imperdiet, enim nec mattis laoreet, tellus elit bibendum elit, non imperdiet enim mauris eu risus. Curabitur faucibus urna sed turpis tincidunt pulvinar. Etiam tristique nisl eu nibh sodales at convallis mi mattis. Fusce imperdiet posuere lorem quis vulputate. Ut in leo in lorem fermentum hendrerit quis vitae velit. Phasellus tristique mi ac neque tempus sollicitudin. In nec interdum enim. Fusce id magna et ipsum lobortis cursus. Nunc eleifend volutpat elit, a adipiscing tellus posuere et. Phasellus id mauris ante, vehicula suscipit leo.</li><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor diam, lobortis eu volutpat in, accumsan vel massa. Curabitur justo mauris, tempus ut feugiat nec, pellentesque et felis. Proin aliquam varius mi a ultrices. Nam purus tellus, posuere hendrerit tristique at, blandit eu tellus. Curabitur egestas diam at nunc volutpat rhoncus. Cras elementum, magna id tristique porta, justo leo ultrices nisl, et rhoncus magna odio id purus. Aenean pretium augue ut metus congue sed lobortis urna varius. Duis augue diam, posuere sit amet viverra vel, facilisis ac odio. Vestibulum nisi orci, luctus vitae luctus eget, lacinia ut dui. Ut imperdiet, enim nec mattis laoreet, tellus elit bibendum elit, non imperdiet enim mauris eu risus. Curabitur faucibus urna sed turpis tincidunt pulvinar. Etiam tristique nisl eu nibh sodales at convallis mi mattis. Fusce imperdiet posuere lorem quis vulputate. Ut in leo in lorem fermentum hendrerit quis vitae velit. Phasellus tristique mi ac neque tempus sollicitudin. In nec interdum enim. Fusce id magna et ipsum lobortis cursus. Nunc eleifend volutpat elit, a adipiscing tellus posuere et. Phasellus id mauris ante, vehicula suscipit leo.</li><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor diam, lobortis eu volutpat in, accumsan vel massa. Curabitur justo mauris, tempus ut feugiat nec, pellentesque et felis. Proin aliquam varius mi a ultrices. Nam purus tellus, posuere hendrerit tristique at, blandit eu tellus. Curabitur egestas diam at nunc volutpat rhoncus. Cras elementum, magna id tristique porta, justo leo ultrices nisl, et rhoncus magna odio id purus. Aenean pretium augue ut metus congue sed lobortis urna varius. Duis augue diam, posuere sit amet viverra vel, facilisis ac odio. Vestibulum nisi orci, luctus vitae luctus eget, lacinia ut dui. Ut imperdiet, enim nec mattis laoreet, tellus elit bibendum elit, non imperdiet enim mauris eu risus. Curabitur faucibus urna sed turpis tincidunt pulvinar. Etiam tristique nisl eu nibh sodales at convallis mi mattis. Fusce imperdiet posuere lorem quis vulputate. Ut in leo in lorem fermentum hendrerit quis vitae velit. Phasellus tristique mi ac neque tempus sollicitudin. In nec interdum enim. Fusce id magna et ipsum lobortis cursus. Nunc eleifend volutpat elit, a adipiscing tellus posuere et. Phasellus id mauris ante, vehicula suscipit leo.</li><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor diam, lobortis eu volutpat in, accumsan vel massa. Curabitur justo mauris, tempus ut feugiat nec, pellentesque et felis. Proin aliquam varius mi a ultrices. Nam purus tellus, posuere hendrerit tristique at, blandit eu tellus. Curabitur egestas diam at nunc volutpat rhoncus. Cras elementum, magna id tristique porta, justo leo ultrices nisl, et rhoncus magna odio id purus. Aenean pretium augue ut metus congue sed lobortis urna varius. Duis augue diam, posuere sit amet viverra vel, facilisis ac odio. Vestibulum nisi orci, luctus vitae luctus eget, lacinia ut dui. Ut imperdiet, enim nec mattis laoreet, tellus elit bibendum elit, non imperdiet enim mauris eu risus. Curabitur faucibus urna sed turpis tincidunt pulvinar. Etiam tristique nisl eu nibh sodales at convallis mi mattis. Fusce imperdiet posuere lorem quis vulputate. Ut in leo in lorem fermentum hendrerit quis vitae velit. Phasellus tristique mi ac neque tempus sollicitudin. In nec interdum enim. Fusce id magna et ipsum lobortis cursus. Nunc eleifend volutpat elit, a adipiscing tellus posuere et. Phasellus id mauris ante, vehicula suscipit leo.</li>
</ol>
</body>
</html>
Does anyone know how to fix this?
Screenshot follows
Please add the following meta tag between your head tags:
<meta name="viewport" content="width=device-width, initial-scale=1" />
It allows you to control the viewport's size and scale. If you need more info visit this documentation.
In case anybody has this same problem, I've found the answer - it is a bug with Android autofit in ICS & JB. Gingerbread seems ok.
The answer is here - android autofit mode causing issues with css width in web page
Just apply this workaround to the in question
/* work around mobile device auto-fitting */
#media only screen and (max-device-width: 800px) {
#content p {
background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
background-repeat:repeat;
}
}
What should I do to see all the content in label? I already used Textblock but I can't still see it's full content...
I am new in WPF so I still don't know what should I do with this problem.
this is my code behind:
lblFExtension.Content = "Type of File: " + fInfo.Extension;
lblFName.Content = "File Name: " + fInfo.Name;
lblFLocation.Content = "File Location: " + fInfo.Directory;
lblFSize.Content = "File Size: " + Convert.ToString(fileSizeConversion(fInfo.Length));
<TextBlock Height="49" Margin="304,127,53,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top"/>
adjust your texblock height and then give TextWrapping="Wrap".it will work.Before this you have to check texblock margin
You can use a TextBlock and enable TextWrapping like that:
<TextBlock TextWrapping="Wrap"><![CDATA[
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sed neque et tellus tincidunt interdum. Morbi diam eros, imperdiet at, volutpat et, vestibulum quis, sem. Curabitur eu tellus vel felis molestie malesuada. Pellentesque nec lacus. Aenean fringilla nonummy sapien. Morbi eu odio at turpis cursus tristique. Integer nec lectus sit amet turpis bibendum feugiat. Cras posuere condimentum sapien. Vivamus accumsan, lacus at bibendum vehicula, magna elit consectetuer diam, ac luctus elit diam non leo. Vestibulum lobortis augue nec nisl. Fusce viverra purus consequat lacus. Nullam elementum mattis tellus. In hac habitasse platea dictumst. Aliquam ac velit sit amet urna placerat fringilla. Fusce mattis arcu eget urna. Sed lacus.]]></TextBlock>
It might be that you need to rethink your design, as it might look strange when a value breaks and it has a label. So you could think of splitting the label (eg File name:) and value into two definitions and arrange them accordingly.