I've created a site with master page. But whenever user clicked on the Content, there will be a annoying selecting blue line wrapping the whole content pages. Any idea what is it and how should I solved it? Thanks.
Master Page :-
<body>
<div id="mainPage" data-role="page">
<header>
<section>
<h1 runat="server" id="nandosHeader">PERi-Vilege</h1>
<div class="wrapperTopNavi">
<div class="topNavi">
<div class="btnBack left"><a data-rel="back" href="javascript:void(0);"><span></span></a></div>
<div class="btnRefresh right"></div>
</div>
</div>
</section>
</header>
<div class="BigWrapper">
<form id="form1" runat="server">
<input id="hiddenAppSettings" type="hidden" value="<% =AppSettings %>" />
<asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
</form>
<div class="footer"></div>
</div>
<script type="text/javascript">
$.mobile.document.bind("pageinit", function (event, ui) {
$('.ui-loader').hide();
});
</script>
<asp:ContentPlaceHolder ID="PageScriptContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
Screenshot with the annoying selecting blue lines
Content Page :-
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="BigWrapper">
<div class="ContentWrapper">
<h1>Settings</h1>
</div>
<div class="btnDivider"></div>
<div class="ClickDiv" style="cursor:pointer;cursor:hand;">
<div class="setting">
<a href="<%=ResolveUrl("~/Member/Edit.aspx")%>" data-ajax="false">
<p>Edit Profile</p>
</a>
</div>
<div class="arrowright"></div>
</div>
<div class="clear"></div>
<div class="btnDivider"></div>
<div class="ClickDiv" style="cursor:pointer;cursor:hand;">
<div class="setting">
<a href="<%=ResolveUrl("~/HowItWorks.aspx") %>" data-ajax="false">
<p>How it Works</p>
</a>
</div>
<div class="arrowright"></div>
</div>
<div class="clear"></div>
<div class="btnDivider"></div>
<div class="ClickDiv" style="cursor:pointer;cursor:hand;">
<div class="setting">
<a href="<%=ResolveUrl("~/Terms"+ConfigurationManager.AppSettings["loyalty_country"].ToString()+".aspx")%>" data-ajax="false">
<p>Terms and Conditions</p>
</a>
</div>
<div class="arrowright"></div>
</div>
<div class="clear"></div>
<div class="btnDivider"></div>
<div class="ClickDiv" style="cursor:pointer;cursor:hand;">
<div class="setting">
<a href="<%=ResolveUrl("~/Privacy"+ConfigurationManager.AppSettings["loyalty_country"].ToString()+".aspx")%>" data-ajax="false">
<p>Personal Data Protection Policy</p>
</a>
</div>
<div class="arrowright"></div>
</div>
<div class="clear"></div>
<div class="btnDivider"></div>
<div class="setting1" style="cursor:pointer;cursor:hand;">
<a href="javascript:void(0);" id="btn_logout">
<p>Log Out</p>
</a>
</div>
</div>
</asp:Content>
Related
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<section class="Banner_Home UnitDetails">
<div class="innBanner">
<div class="container-fluid">
<div class="Slide1">
<h5>Your TEXT... XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXX.</h5>
<div>
<img src="../Images/image1.svg" style="width:200px;" />
</div>
<div><a id="btnOnclickImage1" runat="server" onserverclick="btnImage1_ServerClick">Login Now</a></div>
</div>
<div class="Slide2">
<h5>Your Another TEXT... XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXX.</h5>
<div>
<img src="../Images/image2.svg" style="width:200px;" />
</div>
<div><a id="btnOnclickImage2" runat="server" onserverclick="btnImage2_ServerClick">Login Now</a></div>
</div>
</div>
</div>
</section>
<section class="ContentBody">
<div class="container-fluid">
<div class="accordion-container">
<div class="set">
slide1 and slide2 div content should be horizontally scrolling automatically (assume sliding time 30 seconds once)
ASP.NET Webforms 4.8 on framework
i have made the website mobile responsive.All are done.
This is the website which i made responsive.
alpha.dubaiexporters.com
what is happening is that when its of desktop size,the footer links are clickable but when i resize it to small screen,footer links shows unclickable.
i used the inspect element to know the issue and i found that its because of <div class="clearfix"> . So i removed it from my coding but the problem still persists.I dont have any idea.Even i tried removing .clearfix before and after from bootstrap.cs but its not working.[
i dont know why clearfix div is displaying even after removing it from code.
code:
<div class="footer-wrapper">
<div class="footer-container vc_row wpb_row vc_row-fluid ">
<%-- <img src="//cohhe.com/demo/sky/sky-directory/wp-content/uploads/2015/01/skydirectory-footer-logo.png" class="footer-logo " alt="Sky Directory" />--%>
<div class="footer-content" style="padding-top:60px;">
<div class="footer-links-container columns_count_2">
<div id="first" class="widget-area footer-links vc_col-sm-6 " role="complementary">
<div id="sky-directory-useful-links-20" class=" sky-usefullinks widget widget_sky-directory-useful-links row-fluid" style="width: 50%;float:left;">
<div class="useful-links-title">
About DubaiExporters
</div>About Us<br />Member Benefits<br />Link Us<br />Media Partners<br />Contact Us<br /><%--<div class="clearfix"></div>--%></div><div id="sky-directory-useful-links-21" class=" sky-usefullinks widget widget_sky-directory-useful-links row-fluid" style="width: 50%;float:left;">
<div class="useful-links-title">
Information
</div>News<br />Upcoming Exhibitions<br />Advertise<br />Add Your Event<br /><br /><%--<div class="clearfix"></div>--%></div> </div>
<div id="second" class="widget-area footer-links vc_col-sm-6 last" role="complementary">
<div id="sky-directory-contact-us-11" class=" sky-contactus widget widget_sky-directory-contact-us row-fluid">
<div class="contact-us-widget-main">
<div class="contact-us-phone">
<span class="phone-icon fa fa-mobile"></span>
<div class="phone-info-container">
<span class="phone-text">Call us:</span>
<span class="phone-number">+971 4 3050755</span>
</div>
<%--<div class="clearfix"></div>--%>
</div>
<div class="contact-us-lower">
<div class="contact-us-social">
<%--<div class="clearfix"></div>--%>
</div>
<div class="contact-us-email">
<a href="mailto:info#skydirectory.com" class="email-address">
<span class="email-text">Or send an email to:</span>info#dubaiexporters.com</a>
</div>
</div>
<%--<div class="clearfix"></div>--%>
</div>
<%-- <div class="clearfix"></div>--%>
</div> </div>
<%--<div class="clearfix"></div>--%>
</div>
</div>
<%--<div class="scroll-to-top-container">
<div class="scroll-to-top"><span>To Top</span></div>
</div>--%>
<div class="footer-inner">
<div class="footer_info">
<div class="copyright">© 2018, Dubai Exporters</div>
<%--<div class="clearfix"></div>--%>
</div>
</div>
<div class="footer-cloud-container">
<%--<img src="http://cohhe.com/demo/sky/sky-directory/wp-content/themes/sky/images/bottom-cloud.png" width="266" height="116" alt="Footer cloud"/>--%>
<%-- <div class="clearfix"></div>--%>
</div>
</div>
</div>
I am getting so much space between the text. I am using form-group. I don't know why. I am new to Bootstrap.
Code:
<div class="wrapper">
<asp:Panel ID="Panel1" runat="server">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<div align="left" style="padding-bottom:10px;margin-left:50px;"><b>Exhibitors Passport</b> </div>
</div>
<div class="col-md-6"></div>
<div class="clearfix"></div>
</div>
</div>
<div class="container-fluid">
<section class="container">
<div class="row-fluid">
<div class="form-group col-md-12">
<div class="col-md-6">
<h3 style="color:#fc2630;font-size:14px;padding-bottom:15px;">
Please Submit Exhibitor Passport Details :</h3>
</div>
</div>
</div>
<div class="row-fluid">
<div class="form-group col-md-12">
<div class="col-md-6" style="color:#5a5b5b;font-size:14px;font-weight:bold;">
Delegate Details - 1:
<asp:CheckBox ID="chk1_" runat="server" Checked="True" Visible="False" />
</div>
<div class="col-md-6"></div>
</div>
</div>
</section>
</div>
</asp:Panel>
</div>
I think it's not because of Bootstrap. You have some padding in your style attributes.
http://codepen.io/anon/pen/bMbEbO
I need help with the layout and binding of ListView control in asp.net. I have a catalogue page, that should only display 6 images per page, with its relevant information.
The problem is this. I am a bit confused as to how to create the layout.
If all of this design was done with an HTML table, it would have been fairly easy to achieve what I want to accopmplish, as can be seen here.
I am using twitter bootstrap, and the design is not in tables. Below is my code that produces the look I want.
<div class="categories row-fluid">
<div class="span4">
<div class="category1">
<img id="myImageHolder" runat="server" class="image1" alt="" src="../img/metal_candle.png" />
</div>
<div class="details">
<div class="button">
<button class="square" type="button">Add to Cart</button>
</div>
<ul>
<li>Description:</li>
<li>Colour:</li>
<li>Price:</li>
</ul>
</div>
</div>
<div class="span4">
<div class="category1">
<img class="image1" alt="" src="../img/metal_candle.png" />
</div>
<div class="details">
<div class="button">
<button class="square" type="button">Add to Cart</button>
</div>
<ul>
<li>Description:</li>
<li>Colour: </li>
<li>Price:</li>
</ul>
</div>
</div>
<div class="span4">
<div class="category1">
<img class="image1" alt="" src="../img/metal_candle.png" />
</div>
<div class="details">
<div class="button">
<button class="square" type="button">Add to Cart</button>
</div>
<ul>
<li>Description:</li>
<li>Colour: </li>
<li>Price:</li>
</ul>
</div>
</div>
</div>
<div class="categories row-fluid">
<div class="span4">
<div class="category1">
<img class="image1" alt="" src="../img/metal_candle.png" />
</div>
<div class="details">
<div class="button">
<button class="square" type="button">Add to Cart</button>
</div>
<ul>
<li>Description:</li>
<li>Colour: </li>
<li>Price:</li>
</ul>
</div>
</div>
<div class="span4">
<div class="category1">
<img class="image1" alt="" src="../img/metal_candle.png" />
</div>
<div class="details">
<div class="button">
<button class="square" type="button">Add to Cart</button>
</div>
<ul>
<li>Description:</li>
<li>Colour: </li>
<li>Price:</li>
</ul>
</div>
</div>
<div class="span4">
<div class="category1">
<img class="image1" alt="" src="../img/metal_candle.png" />
</div>
<div class="details">
<div class="button">
<button class="square" type="button">Add to Cart</button>
</div>
<ul>
<li>Description:</li>
<li>Colour: </li>
<li>Price:</li>
</ul>
</div>
</div>
</div>
How can I use the Listview, together with the layout template, item template and group template to produce the above look, but also allow paging and data binding?
Any help or ideas would be greatly appreciated.
I figured out how to achieve this.
<asp:ListView ID="category1" runat="server">
<LayoutTemplate>
<div class="categories row">
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="span4">
<div class="category1">
<img class="image1" alt="No Image" src="CatalogueImages/<%# Eval("ImageName") %>" />
</div>
<div class="details">
<div class="button">
<button class="square" type="button">Add to Cart</button>
</div>
<ul>
<li><%# Eval("ImageDescription") %></li>
<li>Colour: <%# Eval("Color") %></li>
<li>Price: <%# Eval("Price") %></li>
</ul>
</div>
</div>
</ItemTemplate>
<EmptyDataTemplate>
<div>
Sorry, no products available
</div>
</EmptyDataTemplate>
</asp:ListView>
<div class="DataPager">
<asp:DataPager ID="pager" PageSize="6" PagedControlID="category1" runat="server">
<Fields>
<asp:NumericPagerField />
</Fields>
</asp:DataPager>
</div>
I can't seem to get this site to format correctly (be "responsive" to mobile) when viewing with mobile devices.
I am using Bootstrap, but when I view from a mobile device, it just looks like a normal desktop is viewing it. Other sites I have done, it "zooms" in on the text and such to look nice on mobile.
I'm sorry if I'm missing something small here, but any help would be greatly appreciated!
Here's the code I'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TITLE HERE</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap-responsive.min.css">
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/modernizr-2.5.3.min.js"></script>
</head>
<body>
<div role="main">
<header>
<div class="container">
<div class="row address">
<div class="span12">
<h2><?=$content['address']?><br/>
<?=$content['city']?> <?=$content['state']?> <?=$content['zip']?></h2>
</div>
</div>
<div class="row-fluid prop_info">
<div class="span12">
<h3>$<?=number_format($content['price'])?> | <?=$content['beds']?> Bedrooms | <?=$content['baths']?> Bathrooms | <?=number_format($content['square_feet'])?> Square Feet | MLS# <?=$content['mls_id']?></h3>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row center">
<div class="span12">
<ul class="nav nav-pills menu">
<li>VIDEO</li>
<li>PHOTOS</li>
<li>WALKSCORE MAP</li>
</ul>
</div>
</div>
<div class="container">
<div class="row center">
<div class="span12">
<div id="description-shadow-video-top"></div>
<iframe id="vp1HMbXI" title="Video Player" width="100%" height="auto" frameborder="0" src="<?=$content['video_url']?>" allowfullscreen></iframe>
<div id="description-shadow-video"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<?=$content['main_content']?>
</div>
</div>
</div>
<br/>
<div class="container">
<div class="row">
<div class="span12">
<div class="pull-left">
<br/>
<br/>
<br/>
<img src="/img/foundation/presented-by.png" width="120" alt="" />
</div>
<div class="pull-left">
<img src="/img/some_pic.jpg" alt="" name="agentImg" width="90" id="agentImg" />
</div>
</div>
</div>
<br/>
<div class="row center">
<div class="span12">
<h3><?=$user['first_name']?> <?=$user['last_name']?></h3>
<br />
<?=$user['company']?><br /><?=$user['address']?>
<br />
<?=$user['city']?>, <?=$user['state']?> <?=$user['zip']?>
<br />
<br />
<?=$user['contact_number']?>
<br />
<?=$user['email_address']?>
<br />
<br />
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="span12">
<a href="http://www.somesite.com" target="_blank">
<img src="/img/the_logo.png" width="210" />
</div>
</div>
</footer>
</div>
</body>
</html>
It seems that you are only using span12 in all the rows, which means that they will never get segmented when the viewport changes. A large part of having a responsive grid layout is breaking the elements of a row into segments so that the row's layout can be adjusted if the viewport falls below certain thresholds.
If the primary <div> in every row is span12 all the content in the row will remain essentially width=100% and the content will only scale down as the viewport decreases.
I would suggest avoid using span12 for every primary <div> and spend some time reconsidering the granularity of the content. See the Twitter Bootstrap documentation on Scaffolding for reference.
Use this layout, i think it will solve your issue. I removed the row class.
TITLE HERE
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable">
<link rel="stylesheet" href="/css/bootstrap.min.css"> <link rel="stylesheet" href="/css/bootstrap-responsive.min.css">
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/modernizr-2.5.3.min.js"></script> </head> <body> <div role="main">
<header>
<div class="container">
<div class="address">
<div class="span12">
<h2><?=$content['address']?><br/>
<?=$content['city']?> <?=$content['state']?> <?=$content['zip']?></h2>
</div>
</div>
<div class="row-fluid prop_info">
<div class="span12">
<h3>$<?=number_format($content['price'])?> | <?=$content['beds']?> Bedrooms | <?=$content['baths']?> Bathrooms | <?=number_format($content['square_feet'])?> Square Feet | MLS# <?=$content['mls_id']?></h3>
</div>
</div>
</div>
</header>
<div class="container">
<div class="center">
<div class="span12">
<ul class="nav nav-pills menu">
<li>VIDEO</li>
<li>PHOTOS</li>
<li>WALKSCORE MAP</li>
</ul>
</div>
</div>
<div class="container">
<div class="center">
<div class="span12">
<div id="description-shadow-video-top"></div>
<iframe id="vp1HMbXI" title="Video Player" width="100%" height="auto" frameborder="0" src="<?=$content['video_url']?>" allowfullscreen></iframe>
<div id="description-shadow-video"></div>
</div>
</div>
</div>
<div class="container">
<div class="span12">
<?=$content['main_content']?>
</div>
</div>
<br/>
<div class="container">
<div class="span12">
<div class="pull-left">
<br/>
<br/>
<br/>
<img src="/img/foundation/presented-by.png" width="120" alt="" />
</div>
<div class="pull-left">
<img src="/img/some_pic.jpg" alt="" name="agentImg" width="90" id="agentImg" />
</div>
</div>
<br/>
<div class="center">
<div class="span12">
<h3><?=$user['first_name']?> <?=$user['last_name']?></h3>
<br />
<?=$user['company']?><br /><?=$user['address']?>
<br />
<?=$user['city']?>, <?=$user['state']?> <?=$user['zip']?>
<br />
<br />
<?=$user['contact_number']?>
<br />
<?=$user['email_address']?>
<br />
<br />
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="span12">
<a href="http://www.somesite.com" target="_blank">
<img src="/img/the_logo.png" width="210" />
</div>
</div>
</footer> </div> </body> </html>