CODEWITHSUNDEEP
asp.netvb.net
user_2215528
user_2215528

Reputation: 20037

Imagebutton images in individual divs

I want all the images in an ImageButton to be shown in an individual div

 <asp:UpdatePanel ID="UPEmail" runat="server" UpdateMode="Always">
                <ContentTemplate>
                    <asp:DataList  ID="dlImages" runat="server" RepeatColumns="3" CellPadding="25" CellSpacing="25">
                    <ItemTemplate>
                    <asp:Imagebutton class="afbeelding" ID="Image1" CommandName='<%# Bind("Naam") %>' ImageUrl='<%# Bind("image", "http://url/Thumbs/{0}") %>' runat="server" style="width:200px; height: 250px; border: 2px grey solid;"  /><br />
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("Naam") %>'></asp:Label>
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                    </asp:DataList>
                </ContentTemplate>
                <Triggers>
                <asp:AsyncPostBackTrigger ControlID="ddlType" EventName="SelectedIndexChanged" />
                <asp:AsyncPostBackTrigger ControlID="ddlCollection" EventName="SelectedIndexChanged" />
                <asp:AsyncPostBackTrigger ControlID="ddlMateriaal" EventName="SelectedIndexChanged" />
                </Triggers>
                </asp:UpdatePanel>

Is there a way to do it?

Upvotes: 1

Views: 245

Answers (2)

wilso132
wilso132

Reputation: 829

Updated based on original post being updated... wrap it in divs. Below will put a "imageWrapper" class name on every div and a unique "imageWrapper[Naam goes here]" as the ID. Remove the class/id of the div as desired:

<asp:UpdatePanel ID="UPEmail" runat="server" UpdateMode="Always">
            <ContentTemplate>
                <asp:DataList  ID="DlImages" runat="server" RepeatColumns="3"
                    CellPadding="25" CellSpacing="25">
                <ItemTemplate>
                <div class="imageWrapper" id='<%# eval("Naam", "imageWrapper{0}") %>'>
                <asp:Imagebutton class="afbeelding" ID="Image1" CommandName='<%# Bind("Naam")%>'
                    ImageUrl = '<%# Bind("image", "http://url/{0}") %>' runat="server"
                    style="width:200px; height: 250px; border: 2px grey solid;z-index: 10;"  />
                    </div><br />
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("Naam") %>'></asp:Label>
 </ItemTemplate>
                <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                </asp:DataList>
            </ContentTemplate>
            <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ddlType" EventName="SelectedIndexChanged" />
            <asp:AsyncPostBackTrigger ControlID="ddlCollection"
                EventName="SelectedIndexChanged" />
            <asp:AsyncPostBackTrigger ControlID="ddlMateriaal"
                EventName="SelectedIndexChanged" />
            </Triggers>
            </asp:UpdatePanel>

Upvotes: 1

Satpal
Satpal

Reputation: 133423

you can use CSS style="display:block"

So change your code as

<asp:Imagebutton class="afbeelding" ID="Image1" CommandName='<%# Bind("Naam") %>' ImageUrl='<%# Bind("image", "url/Thumbs/{0}") %>' runat="server" style="display:block;width:200px; height: 250px; border: 2px grey solid;"  />

Read more http://www.w3schools.com/cssref/pr_class_display.asp

Upvotes: 1

Related Questions