locked
How to add .css style to ajust the size of fieldset? RRS feed

  • Question

  • User-1651604128 posted

    Here is the fieldset codes in razor view,

     <tr>
            <td colspan="2">
    
                <fieldset class="scheduler-border" style="border-color: white !important;  border-style: solid !important; border-width:1px !important;">
                    <legend class="scheduler-border">These productions are available for:</legend>
                 
                    <label>
                        @Html.CheckBoxFor(model => model.Prod1)
                        @Html.LabelFor(model =>model.Prod1 )
                    </label>
                    <label>
                        @Html.CheckBoxFor(model => model.Prod2)
                        @Html.LabelFor(model => model.Prod2)
                    </label>
                    <label>
                        @Html.CheckBoxFor(model => model.Prod3 )
                        @Html.LabelFor(model => model.Prod3)
                    </label>
                     
                </fieldset>
    
            </td>
        </tr>

    But the above fieldset codes expand the square to all rows, I want to make it smaller, how can I add css control to make it smaller of width? I tried to add "width=500px;", this does not work. any idea? thanks a lot, 

    Tuesday, December 4, 2018 4:56 PM

All replies

  • User475983607 posted

    Peter Cong

    Here is the fieldset codes in razor view,

     <tr>
            <td colspan="2">
    
                <fieldset class="scheduler-border" style="border-color: white !important;  border-style: solid !important; border-width:1px !important;">
                    <legend class="scheduler-border">These productions are available for:</legend>
                 
                    <label>
                        @Html.CheckBoxFor(model => model.Prod1)
                        @Html.LabelFor(model =>model.Prod1 )
                    </label>
                    <label>
                        @Html.CheckBoxFor(model => model.Prod2)
                        @Html.LabelFor(model => model.Prod2)
                    </label>
                    <label>
                        @Html.CheckBoxFor(model => model.Prod3 )
                        @Html.LabelFor(model => model.Prod3)
                    </label>
                     
                </fieldset>
    
            </td>
        </tr>

    But the above fieldset codes expand the square to all rows, I want to make it smaller, how can I add css control to make it smaller of width? I tried to add "width=500px;", this does not work. any idea? thanks a lot, 

    I'm unable to reproduce your results. 

    I assume there's CSS elsewhere that is causing this issue.  Please use the browser's dev tools to debug the styles applied to the elements.  Otherwise, post source code that reproduces the issue.

        <table border="1">
            <tr>
                <th>one</th>
                <th>two</th>
            </tr>
            <tr>
                <td colspan="2">
                    <fieldset class="scheduler-border" style="border-color: black !important;  border-style: solid !important; border-width:1px !important;">
                        <legend class="scheduler-border">These productions are available for:</legend>
    
                        <label>
                            <input type="checkbox" id="1" />
                            <label for="1">1</label>
                        </label>
                        <label>
                            <input type="checkbox" id="2" />
                            <label for="2">2</label>
                        </label>
                        <label>
                            <input type="checkbox" id="3" />
                            <label for="1">3</label>
                        </label>
    
                    </fieldset>
                </td>
            </tr>
        </table>

    Tuesday, December 4, 2018 5:26 PM
  • User-552477072 posted

    Hi you can use

    'width: 50% !important' in your style. then you can reduce % upon your necessity. Once you use !important it must work.

    If still not work then take all your fieldset inside div. Then change div property in declared css style. Like

    div{

    'width: 50% !important;

    Thanks.

    Wednesday, December 5, 2018 1:22 AM
  • User1520731567 posted

    Hi Peter Cong,

    In my demo is work fine:

    <table>
      <thead>
        <tr>
            <th> Header1 </th>
            <th> Header2 </th>
            <th> Header3 </th>
        </tr>
      </thead>
      <tbody>
       <tr>
            <td colspan="2">
    
                <fieldset class="scheduler-border" style="width:500px;border-color: white !important;  border-style: solid !important; border-width:1px !important;">
                    <legend class="scheduler-border">These productions are available for:</legend>
                 
                    <label>
                       111
                    </label>
                    <label>
                        222
                    </label>
                    <label>
                        333
                    </label>
                     
                </fieldset>
    
            </td>
        </tr>
        <tr>
            <td> Value 1,2 </td>
            <td> Value 2,2 </td>
            <td> Value 3,2 </td>
        </tr>
        <tr>
            <td> Value 1,3 </td>
            <td> Value 2,3 </td>
            <td> Value 3,3 </td>
        </tr>
      </tbody>
    </table>

    How it works:

    I think it could be CSS reference packages conflict with each other.

    If you have any questions,please post more details.

    Best Regards.

    Yuki Tao

    Wednesday, December 5, 2018 3:23 AM