0

Basically in my Design & Browser the CSS of my JQuery Slider makes my ASP.NET buttons appear that way even though the actual CSS of the buttons appears behind and in the section it should be as shown below in the image. CSS Problem

am I referencing something wrong for the ASP side as the page functions how it should it's just the styling of it i might of got wrong or maybe have something I shouldn't have , so my question is Can you think of anything wrong with this which could cause the problems I have at hand?

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="MachineSweepLite.aspx.vb" Inherits="Production_MachineSweepLite" %>
  <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
   <!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 id="Head1" runat="server">
 <title></title>
  <link  href="jquery.mobile-1.4.2.css" rel="stylesheet" />
   <link id="stylesheet" href="ControlStyle.css" rel="stylesheet" type="text/css" runat="server" />
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'>     </script>
     <script type='text/javascript' src='jquery.mobile-1.4.2.js' ></script>
       <meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
       </head>
<body background="../icons/Building-Confidence-logo.jpg" onload="init();">
 <form id="form1" runat="server" class="formbackground">
  <h1 runat="server" id="pageTitle"> </h1>
            <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" 
                      AutoGenerateColumns="False" BackColor="White" Width="100%" 
                      style="font-size: xx-large">
               <AlternatingRowStyle BackColor="#CCFFFF" />
                <Columns>
                 <asp:BoundField DataField="Questions" HeaderText="Questions" SortExpression="Questions" />
                  <asp:TemplateField ItemStyle-Width="15%">
                    <ItemTemplate>
                      <div style="height: 50px; float: left; width: 27%;">
                        <%-- <label for="quesTion"></label>--%>
                         <select name="quesTion" id="quesTion" data-role="slider" runat="server">
                          <option value="Yes" selected="selected">Yes</option>
                           <option value="No">No</option>
                            </select>
                              </div>
                               </ItemTemplate>
                                </asp:TemplateField>
                                 </Columns>
            </asp:GridView>
             <asp:SqlDataSource ID="SqlDataSource1" runat="server"
              ConnectionString="<%$ ConnectionStrings:saleConnectionString %>"                  SelectCommand="Select AreaID, QuestionID, Questions From (Select AreaID, Question1,
  Question2,
  Question3,
  Question4,
  Question5,
  Question6,
  Question7
From MachineSweepQuestions) x
UNPIVOT
(
  Questions
  For QuestionID in (Question1, Question2, Question3, Question4, Question5, Question6,Question7)
) unpiv Where AreaID = @AreaID">
              <SelectParameters>
               <asp:QueryStringParameter Name="AreaID" QueryStringField="AreaID" />
                </SelectParameters>
                 </asp:SqlDataSource>
                   <div style="width: 300px">
                   <asp:Button ID="backBtn" runat="server" Text="Back" cssclass="classname" 
                   Height="50px" Width="90px" />
               &nbsp;<asp:Button ID="checkBtn" runat="server" Text="Complete Check" cssclass="classname" 
                   Height="50px" Width="149px" />
              </div>
             </form>
            </body>
           </html>

1 Answer 1

1

You have JQuery Mobile referenced on the page, which will set it's own styles. You could set a theme swatch on the buttons to set one of the default mobile styles,http://demos.jquerymobile.com/1.2.0/docs/api/themes.html

Or you could use the theme roller the create a custom theme.http://themeroller.jquerymobile.com/

The other option is to override the style which can be tricky. Here is a question discussing the issue and how you might be able to override. StackOverflow Overriding JQuery Mobile CSS

Sign up to request clarification or add additional context in comments.

4 Comments

Hi Elizabeth , this app is currently actually being coded to be displayed into a Tablet ( mobile device ) from the mobile browser so I know it can set it's own styles , would you think it would be something to do with a cross reference in the <form> tag being a class that actually isn't referenced in any of my CSS as it is stopping my back ground from displaying meaning it could be taking the forfront of the app? I literally have no Idea but a Jquery Theme is beyond my ability for the moment & I don't think the client ( my boss ) would want it done this way. So what can you suggest?
I am not sure if it has anything to do with the class on the form, though you could try taking it out to see if it makes a difference. I am pretty sure the problem lies with the usage of the JQuery Mobile library as it will extend the width of the buttons and apply basic style, which sits over the top of the actual buttons. This is default behaviour. It can be overridden with CSS targeting the JQuery Mobile classes, applying a theme will enable you to style it to your preference, which will set all button styles and other controls for you or stopped by removing JQuery mobile framework.
Though, you can also set data-role="none" on the buttons to get JQuery mobile to ignore them.
the data-role="none" has worked wonders for me , thank you Elizabeth.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.