Level Extreme platform
Subscription
Corporate profile
Products & Services
Support
Legal
Français
Inline and centered?
Message
 
 
To
11/05/2017 15:27:41
General information
Forum:
CSS
Category:
Layouts
Miscellaneous
Thread ID:
01651040
Message ID:
01651057
Views:
44
Hi Michel,

I need Save and Cancel buttons to stay as they are right now and navigation control to be centered and at the same level as my buttons.


>>UPDATE. I think I got it working with the following:
>>
>>
>>.format-pagination {
>>    float: left;
>>    position: relative;
>>    left: 40%;
>>}
>>
>>based on http://stackoverflow.com/questions/1232096/how-to-horizontally-center-a-floating-element-of-a-variable-width
>>
>>Hi everybody,
>>
>>Attached is what I get when I apply class 'format-pagination' and 'text-center'. The format-pagination class is defined as
>>
>>
>>.format-pagination {
>>    display: inline;
>>}
>>
>>So, when this class applied, I can not get the control centered. If I remove that class and only leave the text-center class, when this control is shown very close to the top control (which is a grid) and the Cancel/Save buttons show below.
>>
>>How can I get the pagination to be centered and on the same line as my buttons?
>>
>>The markup for the bottom portion of the page is:
>>
>>
>><div class="text-center" ng-if="showDailyCodes" 
>>                         ng-cloak ng-controller="dailyCodesCrudController">
>>                        <ul uib-pagination total-items="366"
>>                            ng-model="selections.pageNumber"
>>                            items-per-page="31"
>>                            max-size="5"
>>                            rotate="false"
>>                            ng-change="selectMonthlyPage()"
>>                            previous-text="@Labels.previous"
>>                            next-text="@Labels.next"></ul>                    
>>                    </div>
>>                    <button class="btn btn-primary btn-primary-green pull-right" ng-if="showDailyCodes"
>>                            ng-click="saveDailyCodes(selections.dailyCodes)"
>>                            ng-disabled="form.$invalid || !form.editDailyCodesForm.$dirty">
>>                        @Labels.save
>>                    </button>
>>                    <button class="btn btn-primary btn-primary-green pull-right" 
>>                            ng-click="saveAssignno(assignnoSettings.currentAssignno)"
>>                            ng-disabled="form.$invalid || !form.editAssignnoGeneralForm.$dirty" 
>>                            ng-if="showAssignno" ng-cloak>
>>                        @Labels.save
>>                    </button>
>>                    <data-cancel:button title="@Labels.unsavedChanges"
>>                                        ng-if="!showPassPrefixes"
>>                                        message="@Messages.unsavedChanges"
>>                                        cancel="cancel()"
>>                                        disable-action="disableAction"
>>                                        dirty="form.$dirty"></data-cancel:button>
>>
>
>The following will get the Save/Cancel button centered, while you keep the navigation left:
>
>
><style>
>
>.Container
>{
>   width: 400px;
>   background-color: #ffff00;
>   position: relative;
>}
>
>.Button
>{
>   background-color: #eeeeee;
>}
>
>.Save
>{
>   position: absolute;
>   top: 0;
>   text-align: center;
>   width: 400px;
>}
>
></style>
>
><div class="Container">
>
><div class="Button">
>1 2 3 4 5 6 7 8 9
></div>
>
><div class="Save">
>Save
></div>
>
></div>
>
>
>I do not suggest to align text left or right when you have a centered text. This would simply defies the usage of a centered text and would confuse the layout.
>
>The usage of float with percentage will not be proper centered based on some layout adjustments.
If it's not broken, fix it until it is.


My Blog
Previous
Next
Reply
Map
View

Click here to load this message in the networking platform