Response title
This is preview!
buttons overlapping other text (button positioning issue)
in jQuery Mobile
•
12 years ago
i have two divs:
- <div id="details_content">
- <p>Loading..</p>
- </div>
- <div id="detail_constant">
- <p><a href='#' id='add_button' data-role='button' data-inline="true" data-icon='add' data-theme='e'>Add This Widget</a></p>
- </div>
i dynamically load content into the top div:
- $.get('store/store.php', {type:"get_details"}, function(data) {
- $("#details_content").html(data['html_output']);
- }, 'json');
when my window size is small enough (it happens on my iphone and in chrome when i decrease the height of the browser window), the button overlaps the text in the top div. basically it seems to position itself according to the bottom of the window instead of placing itself under the other div.
after playing around a bit i found that adding this CSS makes the button render in the correct place (without this it's position:relative):
- .ui-btn, .ui-btn-inner{
- position:inherit;
- }
however the icon on the button gets randomly placed on the page and i can't figure out how to get it back on the button.
why is this happening and anyone know how i can fix it?
thanks.
3
