tshoemake
Reputation: 1351
Bootstrap alignment issue with table-responsive
I'm making a calendar in ASP.NET MVC that dynamically adds anchor links to each day based on whats stored in a SQL database for that specific day. I'm using a html tables with the table-responsive class to format the widths and such.
Basically, I would like all the columns be responsive in the table, but somewhat fixed. Depending on the number of anchors added to the col-xs-12, it can look right (Day 5 & 6 in picture below) or add spacing to the right. The spacing to the right with multiple anchor elements or, events, is my problem. How do i go about fixing this? Should I add another row for 2 or more buttons? I'm not sure how to approach this problem, I'm not an expert ui person. Any help would be appreciated. I can provide any other files needed.
html:
<div id="calendarContainer">
<div class="panel panel-default container-fluid mt25">
<div class="panel-heading row">
<div class="row text-center">
<h2><i class="fa fa-calendar" aria-hidden="true"></i> January 2017</h2>
</div>
<div class="row text-center">
<div class="col-md-4 col-xs-4" onclick="getAdjacentMonth('12/6/2016 12:00:00 AM')"><i class="fa fa-arrow-left fa-4x pull-left" aria-hidden="true"></i></div>
<div class="col-md-4 col-xs-4">
<div>
<div id="clock" class="">7:44:45 pm</div>
<div>Monday, January 16, 2017</div>
</div>
</div>
<div class="col-md-4 col-xs-4" onclick="getAdjacentMonth('2/6/2017 12:00:00 AM')">
<i class="fa fa-arrow-right fa-4x pull-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div id="calendarBody">
<table id="calendarData" class="table table-responsive table-bordered">
<thead>
<tr id="headerRow" class="text-center">
<td class="headerDay text-nowrap">
<span>Sunday</span>
</td>
<td class="headerDay text-nowrap">
<span>Monday</span>
</td>
<td class="headerDay text-nowrap">
<span>Tuesday</span>
</td>
<td class="headerDay text-nowrap">
<span>Wednesday</span>
</td>
<td class="headerDay text-nowrap">
<span>Thursday</span>
</td>
<td class="headerDay text-nowrap">
<span>Friday</span>
</td>
<td class="headerDay text-nowrap">
<span>Saturday</span>
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="currentMonthBackground">
<div class="row">
<div class="form-group col-md-8 col-xs-1">
<div class="currentMonthDay">2</div>
</div>
<div class="form-group col-md-4 col-xs-1 mml5">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-plus" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a onclick="addReminder('1/2/2017 12:00:00 AM')"><i class="fa fa-clock-o fa-fw"></i> Reminder</a></li>
<li><a onclick="addComment('1/2/2017 12:00:00 AM')"><i class="fa fa-sticky-note-o fa-fw"></i> Note</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<a class="btn btn-success btn-xs inline mobileReminder " onclick="displayNote('1/2/2017 12:00:00 AM')">
<i class="fa fa-sticky-note-o fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
<a class="btn btn-danger btn-xs inline mobileReminder " onclick="displayReminder('1/2/2017 12:00:00 AM')">
<i class="fa fa-clock-o fa-fw"></i> <span class="eventSizeSmall">1</span>
</a>
<a class="btn btn-birthday btn-xs inline mobileReminder " onclick="displayBirthday('1/2/2017 12:00:00 AM')">
<i class="fa fa-birthday-cake fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
<a class="btn btn-warning btn-xs mobileReminder" onclick="displayHoliday('1/2/2017 12:00:00 AM')">
<i class="fa fa-bullhorn fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
</div>
</div>
</td>
<td class="currentMonthBackground">
<div class="row">
<div class="form-group col-md-8 col-xs-1">
<div class="currentMonthDay">3</div>
</div>
<div class="form-group col-md-4 col-xs-1 mml5">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-plus" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a onclick="addReminder('1/3/2017 12:00:00 AM')"><i class="fa fa-clock-o fa-fw"></i> Reminder</a></li>
<li><a onclick="addComment('1/3/2017 12:00:00 AM')"><i class="fa fa-sticky-note-o fa-fw"></i> Note</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<a class="btn btn-success btn-xs inline mobileReminder " onclick="displayNote('1/3/2017 12:00:00 AM')">
<i class="fa fa-sticky-note-o fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
<a class="btn btn-danger btn-xs inline mobileReminder " onclick="displayReminder('1/3/2017 12:00:00 AM')">
<i class="fa fa-clock-o fa-fw"></i> <span class="eventSizeSmall">1</span>
</a>
<a class="btn btn-birthday btn-xs inline mobileReminder " onclick="displayBirthday('1/3/2017 12:00:00 AM')">
<i class="fa fa-birthday-cake fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
</div>
</div>
</td>
<td class="currentMonthBackground">
<div class="row">
<div class="form-group col-md-8 col-xs-1">
<div class="currentMonthDay">4</div>
</div>
<div class="form-group col-md-4 col-xs-1 mml5">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-plus" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a onclick="addReminder('1/4/2017 12:00:00 AM')"><i class="fa fa-clock-o fa-fw"></i> Reminder</a></li>
<li><a onclick="addComment('1/4/2017 12:00:00 AM')"><i class="fa fa-sticky-note-o fa-fw"></i> Note</a></li>
</ul>
</div>
</div>
</td>
<td class="currentMonthBackground">
<div class="row">
<div class="form-group col-md-8 col-xs-1">
<div class="currentMonthDay">5</div>
</div>
<div class="form-group col-md-4 col-xs-1 mml5">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-plus" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a onclick="addReminder('1/5/2017 12:00:00 AM')"><i class="fa fa-clock-o fa-fw"></i> Reminder</a></li>
<li><a onclick="addComment('1/5/2017 12:00:00 AM')"><i class="fa fa-sticky-note-o fa-fw"></i> Note</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<a class="btn btn-success btn-xs inline mobileReminder " onclick="displayNote('1/5/2017 12:00:00 AM')">
<i class="fa fa-sticky-note-o fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
</div>
</div>
</td>
<td class="currentMonthBackground">
<div class="row">
<div class="form-group col-md-8 col-xs-1">
<div class="currentMonthDay">6</div>
</div>
<div class="form-group col-md-4 col-xs-1 mml5">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-plus" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a onclick="addReminder('1/6/2017 12:00:00 AM')"><i class="fa fa-clock-o fa-fw"></i> Reminder</a></li>
<li><a onclick="addComment('1/6/2017 12:00:00 AM')"><i class="fa fa-sticky-note-o fa-fw"></i> Note</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<a class="btn btn-success btn-xs inline mobileReminder " onclick="displayNote('1/6/2017 12:00:00 AM')">
<i class="fa fa-sticky-note-o fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
<a class="btn btn-danger btn-xs inline mobileReminder " onclick="displayReminder('1/6/2017 12:00:00 AM')">
<i class="fa fa-clock-o fa-fw"></i> <span class="eventSizeSmall">1</span>
</a>
</div>
</div>
</td>
<td class="currentMonthBackground">
<div class="row">
<div class="form-group col-md-8 col-xs-1">
<div class="currentMonthDay">7</div>
</div>
<div class="form-group col-md-4 col-xs-1 mml5">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-plus" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a onclick="addReminder('1/7/2017 12:00:00 AM')"><i class="fa fa-clock-o fa-fw"></i> Reminder</a></li>
<li><a onclick="addComment('1/7/2017 12:00:00 AM')"><i class="fa fa-sticky-note-o fa-fw"></i> Note</a></li>
</ul>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div id="modalBodyContainer"></div>
</div>
mvc calendar.cshtml:
<div id="calendarContainer">
<div class="panel panel-default container-fluid mt25">
<div class="panel-heading row">
<div class="row text-center">
<h2><i class="fa fa-calendar" aria-hidden="true"></i> @Model.MonthData.Name @Model.MonthData.Year</h2>
</div>
<div class="row text-center">
<div class="col-md-4 col-xs-4" onclick="getAdjacentMonth('@Model.CurrentCalendarDate.AddMonths(-1)')"><i class="fa fa-arrow-left fa-4x pull-left" aria-hidden="true"></i></div>
<div class="col-md-4 col-xs-4">
<div>
<div id="clock" class="">loading...</div>
<div>@DateTime.Now.ToString("D", CultureInfo.CreateSpecificCulture("en-US"))</div>
</div>
</div>
<div class="col-md-4 col-xs-4" onclick="getAdjacentMonth('@Model.CurrentCalendarDate.AddMonths(+1)')">
<i class="fa fa-arrow-right fa-4x pull-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div id="calendarBody">
<table id="calendarData" class="table table-responsive table-bordered">
<thead>
<tr id="headerRow" class="text-center">
@foreach (var day in Enum.GetValues(typeof(DayOfWeek)).OfType<DayOfWeek>().ToList())
{
<td class="headerDay text-nowrap">
<span>@day.ToString()</span>
</td>
}
</tr>
</thead>
<tbody>
@foreach (var week in Model.MonthData.WeeksInMonth)
{
<tr>
@if (Model.PrefixDays.Any() && week.WeekNumber == Model.MonthData.NumberOfWeeks.First())
{
foreach (var prefixDay in Model.PrefixDays)
{
<td>
@Html.Partial("_EventData", prefixDay)
</td>
}
}
@foreach (var day in week.DaysInWeek)
{
<td class="currentMonthBackground">
@Html.Partial("_EventData", day)
</td>
}
@if (Model.SuffixDays.Any() && week.WeekNumber == Model.MonthData.NumberOfWeeks.Last())
{
foreach (var suffixDay in Model.SuffixDays)
{
<td>
@Html.Partial("_EventData", suffixDay)
</td>
}
}
</tr>
}
</tbody>
</table>
</div>
<div id="modalBodyContainer"></div>
</div>
mvc _eventdata.cshtml partial view:
@model Common.Calendar.DTODay
<div class="row">
<div class="form-group col-md-8 col-xs-1">
@if (Model.IsCurrentDay)
{
<div class="circle">@Model.DayNumber</div>
}
else
{
<div class="@(Model.IsOtherMonth ? "otherMonthDay" : "currentMonthDay")">@Model.DayNumber</div>
}
</div>
<div class="form-group col-md-4 col-xs-1 mml5">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-plus" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a onclick="addReminder('@Model.FullDate')"><i class="fa fa-clock-o fa-fw"></i> Reminder</a></li>
<li><a onclick="addComment('@Model.FullDate')"><i class="fa fa-sticky-note-o fa-fw"></i> Note</a></li>
</ul>
</div>
</div>
@if (Model.ReminderCount > 0 || Model.NoteCount > 0 || Model.BirthdayCount > 0 || Model.Holiday != null)
{
<div class="row">
<div class="col-sm-12">
@if (Model.NoteCount > 0)
{
<a class="btn btn-success btn-xs inline mobileReminder " onclick="displayNote('@Model.FullDate')">
<i class="fa fa-sticky-note-o fa-fw"></i><span class="eventSizeSmall">@Model.NoteCount</span>
</a>
}
@if (Model.ReminderCount > 0)
{
<a class="btn btn-danger btn-xs inline mobileReminder " onclick="displayReminder('@Model.FullDate')">
<i class="fa fa-clock-o fa-fw"></i> <span class="eventSizeSmall">@Model.ReminderCount</span>
</a>
}
@if (Model.BirthdayCount > 0)
{
<a class="btn btn-birthday btn-xs inline mobileReminder " onclick="displayBirthday('@Model.FullDate')">
<i class="fa fa-birthday-cake fa-fw"></i><span class="eventSizeSmall">@Model.BirthdayCount</span>
</a>
}
@if (Model.Holiday != null)
{
<a class="btn btn-warning btn-xs mobileReminder" onclick="displayHoliday('@Model.FullDate')">
<i class="fa fa-bullhorn fa-fw"></i><span class="eventSizeSmall">1</span>
</a>
}
</div>
</div>
}
Upvotes: 1
Views: 932
Answers (1)
tshoemake
Reputation: 1351
The problem has been solved. I used this SO question to answer it..
table {
table-layout: fixed;
word-wrap: break-word;
}
Template:
<td style="width:14%">content</td>
Changed the width to 14px, then i removed bootstrap btn border-width.
End results and happy camper:
And it also looks proper in mobile:
Upvotes: 1
Related Questions
- css tables out of alignment with bootstrap
- Responsive bootstrap table
- Bootstrap Form Horizontal Alignment Errors
- CSS Table alignment issue
- Table rows not aligning
- Tables in Bootstrap not properly aligned
- Bootstrap alignment with rows and margins
- twitter bootstrap align tables side by side
- Table alignment issue
- twitter bootstrap table alignment