Jordan Jordan - 5 months ago 8
CSS Question

How can I prevent overflow from a fieldset?

I am trying to utilize a fieldset element as a sidebar navigation container for it's look. Maybe it has nothing to do with the fieldset and I'm not the best with CSS's small nitpicky details but I can't figure out how to keep the fieldset strictly in its own column while pushing text and any overflowing elements to the next line. Here's a snippet of the problem code and the link to the fiddle: https://jsfiddle.net/5vjncf3z/

<div class="row">

<div class="col-xs-3">
<fieldset id="sideNav">
<legend>Page Name</legend>
<div class="col-xs-12">
<p>Page descriptionasiauhefaiouehfoaiuehfaiowehfaowieufhwoiefuhaoiweufhawieufha</p>
</div>
</fieldset>
</div>

<div class="col-xs-9">
<div class="well">
<h2>Page content</h2>
</div>
</div>



Answer

add this to your fieldset:

#sideNav { word-break: break-all;}

Fiddle: https://jsfiddle.net/tj833dms/

Comments