CODEWITHSUNDEEP
cssreactjssemantic-ui
Dylan Cristy
Dylan Cristy

Reputation: 984

Semantic UI React - floated button coming out of its container?

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?

Upvotes: 0

Views: 3148

Answers (5)

Patrick
Patrick

Reputation: 1

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>

Upvotes: 0

LCC
LCC

Reputation: 948

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;
}

Upvotes: 5

Ceesiebo
Ceesiebo

Reputation: 96

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.

Upvotes: 0

Julio Feferman
Julio Feferman

Reputation: 2676

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

Upvotes: 2

Shabi Levi
Shabi Levi

Reputation: 258

U need use some like 

button{
float:right;
position:inherit;
}

Upvotes: 0

Related Questions