0

I'm using Semantic UI React. I have a Segment component with a few things inside, ending with a Button that I want to float right, but when I float it right it starts coming out of the Segment:

floated button is outside segment

If I don't float it, it stays inside the Segment nicely, but it's on the left, and I want it on the right:

enter image description here

What can I do to fix this?

5 Answers 5

5

Instead of manually adjusting CSS rules, you can simply set clearing on the Segment, which, as the documentation confirms, clears floated content.

Under the hood, it currently appears to apply a variant of the clearfix:

.ui.clearing.segment::after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
2

Instead of float, try using margin-left:auto. This will align a block level element on the right of its container.

1
  • 1
    This worked, but only after I also added display: inherit. Apparently the Semantic UI framework adds classes of .ui.button to Button components, and those classes get set to display: inline-block which apparently ignores the margin-left: auto setting. Commented Sep 29, 2017 at 19:17
0

U need use some like

button{
float:right;
position:inherit;
}
0

I was studying an Angular book and saw that they added this css in the standard styles.css to get the button inside the segment:

form.form:after {
   content: '';
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}

This helps me to get the button inside the form and use the right floated classes.

0

There is a solution using only Semantic instead of custom CSS. Simply put the button in another container and set the alignment on the container:

 <div class="ui right aligned container">
     <button class="ui button" type="submit">Add All</button>
 </div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.