Search code examples
c#cssasp.netrepeater

how to put a repeater buttons in a row on asp c#


i have this code that makes buttons with repeater and it works but i cant put them in a row all the code that i add in the css is getting ovride even if i add !important . i added the css that i wrote it changes the style of the elements but it shows them in a column.

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate runat="server">
        <ul class="menue" runat="server">
            <li><a>
                <asp:Label runat="server" ID="Label1"
                    Text='<%# Eval("_name") %>' CommandArgument='<% Eval("_url") %>' />
            </a></li>
        </ul>
    </ItemTemplate>
</asp:Repeater>

and the css

    .menue{
      list-style: none;
      margin: 0; 
      background: #17212B;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      border-bottom:solid;
      border-width:1px;
      border-color: #2F3943;
      -webkit-flex-flow: row wrap;
      justify-content: flex-end;
    }

    .menue a {
      text-decoration: none;
      display: block;
      padding: 0.4em;
      color: white;
    }
        .menue a {
            font-weight: bold;
            padding:1.8em;
            border-right:solid;
            border-width:1px;
            border-color: #2F3943;
        }
        .menue a .selected {
            padding:2em;
        }

Solution

  • Try this as your CSS. Most important is display: inline-block

    .menue {
        list-style: none;
        margin: 0px;
        background: #17212B;
        border: 1px solid #2F3943;
        display: inline-block; 
    }
    

    For the CommandArgument to work you need to add a #

    CommandArgument='<%# Eval("_url") %>'