The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Problem with word wrapping in a form
RockHudson
post Jul 20 2015, 01:14 PM
Post #1





Group: Members
Posts: 4
Joined: 20-July 15
Member No.: 23,033



I have been developing a mobile phone version of my website and have a problem I can't solve.

The code works fine on the PC and iPad version, but when I output the data into a table on the mobile version, it does not wrap the text in the cell.



I have tried changing the CSS style using- word-wrap: break-word; but this does not make any difference.

Both the header row and all of the data rows seem all bunched up.

Here is the CSS script:
CODE

body
{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
}

img
{
border:none;
}

ul,li,h1,h2,h3,h4,h5,h6,p,span,td,div
{
margin:0px;
padding:0px;
line-height:0px;
list-style:none;
}

li a,a,a:hover,li a:hover
{
text-decoration:none;
}


input,
textarea,
select {
    font:100% Arial, Helvetica, sans-serif;
    vertical-align:middle;
    color:#000;
    outline:none;
}
form, fieldset {
    margin:0;
    padding:0;
    border-style:none;
}



/*Site Gentral Start*/

#wrapper
{
width:100%;
height:auto;
float:left;
}

#page
{
width:300px;
height:auto;
margin:0px auto;
}


/*header Start*/

.header
{
width:300px;
height:auto;
float:left;
background:#fbfaf9;
}

.logo
{
width:300px;
height:auto;
float:left;
padding:0px 0px 10px 18px;
background:url(../images/border.png) bottom repeat-x;
}

.banner
{
width:300px;
height:auto;
float:left;
padding:0px 0px 0px 18px;
}

.small-logo
{
width:140px;
height:auto;
float:left;
}

.home
{
width:40px;
height:50px;
float:right;
padding-top:30px;
}

/*content Start*/

.content
{
width:300px;
height:auto;
float:left;
padding:0px 0px 0px 18px;
background:#fbfaf9;
}

.content ul
{
margin:12px 0px 0px 0px;
padding:0px;
}

.content ul li
{
background:url(../images/menu-bg.png) no-repeat;
height:25px;
font:bold 12px Arial, Helvetica, sans-serif;
color:#383333;
padding:14px 0px 0px 15px;
margin-bottom:15px;
display:block;
}

.content ul li a,a:hover
{
color:#383333;
}

.content h1
{
font:18px Arial, Helvetica, sans-serif;
color:#8f9294;
padding:5px 0px 5px 0px;
}

.content p
{
font:12px Arial, Helvetica, sans-serif;
color:#8f9294;
line-height:18px;
padding-right:22px;
text-align:justify;
padding-bottom:15px;
}

.dtable {

font-size:xx-small;
color:black;
padding-top:10px;
padding-bottom:10px;
word-wrap: break-word;
}

/*footer Start*/

.footer
{
width:300px;
height:auto;
float:left;
padding:5px 0px 20px 18px;
background:#fbfaf9;
}

.footer-left
{
width:50px;
height:auto;
float:left;
}
.footer-right
{
width:60px;
height:auto;
float:left;
}
.footer-center
{
width:290px;
float:none;
background:url(../images/footer-center.png);
height:28px;
text-align:center;
font:12px Arial, Helvetica, sans-serif;
color:#FFFFFF;
padding-top:12px;
}


Here is the php/html script I am running:
CODE

<?php
session_start();

include("cverse_connect.php");
doDB();

//check for required info from the query string


//verify the Event exists
$verify_Event_sql = "SELECT ID, Event_Type FROM Events WHERE ID = '".$_POST["Event_Type"]."'";
$verify_Event_res =  mysqli_query($mysqli, $verify_Event_sql) or die(mysqli_error($mysqli));

if (mysqli_num_rows($verify_Event_res) < 1) {
    //this Event does not exist
    $display_block = "<p><em>You have selected an invalid Event.<br/>
    Please try again.</em></p>";

} else {
//get the Event ID
    while ($Event_info = mysqli_fetch_array($verify_Event_res)) {
        $Event_ID = stripslashes($Event_info['ID']);
        $Event_Name = ($Event_info['Event_Type']);
    }

$verify_Mood_sql = "SELECT ID, Event_Sub_Type FROM Event_Sub WHERE ID = '".$_POST["Mood"]."'";
$verify_Mood_res =  mysqli_query($mysqli, $verify_Mood_sql) or die(mysqli_error($mysqli));

if (mysqli_num_rows($verify_Mood_res) < 1) {
    //this Event does not exist
    $display_block = "<p><em>You have selected an invalid Mood.<br/>
    Please try again.</em></p>";
}

    while($Mood_info = mysqli_fetch_array($verify_Mood_res)) {
        $Mood_ID = ($Mood_info['ID']);
        $Mood_Name = ($Mood_info['Event_Sub_Type']);
    }
    //gather the Events
    $get_Event_sql  = "SELECT Verses.ID AS versesID, Verses.Verse, Verses.Sub_Type, Verses.Event, Events.ID AS eventsID, Events.Event_Type, Event_Sub.ID AS event_SubID, Event_Sub.Event_Sub_Type
    FROM Verses
    LEFT JOIN Events
    ON Verses.Event = Events.ID
    LEFT JOIN Event_Sub
    ON Verses.Sub_Type = Event_Sub.ID
    WHERE Verses.Event = '".$_POST["Event_Type"]."' And Verses.Sub_Type = '".$_POST["Mood"]."'
    ORDER BY Verses.ID ASC";


    $get_Event_res = mysqli_query($mysqli, $get_Event_sql) or die(mysqli_error($mysqli));

    //create the display string
    $display_block .= "

<table width=\"100%\" cellpadding=\"10\" cellspacing=\"1\" border=\"1\" BGCOLOR=\"white\" >
    <tr>
    <th>ID</th>
    <th>VERSE</th>
    <th>MOOD/SUB TYPE</th>
    <th>CHOOSE</th>
    </tr>";    

    while ($Verse_info = mysqli_fetch_array($get_Event_res)) {
        $Verse_id = $Verse_info['versesID'];
        $Verse_text = nl2br(stripslashes($Verse_info['Verse']));
        $Mood_info = $Verse_info['Event_Sub_Type'];
        $VID = $Verse_id;
        //add to display
$display_block .= "
<tr>
<td width=\"7%\" valign=\"center\">".$Verse_id."</td>
<td width=\"47%\" valign=\"center\">".$Verse_text."</td>
<td width=\"31%\" valign=\"center\">" .$Mood_info."</td>
<td width=\"15%\" valign=\"center\"halign=\"center\"
<form METHOD=\"POST\" ACTION=\"mVInput1.php\">
<input type=\"Radio\" name=\"VID\" value=$VID >

</td></tr>";
}

$display_block.="<input type=submit value=Submit>
</form>";


    //free results
    mysqli_free_result($get_Event_res);
    mysqli_free_result($verify_Event_res);    
//close connection to MySQL
    mysqli_close($mysqli);
    
//close up the table
$display_block .="</table>";    
}
?>

<!-- #BeginLibraryItem "MobileBasic.lbi" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name= "viewport" content="width=360"/>
<title>Welcome</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>


<div id="wrapper"><!--Wrapper start-->
<div id="page"><!--Page start-->

<div class="header"><!--Header start-->
<div class="logo"><a href="#"><img src="images/logo.png" alt="" /></a></div>
<div class="small-logo"><a href="#"><img src="images/Site_small.png" alt="" /></a></div>
<div class="home"><a href="index.html"><img src="images/home.png" alt="" /><p>Home</p></a><br></div>
</div><!--Header End-->

<!--content start-->
<div class="content">

<div class="dtable">
<?php echo $display_block; ?></div>

</div><!-- end #content -->


<!--content End-->

<!--Footer start-->
<div class="footer">

<div class="footer-center">© 1066Cards4U</div>

</div>
<!--Footer End-->

</div>
</div>
<!--Wrapper End-->

</body>


</html>


I know this is not strictly html, but I guess that the problem lies in the html/CSS code.

Why is this happening?

Can anybody help?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 20 2015, 02:10 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



We need to see the HTML and table cell content that the PHP script sends to the browser (the PHP code itself doesn't matter). But it seems the PHP script inserts half the second half of the form between the </tr> and </table> end tags, which is invalid HTML.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 12:17 PM