I'm trying to convert this table to divs to create a homepage for an online course. Can someone help me style the banner image and buttons in divs instead of a table? Here's the sample code:
<table class="tg" style="width: 785.948px;" cellspacing="2">
<tbody>
<tr>
<th class="tg-baqh" style="width: 726.948px;" colspan="5"><img src="https://canvas.ubc.ca/courses/1755/files/187001/preview" alt="TBLE banner-2.png" width="808" height="166" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/files/187001" data-api-returntype="File" /></th>
</tr>
<tr>
<td class="tg-6k2t" style="width: 130px; text-align: center;"><a id="" class="btn btn-small btn-primary" style="width: 141px; height: 21px;" title="Before We Meet" href="https://canvas.ubc.ca/courses/1755/modules/11024" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11024" data-api-returntype="Module">Link 1</a></td>
<td class="tg-6k2t" style="width: 130px; text-align: center;"><a id="" class="btn btn-small btn-primary" style="width: 135px; height: 21px;" title="Wk 1: Discover" href="https://canvas.ubc.ca/courses/1755/modules/11025" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11025" data-api-returntype="Module">Link 2</a></td>
<td class="tg-6k2t" style="width: 130px; text-align: center;"><a id="" class="btn btn-small btn-primary" style="width: 141px; height: 21px;" title="Wk 2: Design" href="https://canvas.ubc.ca/courses/1755/modules/11026" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11026" data-api-returntype="Module">Link 3</a></td>
<td class="tg-6k2t" style="width: 130px; text-align: center;"><a id="" class="btn btn-small btn-primary" style="width: 141px; height: 21px;" title="Week 3: Deliver" href="https://canvas.ubc.ca/courses/1755/modules/11027" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11027" data-api-returntype="Module">Link 4</a></td>
<td class="tg-6k2t" style="width: 130px; text-align: center;"><a id="" class="btn btn-small btn-primary" style="width: 141px; height: 21px;" title="Week 3: Deliver" href="https://canvas.ubc.ca/courses/1755/modules/11027" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11027" data-api-returntype="Module">Link 5</a></td>
</tr>
</tbody>
</table>
Just SWAGing your layout with the magic of Flex and CSS.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Test Page </title>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
<style>
.tg { width: 785.948px; }
.tg-bagh { width: 726.948px; }
.tg-6k2t { width: 130px; text-align: center; }
a { width: 135px; height: 21px; }
.wrapper {
display: flex;
flex-wrap: wrap;
margin: 0.2em;
padding: 0.2em;
}
.wrapper > div {
border: 2px solid black;
margin: 0.2em;
padding: 0.2em;
}
/*
FileName - styles.css
Description - CSS code for making the image responsive by setting the value of four properties
such as display, margin-left, margin-right, width
Author - Tanu Nanda Prabhu
*/
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
</style>
</head><body>
<div class="tg-baqh center">
<img src="https://canvas.ubc.ca/courses/1755/files/187001/preview"
alt="TBLE banner-2.png"
width="100%" height="166"
data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/files/187001"
data-api-returntype="File" />
</div>
<div class="wrapper">
<div class="tg-6k2t">
<a id="" class="btn btn-small btn-primary"
title="Before We Meet"
href="https://canvas.ubc.ca/courses/1755/modules/11024"
data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11024"
data-api-returntype="Module">Link 1</a>
</div>
<div class="tg-6k2t">
<a id="" class="btn btn-small btn-primary"
title="Wk 1: Discover"
href="https://canvas.ubc.ca/courses/1755/modules/11025"
data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11025"
data-api-returntype="Module">Link 2</a>
</div>
<div class="tg-6k2t">
<a id="" class="btn btn-small btn-primary"
title="Wk 2: Design"
href="https://canvas.ubc.ca/courses/1755/modules/11026"
data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11026"
data-api-returntype="Module">Link 3</a>
</div>
<div class="tg-6k2t">
<a id="" class="btn btn-small btn-primary"
title="Week 3: Deliver"
href="https://canvas.ubc.ca/courses/1755/modules/11027"
data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11027"
data-api-returntype="Module">Link 4</a>
</div>
<div class="tg-6k2t">
<a id="" class="btn btn-small btn-primary"
title="Week 3: Deliver"
href="https://canvas.ubc.ca/courses/1755/modules/11027"
data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11027"
data-api-returntype="Module">Link 5</a>
</div>
</div>
</body></html>
Could be made more responsive if you had defined more of your existing CSS
Removed all inline CSS statements for a start.
Related
I need put letters in a permanent site in a div like the next photo
as you can see I need to reduce the position of the letters
My code is this
<div class="col-md-4 col-xl-4 col-xs-4 col-sm-4 col-lg-4">
<div class="contenedor">
<center>
<h3>Helado de copoazú </h3>
</center>
<br />
<figure>
<img src="/as_website_sale_onepage/static/img/helado_copoazu.jpeg"
style="width: 100%;border-radius: 8px;" product_id='45' onmousemove="deshabilitar()"/>
<div class="centrado2" name="disponible_helado" id="agotado_45"></div>
</figure>
<center>
<div id="adiciona45_mostrar" style="font-weight:bold; font-size: 22px;">
Bs.
10
</div>
<button id="stepDown-helado" type="button" style="border-radius: 15px;"
class=" btn btn-success"
onclick="cambiar_inputs();" product_id='45'>-</button>
<input type="number" name="numero_helado" id="numero_helado" value="0"
min="0" readonly="1" size="3"
style="text-align: center;width:50px !important; border: 1px solid #97CCF3; color: #099EFB; font-weight: bold;border-radius: 15px;" />
<button id="stepUp-helado" type="button" style="border-radius: 15px;"
class=" btn btn-primary"
onclick="cambiar_inputs();" product_id='45'>+</button>
</center>
</div>
<hr style="border: 5px solid #1db33b; width:100%" />
</div>
How can i do that?
using css this is simple
div::after{
content: 'anyLetter';
}
or
div::before{
content: 'anyLetter';
}
Edit: if you want to add it in the around the location marked in the image,
i would suggest around the <h3> or the <figure> tags.
also adding a class like after-word would make it more usable
Trying to get a class to remain sticky and constantly be in view when the user scrolls down the page, but doesn't seem to work no matter what.
I tired:
.entry-summary{
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;}
But this does nothing.
The full code can be seen below and is part of this webpage https://aqwaa.net/product/constriction/:
<div class="qode-single-product-summary">
<div class="summary entry-summary">
<div class="clearfix">
<h1 class="product_title entry-title">Constriction</h1><p class="price"><span class="woocs_price_code" data-product-id="459"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">€</span>173.39</span></span></p>
<div class="woocommerce-product-details__short-description">
<p><strong>Mental Health Description: </strong>So often a symptom of anxiety is the feeling of a tightness or tension in the rib cage area. Anxiety has the ability to kick start your bodies fight or flight response, which can increase your stress which often leads to your bodies muscles to contract and tighten, hence, the ribcage tightness symptom. This piece is designed to bring awareness to how it feels inside for someone who is suffering with mental health problems.</p>
</div>
<form class="cart" action="https://aqwaa.net/product/constriction/" method="post" enctype="multipart/form-data">
<div class="quantity buttons_added">
<input type="button" value="-" class="minus">
<input type="text" id="quantity_5cba756e35068" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" aria-labelledby="Constriction quantity">
<input type="button" value="+" class="plus">
</div>
<button type="submit" name="add-to-cart" value="459" class="single_add_to_cart_button button alt single_add_to_cart_button qbutton button alt">Add to cart</button>
</form>
<div class="product_meta">
<span class="sku_wrapper">SKU: <span class="sku">AQ1007</span></span>
<span class="posted_in">Category: AQWAA</span>
<span class="tagged_as">Tag: Necklace</span>
</div>
<div class="q_accordion_holder toggle boxed woocommerce-accordion accordion ui-accordion ui-accordion-icons ui-widget ui-helper-reset" style="visibility: visible;">
<h6 class="title-holder clearfix description_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
<span class="tab-title">Description</span>
</h6>
<div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="accordion_content_inner">
<p><strong>Material Description:</strong> Produced in Dubai, UAE, the “Constriction” necklace is is .925 Sterling Silver finished in 18k Gold.</p>
<p><strong>Size:</strong> The pendant is 26.5 mm width – 27.3 mm height on a chain of X cm length.</p>
<style>.woocommerce-product-gallery__image{width: 100% !important;}</style>
</div>
</div>
<h6 class="title-holder clearfix additional_information_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
<span class="tab-title">Additional Information</span>
</h6>
<div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="accordion_content_inner">
<table class="woocommerce-product-attributes shop_attributes">
<tbody><tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--dimensions">
<th class="woocommerce-product-attributes-item__label">Dimensions</th>
<td class="woocommerce-product-attributes-item__value">26.5 × 27.3 mm</td>
</tr>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_gold">
<th class="woocommerce-product-attributes-item__label">Gold</th>
<td class="woocommerce-product-attributes-item__value"><p>18k Gold</p>
</td>
</tr>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_silver">
<th class="woocommerce-product-attributes-item__label">Silver</th>
<td class="woocommerce-product-attributes-item__value"><p>.925 Sterling Silver</p>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div><!-- .clearfix -->
</div><!-- .summary -->
</div>
I expect the class .summary.entry-summary to remain visible as the user scrolls down the page, this does not happen.
Based on your code snippet, it looks as though the .entry-summary class belongs to one div, which is a single child element in a container.
The position:sticky can only allow the child to 'float' over sibling elements within the same container.
I copied your code into codepen, and added another blank <div> in your <div class="qode-single-product-summary"> to take up some vertical space and provide a sibling element, and it appears to be working just fine.
(Look for my comments "I added this" towards the bottom of your code)
Also if you run the snippet I provided, you should see the sticky property working until approximately half way down when the dummy div I added ends...
.entry-summary {
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
}
/* i added this */
#spacefill {
height: 10000px;
}
<div class="qode-single-product-summary">
<div class="summary entry-summary">
<div class="clearfix">
<h1 class="product_title entry-title">Constriction</h1>
<p class="price"><span class="woocs_price_code" data-product-id="459"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">€</span>173.39</span>
</span>
</p>
<div class="woocommerce-product-details__short-description">
<p><strong>Mental Health Description: </strong>So often a symptom of anxiety is the feeling of a tightness or tension in the rib cage area. Anxiety has the ability to kick start your bodies fight or flight response, which can increase your stress
which often leads to your bodies muscles to contract and tighten, hence, the ribcage tightness symptom. This piece is designed to bring awareness to how it feels inside for someone who is suffering with mental health problems.</p>
</div>
<form class="cart" action="https://aqwaa.net/product/constriction/" method="post" enctype="multipart/form-data">
<div class="quantity buttons_added">
<input type="button" value="-" class="minus">
<input type="text" id="quantity_5cba756e35068" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" aria-labelledby="Constriction quantity">
<input type="button" value="+" class="plus">
</div>
<button type="submit" name="add-to-cart" value="459" class="single_add_to_cart_button button alt single_add_to_cart_button qbutton button alt">Add to cart</button>
</form>
<div class="product_meta">
<span class="sku_wrapper">SKU: <span class="sku">AQ1007</span></span>
<span class="posted_in">Category: AQWAA</span>
<span class="tagged_as">Tag: Necklace</span>
</div>
<div class="q_accordion_holder toggle boxed woocommerce-accordion accordion ui-accordion ui-accordion-icons ui-widget ui-helper-reset" style="visibility: visible;">
<h6 class="title-holder clearfix description_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
<span class="tab-title">Description</span>
</h6>
<div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="accordion_content_inner">
<p><strong>Material Description:</strong> Produced in Dubai, UAE, the “Constriction” necklace is is .925 Sterling Silver finished in 18k Gold.</p>
<p><strong>Size:</strong> The pendant is 26.5 mm width – 27.3 mm height on a chain of X cm length.</p>
<style>
.woocommerce-product-gallery__image {
width: 100% !important;
}
</style>
</div>
</div>
<h6 class="title-holder clearfix additional_information_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
<span class="tab-title">Additional Information</span>
</h6>
<div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="accordion_content_inner">
<table class="woocommerce-product-attributes shop_attributes">
<tbody>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--dimensions">
<th class="woocommerce-product-attributes-item__label">Dimensions</th>
<td class="woocommerce-product-attributes-item__value">26.5 × 27.3 mm</td>
</tr>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_gold">
<th class="woocommerce-product-attributes-item__label">Gold</th>
<td class="woocommerce-product-attributes-item__value">
<p>18k Gold</p>
</td>
</tr>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_silver">
<th class="woocommerce-product-attributes-item__label">Silver</th>
<td class="woocommerce-product-attributes-item__value">
<p>.925 Sterling Silver</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="spacefill">
</div>
</div>
<!-- .clearfix -->
</div>
<!-- .summary -->
<div id="spacefill">
<!-- I added this -->
</div>
</div>
Here's the solution that worked best for me. You can see the final result on the webpage. Involves using position:fixed and some nifty z-index cheats.
.woocommerce-product-gallery__image{width: 100% !important;}
#media all and (min-width:1000px) {
.qode-single-product-summary {
position: fixed;
z-index: 110;
right: 113px;
width: 40%;
}
.woocommerce .summary {
float: right;
width: 100%;
margin-bottom: 45px;
}
.woocommerce ul.products {
background: #fff;
z-index: 999999999999999999999;
position: relative;
display: table;
}
.qode-single-product-summary {
position: fixed;
z-index: 110;
right: 113px;
width: 40%;
}
.woocommerce .summary {
float: right;
width: 100%;
margin-bottom: 45px;
}
.woocommerce ul.products {
background: #fff;
z-index: 999999999999999999999;
position: relative;
display: table;
margin: 0 0 0px;
}
.content_bottom {
padding-top: 80px;
background: #fff;
}
.woocommerce-page .content .container .container_inner {
padding-bottom: 0!important;
}
h2.qode-related-upsells-title {
z-index: 99999999999;
background: #fff;
padding-top: 0!important;
display: table;
position: relative;
width: 100%;
margin-bottom: 0!important;
padding-bottom: 34px;
}
}
#media all and (min-width:1500px) {
.qode-single-product-summary {
width: 1300px; right:initial;
}
.woocommerce .summary {
width: 500px;
}
}
I have the below html code,i want to add a subtext(select Dates) for MyCalendar label.
<tr style="height:5%;">
<td colspan="2">
<span style="float:right;"> <label style="float: right">MyCalendar<input id="t1" class="sid myClassValue" style="float: right" ng-model="myData"></label> </span>
<span style="float:left;"> <a style="text-align: right; float: right; color: #c94e00" target="_blank" href="http://myURL.com">Click on link</a> </span>
</td>
</tr>
I tried as below but the alignment is not as expected:
<tr style="height:5%;">
<td colspan="2">
<span style="float:right;"> <label style="float: right;display:block;">MyCalendar: <br /><span> <font size="1">(select Dates) <font size="1"></span><input id="t1" class="sid myClassValue" style="float: right" ng-model="myData"></label>
</span>
<span style="float:left;"> <a style="text-align: right; float: right; color: #c94e00" target="_blank" href="http://myURL.com">Click on link</a> </span>
</td>
</tr>
You may try using :after element like this so you don't have to touch your HTML structure :
span.more label {
position: relative;
}
span.more label:after {
content: "(Select dates)";
position: absolute;
bottom: -10px;
left: 10px;
font-size: 11px;
}
<tr style="height:5%;">
<td colspan="2">
<span class="more" style="float:right;"> <label style="float: right">MyCalendar<input id="t1" class="sid myClassValue" style="float: right" ng-model="myData"></label> </span>
<span style="float:left;"> <a style="text-align: right; float: right; color: #c94e00" target="_blank" href="http://myURL.com">Click on link</a> </span>
</td>
</tr>
http://jsfiddle.net/rnmk0zhz/5/
My JSFiddle is above
I have 3 drop down boxes, and below them are three divs which are hidden. When 'no' is selected I want the box directly under it to show.
I dont want it to always show on the left. I want the middle box under the middle dropdown list if no is selected in the middle, the other two to hide unless one of those are selected also. If the user selects 'no' in two boxes then I want two boxes to show.
I've tried floating them, but the padding is off when one hides and one shows. Absolute position wont work because there are rows of these and they'll overlap.
I hope I'm clear on what I'm trying to do here.
<table style="padding-left: 56px; padding-top: 3px;">
<tr>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl1">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl2">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl3">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
</tr>
</table>
<div style="padding-left: 56px;" class="">
<div class="box1" style="display:inline-block; height: 150px; width: 415px;">
<span>box1</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
<div class="box2" style="display: inline-block; height: 150px; width: 409px;">
<span>box2</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
<div class="box3" style="display:inline-block; height: 150px; width: 409px;">
<span>box3</span>
<br/><br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
</div>
I think you can simplify it to this using jquery toggle:
$("[class^='box'").hide();
$("#ddl1").on("change", function() {
$('.box1').toggle($(":selected", this).text() == "no");
});
$("#ddl2").on("change", function() {
$('.box2').toggle($(":selected", this).text() == "no");
});
$("#ddl3").on("change", function() {
$('.box3').toggle($(":selected", this).text() == "no");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="padding-left: 56px; padding-top: 3px;">
<tr>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl1">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl2">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl3">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
</tr>
</table>
<div style="padding-left: 56px;" class="">
<div class="box1" style="display:inline-block; height: 150px; width: 415px;"> <span>box1</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
<div class="box2" style="display: inline-block; height: 150px; width: 409px;"> <span>box2</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
<div class="box3" style="display:inline-block; height: 150px; width: 409px;"> <span>box3</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
</div>
After your comment about the position of the boxes i suggest to use visibility: hidden instead of display: none:
$("[class^='box'").css("visibility", "hidden");
$("#ddl1").on("change", function() {
$(":selected", this).text() == "no" ? $('.box1').css('visibility', 'visible') : $('.box1').css('visibility', 'hidden');
});
$("#ddl2").on("change", function() {
$(":selected", this).text() == "no" ? $('.box2').css('visibility', 'visible') : $('.box2').css('visibility', 'hidden');
});
$("#ddl3").on("change", function() {
$(":selected", this).text() == "no" ? $('.box3').css('visibility', 'visible') : $('.box3').css('visibility', 'hidden');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="padding-left: 56px; padding-top: 3px;">
<tr>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl1">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl2">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl3">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
</tr>
</table>
<div style="padding-left: 56px;" class="">
<div class="box1" style="display:inline-block; height: 150px; width: 415px;"> <span>box1</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
<div class="box2" style="display: inline-block; height: 150px; width: 409px;"> <span>box2</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
<div class="box3" style="display:inline-block; height: 150px; width: 409px;"> <span>box3</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
</div>
Updating the answer after the change
Give a class say .box to the boxes and float it so that they are in one line. Also I have set width to the boxes as well as textarea giving !important. You should remove the inline widths of the textarea and the boxes and then remove this !important
.box {
width: 25% !important;
float: left;
margin-left: 5%;
}
.box textarea {
width: 100% !important;
}
See fiddle
try the below sample, hope this will help you
.box1, .box2, .box3{
visibility: hidden;
}
#wrapper{
width:95%;
overflow:auto;
}
Fiddle Demo
I am using JQM table in my html and included all neccesary jQuery file. Please find below my code.
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="jqueryMobile/jquery.mobile-1.4.2.min.css">
<link type="text/css" href="jqueryMobile/jquery.mobile.inline-svg-1.4.2.min.css" rel="stylesheet">
<script src="jqueryMobile/jquery-1.10.2.min.js"></script>
<script src="jqueryMobile/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="pageten">
<div data-role="header" style="color: white; width: 100%; background-color: red; text-align: center">
<h2>My Services</h2>
</div>
<div>
<input type="image" id="back" name="back" src="images/back.png" alt="Back" onclick="currentPage.back();">
<input type="image" style align="right" id="home" name="home" src="images/home.png" alt="Home" onclick="currentPage.loadmainmenu();">
</div>
<br>
<div data-role="content">
<div>
<table border="1" data-role="table" id="table-reflow" class="ui-responsive table-stroke" style="margin-left: 5%; height: auto; margin-right: 5%; width: auto;">
<thead>
<tr style="font-size: 15px; text-align: center">
<th colspan="1" data-priority="1" style="text-align: center">Currently Active</th>
<th data-priority="1" style="text-align: center">Available Activation</th>
</tr>
</thead>
<tbody>
<tr style="font-size: 15px; text-align: center">
<th style="text-align: center">0</th>
<th style="text-align: center">25</th>
</tr>
<tr style="font-size: 15px; text-align: center">
<th colspan="2" style="text-align: center">Details are as of 22-May-2014 11:44 AM</th>
</tr>
</tbody>
</table>
</div>
</div>
<div data-role="footer" style="margin-left: 5%; height: auto; margin-right: 5%; width: 90%;">
<div class="ui-block-a">
<input type="image" id="currentservices" name="currentservices" src="images/my_services.png" alt="currentservices" onclick=""><br>
<span>Current Services</span>
</div>
<div class="ui-block-b">
<input type="image" id="addservices" name="addservices" src="images/add_my_services.png" alt="addservices" onclick="currentPage.loadaddservices();"><br>
<span>Add Services</span>
</div>
<div class="ui-block-c">
<input type="image" id="removeervices" name="removeervices" src="images/remove_my_services.png" alt="removeervices" onclick=""><br>
<span>Remove Services</span>
</div>
</div>
</div>
Please Find Image attachment, it displayed deformed table on UI Screen of simulator with red Rectangular bracket whereas it should be like in green rectangle. I am not getting reason of Why its getting distorted. Please help me with it
you need to use data-mode="none" on your table,
this will keep the high priority columns intact. and also doesnt show the option to hide the columns manually.
here is the working code
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.js">
<link type="text/css" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page" id="pageten">
<div data-role="header" style="color: white; width: 100%; background-color: red; text-align: center">
<h2>My Services</h2>
</div>
<div>
<input type="image" id="back" name="back" src="images/back.png" alt="Back" onclick="currentPage.back();">
<input type="image" style align="right" id="home" name="home" src="images/home.png" alt="Home" onclick="currentPage.loadmainmenu();">
</div>
<br>
<div data-role="content">
<div>
<table border="1" data-role="table" id="table-reflow" class="ui-responsive table-stroke" style="margin-left: 5%; height: auto; margin-right: 5%; width: auto;" data-mode="none">
<thead>
<tr style="font-size: 15px; text-align: center">
<th colspan="1" data-priority="1" style="text-align: center">Currently Active</th>
<th data-priority="1" style="text-align: center">Available Activation</th>
</tr>
</thead>
<tbody>
<tr style="font-size: 15px; text-align: center">
<th style="text-align: center">0</th>
<th style="text-align: center">25</th>
</tr>
<tr style="font-size: 15px; text-align: center">
<th colspan="2" style="text-align: center">Details are as of 22-May-2014 11:44 AM</th>
</tr>
</tbody>
</table>
</div>
</div>
<div data-role="footer" style="margin-left: 5%; height: auto; margin-right: 5%; width: 90%;">
<div class="ui-block-a">
<input type="image" id="currentservices" name="currentservices" src="images/my_services.png" alt="currentservices" onclick=""><br>
<span>Current Services</span>
</div>
<div class="ui-block-b">
<input type="image" id="addservices" name="addservices" src="images/add_my_services.png" alt="addservices" onclick="currentPage.loadaddservices();"><br>
<span>Add Services</span>
</div>
<div class="ui-block-c">
<input type="image" id="removeervices" name="removeervices" src="images/remove_my_services.png" alt="removeervices" onclick=""><br>
<span>Remove Services</span>
</div>
</div>
</div>
</body>
</html>
hope it helps.