Simsons Simsons - 27 days ago 7
ASP.NET (C#) Question

Div text is going out of DIV

I have following code for a row and then few text box and buttons inside it.

But the text is going out of the div. Tried overflow attribute but no help.

<div class ="row no-gutter">
<div class ="col-sm-12" style="margin:8px 0px 0px 0px;padding-left:8px;padding-right:8px;">
<div class ="row">
<div class ="col-sm-6" style="margin:8px 0px 0px 0px;padding-left:30px;padding-right:30px;">
<div id="MainContent_UpdatePanelCentrifugeSpinAndStep" >
<div class ="row">
<div class ="col-sm-4 text-center" style="margin:2px 0px 0px 0px;padding-right:0px;">
<div class="form-control input-md" >
<input id="MainContent_chkLastCycle" type="checkbox" name="ctl00$MainContent$chkLastCycle" />
End Day Production Re-set
</div>
</div>
</div>

</div>
</div>
</div>


Here is a fiddle for same: https://jsfiddle.net/2zfp3g4g/

enter image description here

Answer Source

overflow:hidden is working. You give overflow property to checkbox parent div.

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
                   
<div class ="row no-gutter">        
        <div class ="col-sm-12" style="margin:8px 0px 0px 0px;padding-left:8px;padding-right:8px;">                         
                <div class ="row">
                    <div class ="col-sm-6" style="margin:8px 0px 0px 0px;padding-left:30px;padding-right:30px;">
                        <div id="MainContent_UpdatePanelCentrifugeSpinAndStep" >	                               
                                            <div class ="row">                                                                                  
                                                <div class ="col-sm-4 text-center" style="margin:2px 0px 0px 0px;padding-right:0px;">
                                                    <div class="form-control input-md" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" >
                                                        <input id="MainContent_chkLastCycle"  type="checkbox" name="ctl00$MainContent$chkLastCycle" />
                                                        End Day Production Re-set
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>                            
</div>