annyvz Posted September 1, 2014 Share Posted September 1, 2014 Hi, I have a <div> tag within a table with some asp code within. I am trying to get the text to word wrap. If I use overflow x: auto/scroll it gives a scroll bar that I dont want, and hidden: hides the text. I just want the text to wrap to the next line. My CSS: .issuedet1 {display:block;color:#fffffff;background-color:#00678e;margin-top:10px;border-style:none;border-right:2px solid;border-color:#00678e;padding-right: 5px;float: left;width:95%;overflow:auto;} My HTML: <div align="left" class="issuedet1"> <it:IssueTabs id="ctlIssueTabs" Visible="false" runat="Server" /> </div> </form> If anyone can help me with some suggestions I would really appreciate it Thx Link to comment Share on other sites More sharing options...
dsonesuk Posted September 1, 2014 Share Posted September 1, 2014 Table what table? if produced by asp, then it would be better to produce end html result.The scroll bars only appear if element or element and margins/padding applied to it, exceeds browser window width. Then you must make sure this element is a size to fit, and being a table when resized smaller should cause text to wrap. Link to comment Share on other sites More sharing options...
annyvz Posted September 1, 2014 Author Share Posted September 1, 2014 Here is my full HTML, the part in the red is what I am trying to wrap, however I tried doing it in the asp but does not work....So I need to do this with CSS <%@ Register TagPrefix="it" TagName="IssueTabs" Src="~/Issues/UserControls/IssueTabs.ascx" %><%@ Register TagPrefix="it" TagName="PageTabs" Src="~/UserControls/PageTabs.ascx" %><%@ Register TagPrefix="it" TagName="PickPriority" Src="~/UserControls/PickPriority.ascx" %><%@ Register TagPrefix="it" TagName="PickCategory" Src="~/UserControls/PickCategory.ascx" %><%@ Register TagPrefix="it" TagName="PickSingleUser" Src="~/UserControls/PickSingleUser.ascx" %><%@ Register TagPrefix="it" TagName="PickProject" Src="~/UserControls/PickProject.ascx" %><%@ Register TagPrefix="it" TagName="PickStatus" Src="~/UserControls/PickStatus.ascx" %><%@ Register TagPrefix="it" TagName="PickMilestone" Src="~/UserControls/PickMilestone.ascx" %><%@ Register TagPrefix="it" TagName="DisplayCustomFields" Src="~/UserControls/DisplayCustomFields.ascx" %><%@ Register TagPrefix="it" TagName="AdminTabs" Src="~/Administration/UserControls/AdminTabs.ascx" %><%@ Page Language="c#" smartnavigation="true" validaterequest="false" Inherits="ASPNET.StarterKit.IssueTracker.Issues.IssueDetail" CodeFile="IssueDetail.aspx.cs" %><html><head> <meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" /><style type="text/css"><!--a.white:link {color: #ffffff; background: #none; text-decoration: none;font-weight:none;}a.white:active {color: #ffffff; background: #none; text-decoration: none;font-weight:none;}a.white:visited {color: #ffffff; background: #none; text-decoration: none;font-weight:none;}a.white:hover {color: #ffffff; background: #none;text-decoration: none;font-weight:none;}--></style> <link href="../Styles/Styles.css" rel="stylesheet" type="text/css" /></head><body><div> <img runat="server" src="~/Images/blank_banner.png" border="0" class="responsive-image" alt="Null"/> <div class="h2" align="right"> <h2> 24h Support: +27 (79) 874 0113<br>E-mail: <a href="mailto:ctrack_support@digicore.co.za" target="_blank" class="white">ctrack_support@digicore.co.za</a> </h2> </div></div><div id="wrapper2"><div class="h6" align="right"><h6><logoff><asp:HyperLink id="lnkLogOff" Visible="True" Text="Log Off {0}" NavigateUrl="~/LogOff.aspx" Runat="Server" /></logoff></h6></div><div style="margin-top:-74px;"><div class="tabInactiverep"><it:PageTabs id="ctlPageTabs" Runat="Server" /></div></div></div><form runat="server" style="width:95%" ><div style="width:95%"> <table class="contentTableShort"> <tr> <td class="contentCell3"> <table cellpadding="10" width="800" class="newissue"> <tr> <td colspan="2"> <asp:Label id="lblError" ForeColor="red" EnableViewState="false" Runat="Server" /> </td> </tr> <tr> <td><h1>New Issue <asp:Label id="lblIssueId" Runat="Server" /></h1> </td> <td align="right"> <asp:button id="btnSave" runat="server" width="90px" CssClass="standardText" Text="Save" onclick="btnSaveClick"></asp:button> <asp:button id="btnDone" runat="server" width="90px" CssClass="standardText" Text="Done" onclick="btnDoneClick"></asp:button> <asp:button id="btnCancel" runat="server" width="90" align="center" causesvalidation="False" CssClass="standardText" Text="Cancel" onclick="CancelButtonClick"></asp:button> <asp:button id="btnDelete" runat="server" width="90" Text="Delete" CssClass="standardText" causesvalidation="False" Enabled="false" onclick="DeleteButtonClick"></asp:button> </td> </tr> <tr> </tr> </table> <br> <table cellpadding="5" width="800"> <tr> <td> <b>Description:</b> </td> <td> <asp:TextBox id="txtTitle" Columns="100" Runat="Server" /> <asp:RequiredFieldValidator ControlToValidate="txtTitle" Text="(required)" runat="server" id="RequiredFieldValidator1" /> </td> </tr> <tr> <td> <b>Category:</b> </td> <td> <it:PickCategory id="dropCats" DisplayDefault="true" Required="true" Runat="Server" /> </td> </tr> <tr> <td> <b>Date Created:</b> </td> <td> <asp:Label id="lblDateCreated" Runat="Server" /> </td> </tr> </table> <table cellpadding="5" width="800"> <tr> <td colspan="4"> <hr class="qdhr"> </td> </tr> <tr> <td> <b>Assigned To:</b> </td> <td> <it:PickSingleUser id="dropAssigned" DisplayDefault="true" Required="true" runat="Server" /> </td> <td> <b>Status:</b> </td> <td> <it:PickStatus id="dropStatus" DisplayDefault="true" Required="true" Runat="Server" /> </td> </tr> <tr> <td> <b>Logged By:</b> </td> <td> <it:PickSingleUser id="dropOwned" DisplayDefault="true" Required="true" runat="Server" /> </td> <td> <b>Priority:</b> </td> <td> <it:PickPriority id="dropPriority" DisplayDefault="true" Required="true" Runat="Server" /> </td> </tr> <tr> <td> <b>Created By:</b> </td> <td> <asp:Label id="lblCreator" Runat="Server" /> </td> <td> <b>Milestone:</b> </td> <td> <it:PickMilestone id="dropMilestone" DisplayDefault="true" Required="true" Runat="Server" /> </td> </tr> </table> <it:DisplayCustomFields id="ctlCustomFields" Runat="Server" /> </td> </tr> </table> </div> <br> <div align="left" class="issuedet1"> <it:IssueTabs id="ctlIssueTabs" Visible="false" runat="Server" /> </div> </form></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted September 1, 2014 Share Posted September 1, 2014 (edited) Sorry i mean the html code you see when the webpage is processed by asp, and all you see is html as when you look at page using view source.The nested tables with width 800 could cause the parent table to be so large it causes scrollbars to appear. Edited September 1, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
annyvz Posted September 2, 2014 Author Share Posted September 2, 2014 I seem to have found the solution to my problem, the asp content was in a <pre> tag, width attribute is not supported, here is the code I used to fix it. Hope this helps someone in future: CSS:pre { white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */ white-space: -pre-wrap; /* Opera */ white-space: -o-pre-wrap; /* Opera */ white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */ word-wrap: break-word; /* IE 5.5+ */} Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now