<li style="width: 20%">
<div class="thumbnail" style="width: 200px">
<div class="fader">
<img src="./Images/slide-01.jpg" alt="">
</div>
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
<p align="center">
<asp:Button runat="server" class="btn btn-primary" ID="lnk" Text="View" />
</p>
</div>
</div>
</li>
If i want to repeat list 12 times using for loop or some other looping condition.
Can you help how to solve !!
You can use a asp:repeater for this type of scenario if using webforms
using a repeater
Bind repeater to generic list
Since you're using ASP.NET and you want to display server-side controls (asp:Button) you can't simple construct your HTML as string and output it to the page.
Define your UL/OL tag with runat = "server" attribute, so it is accessible in server-side code.
<ul id="myList" runat="server" ></ul>
Then add LI and the rest of them as child Controls of the original element.
Dim li As HtmlGenericControl
For I = 1 To 12
li = New HtmlGenericControl("li")
li.Style("width") = "width: 20%"
myList.Controls.Add(li)
Next
The VB.NET example above builds UL with 12 LI elements. Similarly an LI element has .Controls property of it's own to which you can add other controls (DIV etc.)
Related
First of all the solution in that question: CSS selector to bold only labels without child elements does not solve my issue.
I have labels with text only and others with text and child input, select and textarea form's elements.
i.e:
<label class="control-label">State
<select name="status" id="status" class="form-control">
<option value="">Choose..</option>
...
</select>
</label>
and other like:
<label for="defect" class="control-label">Error</label>
I need to set white-space: nowrap to labels that has no child HTML elements only and as the above question answers stated, I tried the following:
label{
white-space: nowrap; /* Label without HTML*/
}
label + label {
white-space: normal; /* Label with HTML */
}
However, it does not work.
One solution would be adding a class to the element and using CSS to format it accordingly.
label.empty {
white-space: nowrap;
}
Link to the documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors
The other comment points to using :empty but in your case the <label> contains some text and doesn't apply as empty
AFAIK there is no solution using CSS selectors. The solution proposed by #FabioPontes to control via an additional class name would be the most straight-forward.
Following is a javascript solution that verifies for an element's child nodes and applies a white-space:nowrap if (1) there is only one child node and (2) this node is of type text. Please view node types.
var elements = document.getElementsByClassName("control-label");
for (i = 0; i < elements.length; i++) {
if (elements[i].childNodes.length == 1 && elements[i].childNodes[0].nodeType == 3) {
elements[i].style.whiteSpace = "nowrap";
}
}
<div>
<label class="control-label">State - we need a really long text to check if the white-space nowrap is actually working so lets place this text here.
<select name="status" id="status" class="form-control">
<option value="">Choose..</option>
</select>
</label>
</div>
<div style="margin-top:20px;">
<label for="defect" class="control-label">Error - we need a really long text to check if the white-space nowrap is actually working so lets place this text here.</label>
</div>
The option to add a class has already been suggested by Fabio Pontes and is a good one, but if you don't want to add classes, here are a couple options.
The first thing you could do is modify your markup to wrap each label in a div and then leverage the :only-child pseudo selector. In order for this to work, you'll have to include the select element as a sibling of the label, rather than as a child of it.
.control-label-wrapper label:only-child {
white-space: nowrap;
}
<div class="control-label-wrapper">
<label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tellus massa. Phasellus dictum mollis lobortis.</label>
<select name="status" id="status" class="form-control">
<option value="">Choose..</option>
</select>
</div>
<div class="control-label-wrapper">
<label for="defect" class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tellus massa. Phasellus dictum mollis lobortis.</label>
</div>
Another option which may not require modifying your makup at all is to use an attribute selector. Perhaps you're already using an attribute for all these childless labels. The example HTML in your question suggests you may be.
label[for="defect"] {
white-space: nowrap;
}
<label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tellus massa. Phasellus dictum mollis lobortis.
<select name="status" id="status" class="form-control">
<option value="">Choose..</option>
</select>
</label>
<label for="defect" class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tellus massa. Phasellus dictum mollis lobortis.</label>
I want use ngb-carousel with ngFor,My code like this:
code
but this make some error like this:
<ngb-carousel>
<template ngFor let-home [ngForOf]="homes | async" >
<ngbSlide [home]="home">
<img src="{{item.thumb}}" alt="Random first slide">
</ngbSlide>
</template>
</ngb-carousel>
home.component.html?c8ce:1 Error: Template parse errors:(…)
who can give me a example use ngb-carousel with ngFor?
The syntax for ng-bootstrap slides is <template ngbSlide> and we don't have the <ngbSlide> element / component hence the parsing error. What you should be doing instead is to have ngFor generate <template ngbSlide> like so:
<ngb-carousel>
<template *ngFor="let imgIdx of [1, 2, 3]" ngbSlide>
<img src="http://lorempixel.com/900/500?r={{imgIdx}}" alt="Random slide no {{imgIdx}}">
<div class="carousel-caption">
<h3>slide label no {{imgIdx}}</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</template>
</ngb-carousel>
Here is a working plunker showing this in action: http://plnkr.co/edit/FXx9Q0UO14sp0RqbPnVh?p=preview
This might be a late answer, but if your the images from your database or anywhere for that matter is an Array. So you can iterate through them using NgFor on the HTML.
carousel.component.html
<ngb-carousel *ngIf="images!=null">
<div *ngFor="let image of images">
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img src="{{image}}" alt="image">
</div>
</ng-template>
</div>
</ngb-carousel>
The ngfor will create ng-template equal to the length of the array.
carousel.component.ts
images = ['image1', 'image2', 'image3'];
I am designing an ASP.NET page with using some data from SQL Server Database. I used <DataList> to call data and fill any place I want to in the page. My problem is, CSS seems not working for the element in <HeaderTemplate>. I searched some posts but I couldn't find an answer.
I tried to style <p> like you see in the code, and I tried to style the data I called with <span> too. Then I tried to use both of them at the same time as you see. None of them works.
Here is my code:
<div class="col-lg-4">
<img class="img-circle" src="../Images/icons/1.png" alt="Generic placeholder image" height="120" width="120" style="position:relative;">
<h2>Last News</h2>
<asp:DataList ID="DataList1" runat="server">
<HeaderTemplate><p style="text-align:center;"></HeaderTemplate>
<ItemTemplate><span style="text-align:center;"><%#Eval("news_header") %></span></ItemTemplate>
<FooterTemplate></p></FooterTemplate>
</asp:DataList>
<p><a class="btn btn-default" href="haberler.aspx" role="button">Devamını Oku »</a></p>
</div>
UPDATE and SOLUTION:
When I looked at the codes in browser while localhos was working, I saw the problem was table that Datalist creates. So I framed that table with div just out of Datalistcode and write the CSS class to make it work with all screen sizes. Here is the codes:
Asp.Net Side:
<div class="col-lg-4">
<img class="img-circle" src="../Images/icons/1.png" alt="Generic placeholder image" height="120" width="120" style="position:relative;">
<h2>Son Haberler</h2>
<div class="col-lg-12"><asp:DataList ID="DataList1" runat="server">
<HeaderStyle CssClass="deneme2"/>
<ItemTemplate>
<span><%#Eval("haber_baslik_tr") %></span>
</ItemTemplate>
</asp:DataList></div>
<br /><p><a class="btn btn-default" href="haberler.aspx" role="button">Devamını Oku »</a></p>
</div>
CSS Side:
.col-lg-12 table{
width:100%;
}
.col-lg-12 table tbody tr td{
text-align:center;
}
Use DataList.HeaderStyle
<HeaderStyle CssClass="MyHeaderClass">
</HeaderStyle>
I'm trying to make a responsive grid of radio buttons, with a label "column" to the left of it. With the HTML and CSS below, making the window narrower eventually causes the radios to wrap to two columns, then one, as intended. However, that doesn't happen until much of their text is offscreen to the right.
It appears that the browser thinks the right-hand edge of the .controlContainer is in the wrong place, off by roughly the width of the label "column" on the left. The same behavior happens in Firefox ESR 31.4.0, Chrome 40.0.2214.115 m, and IE 11, so it doesn't seem to be a browser bug.
The sample code below includes a checkbox that applies a really funky workaround, which does work, but I hope someone can point me in a direction where that sort of nonsense isn't needed.
As noted in commented-out CSS, applying position:absolute to the .controlContainer instead of the workaround given works too, but then elements around it collapse on top of it because it takes up no space.
Note that the Run Code Snippet facility here doesn't display this correctly due to its own CSS and the restricted size of the embedded iframe, so you need to either copy the code into a local file, or view it on CSSDeck.
<!DOCTYPE html>
<html>
<head>
<title>Float wrapping</title>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
*, *:after, *:before {-moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
body, form, pre, div, span, label {font-family: sans-serif; font-size: 13px; margin: 0; padding: 0;}
.fieldContainer {white-space: nowrap;}
.labelContainer {display: inline-block; font-weight: bold; text-align: right; vertical-align: top; width: 150px;}
.controlContainer {display: inline-block; max-width: 800px;}
.controlContainer label {float: left; padding-right: 10px; width: 200px;}
.controlGridText {display: inline-block; margin: 0 2.25em 5px 0; white-space: normal;}
input {float: left;}
.hackyFix .controlContainer {left: -150px; margin-left: 150px; position: relative;}
/* .hackyFix .controlContainer {position: absolute;} can do this instead of above hack, but then other elements collapse into its space */
/*.hackyFix .fieldContainer {overflow: hidden;} hides horizontal scrollbar, but shouldn't have to do this */
</style>
</head>
<body>
<pre>
Make the window narrower, and eventually the radios wrap to two columns, then one.
However, that doesn't happen until much of their text is offscreen on the right.
Also note that the horizontal scrollbar appears before it's actually needed.
Check the 'Apply hacky fix' box, and the only solution I've found gets applied, but it's pretty funky, and doesn't fix the scrollbar.
See commented-out CSS for some other notes.
Better solutions are most welcome!
</pre>
<form id="form">
<hr>
<label>Apply hacky fix<input type="checkbox" id="cbHack" onclick="document.getElementById('form').className = this.checked ? 'hackyFix' : ''"></label>
<hr>
<div class="fieldContainer">
<div class="labelContainer" style="">Favorite Lizard</div>
<div class="controlContainer">
<label>
<input type="radio" value="1" name="r1">
<span class="controlGridText">1 Gecko lorem ipsum</span>
</label>
<label>
<input type="radio" value="2" name="r1">
<span class="controlGridText">2 Dolor sit amet</span>
</label>
<label>
<input type="radio" value="3" name="r1">
<span class="controlGridText">3 Iguana consectetur adipiscing elit </span>
</label>
<label>
<input type="radio" value="4" name="r1">
<span class="controlGridText">4 Chameleon praesent scelerisque massa at placerat elementum curabitur sit amet venenatis ipsum</span>
</label>
<label>
<input type="radio" value="5" name="r1">
<span class="controlGridText">5 Morbi id elit massa</span>
</label>
<label>
<input type="radio" value="6" name="r1">
<span class="controlGridText">6 Maecenas fringilla quis odio id auctor pellentesque laoreet</span>
</label>
<label>
<input type="radio" value="7" name="r1">
<span class="controlGridText">7 Basilisk</span>
</label>
<label>
<input type="radio" value="8" name="r1">
<span class="controlGridText">8 Tuatara quam enim ornare urna</span>
</label>
<label>
<input type="radio" value="9" name="r1">
<span class="controlGridText">9 Suscipit faucibus nunc dolor vel arcu</span>
</label>
</div>
</div>
<div>This is some more text, here just to see what happens to objects below the fields.</div>
</form>
<script>
document.getElementById('cbHack').checked = false;
</script>
</body>
</html>
See this fiddle. One of the issues in the example is that it isn't using the box model that modern frameworks are based off of, meaning that padding is getting added to the outside of elements instead of the inside. This makes percentage-based grids incredibly hard to work with if that isn't turned on.
I patched your version by including the bootstrap css but you really only need the box model to fix it. This is the other part I changed:
.controlContainer {
max-width: 800px;
width: calc(100% - 105px);
}
Doing this offsets the "favorite lizard" label. If I were you though, I would switch to percentage-based grids to make this a lot easier. The parent containers could have a 3 column and 9 column grid while the labels would be a 3 column grid on large, 2 on medium, and 1 on small.
This is the link of my website which is looking good in firefox.but in IE items are not in the same line how to fix it
your problem is in the HTML, not in the css, you have two extra closing divs at the bottom for each 'item_container span3'
<form method='post' name='form124' id='form124' action='/app/site/backend/additemtocart.nl?c=3563610&n=1' onsubmit="return checkmandatory124();">
<div class="item_container span3">
iPhone 5
<div class="heading_price">
<span class="price">Price:
<span id=itemprice124>?.?.?2?444?00 3,649.00 SAR</span>
</span>
</div>
<div class="itemlist-img">
<a href="/s.nl/c.3563610/it.A/id.124/.f">
<a href='/s.nl/c.3563610/it.A/id.124/.f'>
<img src='/core/media/media.nl?id=959&c=3563610&h=b417dd449e62d8ecd270&resizeid=-1&resizeh=214&resizew=160' border='0' alt='Item Images13.jpg' title='Item Images13.jpg'></a></a>
</div><div><p class="item_desc">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p></div>
<div class="cart_details"> VIEW DETAILS
<span class="cart_btn"><a href="#inline_content" class='inline'>ADD TO CART</a></span>
</div></div>
<--- this --->
**</div></div>**
<------------>
</form>