4 Replies Latest reply on Feb 23, 2008 6:49 PM by Tony Herstell

    Border for rich:dataGrid and rich:dataTable

    Tony Herstell Master

      I have tried both:

      frame:void

      and adding:

      .rich-table {
      border: none;
      border-style: none;
      }


      But in either case only the top and lhs edge is removed.

      Please advise.

        • 1. Re: Border for rich:dataGrid and rich:dataTable
          Tony Herstell Master

          thats IE7 and Firefox and IETab in Firefox on RF 3.1.4.GA

          • 3. Re: Border for rich:dataGrid and rich:dataTable
            Tony Herstell Master

            1. Shame the FAQ's are not rolled into the Documentation pdf. Can this be put on the list of things to do.

            2. Not getting the desired result...
            I can disable borders using that snippet; but when I try to use css to disabled one of a nested set of objects then things dont work as expected.
            I THINK its because of the ordering to the styles when written out to the .xhtml... (dr-table rich-table eachDayGrid)

            e.g.

            .eachDayGrid .rich-table {
             border-width: 0px;
            }
            
            .eachDayGrid .rich-table-headercell {
             border-width: 0px;
            }
            
            .eachDayGrid .rich-table-row {
             border-width: 0px;
            }
            
            .eachDayGrid .rich-table-cell {
             border-width: 0px;
            }
            

            does not remove the borders completely

            but

            .rich-table {
            border-width: 0px;
            }

            Does... but globally!.. as does:

            .rich-table,.rich-table-header,.rich-table-headercell,.rich-table-cell,.rich-subtable-cell,.rich-table-footercell,.rich-subtable-footercell
            {
            border-width: 0px;
            }

            GGrrr...

            • 4. Re: Border for rich:dataGrid and rich:dataTable
              Tony Herstell Master

              To get the removal of the borders (nested) as I wanted (using nested css) I had to resort to going to the outer containing element and set its border to zero to get rid of the lhs and top border!

              .allocation_days_with_bookings_panel .rich-table {
               border-width: 0px;
              }
              
              .eachDayGrid .rich-table {
               border-width: 0px;
              }
              
              .eachDayGrid .rich-table-headercell {
               border-width: 0px;
              }
              
              .eachDayGrid .rich-table-cell {
               border-width: 0px;
              }
              
              .eachAllocResource .rich-table {
               border-width: 1px;
              }
              
              .eachDaySlotGrid .rich-table-headercell {
               border-width: 1px;
              }
              
              .eachDaySlotGrid .rich-table-cell {
               border-width: 1px;
              }
              
              


              Also... I could not use id (i.e. use # in the css) as that didn't work; but that be my limited understanding of css.


              <a4j:outputPanel id="allocation_days_with_bookings" layout="none" ajaxRendered="true">
               <a4j:outputPanel styleClass="allocation_days_with_bookings_panel"
               rendered="#{bookingController.reason == 'ONE_HOUR_PRIVATE' || bookingController.reason == 'ONE_HOUR_OPEN'}">
              
               <center>
               <h:panelGrid class="left" id="allocation_days_heading"
               rendered="#{not empty bookingController.getArenaRequiredForOneHourBooking()}">
               <h:outputText class="sub3_title" id="select_date_title"
               value="#{messages.allocation_select_date}" />
               <rich:calendar value="#{bookingController.bookingDateRequired}" ajaxSingle="true"
               id="allocation_calendar" popup="false" currentDate="#{bookingController.bookingDateRequired}"
               datePattern="dd MMMM yyyy" inputSize="30" immediate="true" showWeeksBar="false">
               <a4j:support event="ondateselected" />
               </rich:calendar>
               <br />
               </h:panelGrid>
              
               <s:fragment id="allocation_days"
               rendered="#{not empty bookingController.getArenaRequiredForOneHourBooking()}">
              
               <rich:dataGrid styleClass="eachDayGrid" var="allocEachDay" value="#{booking.bookingDays}"
               columns="#{booking.bookingDays.size}" elements="#{booking.bookingDays.size}"
               ajaxRendered="true">
              
               <rich:panel rendered="#{not empty allocEachDay.bookingResources}">
               <f:facet name="header">
               <h:outputText style="text-align:center;" value="#{allocEachDay.onDate.time}">
               <s:convertDateTime type="date" dateStyle="full" />
               </h:outputText>
               </f:facet>
              
               <rich:dataGrid styleClass="eachAllocResource" var="allocEachResource" value="#{allocEachDay.bookingResources}"
               columns="#{allocEachDay.bookingResources.size}"
               elements="#{allocEachDay.bookingResources.size}" ajaxRendered="true">
              
               <rich:panel>
               <f:facet name="header">
               <h:outputText style="text-align:center;"
               value="#{messages[allocEachResource.resource.kind.inlLabel]}" />
               </f:facet>
              
               <h:panelGrid columns="2">
               <rich:dataTable styleClass="eachDaySlotGrid" var="daySlotForResourceKind"
               value="#{resourceAllocationController.getDay(allocEachResource.resource.kind, allocEachDay.onDate.time).daySlots}"
               width="100%">
               <f:facet name="header">
               <rich:columnGroup>
               <rich:column>
               <h:outputText id="allocation_slot" value="#{messages.allocation_slot}" />
               </rich:column>
               <rich:column>
               <h:outputText id="allocation_status" value="#{messages.allocation_status}" />
               </rich:column>
               </rich:columnGroup>
               </f:facet>
              
               <rich:columnGroup>
               <rich:column>
               <center>
               <h:outputText value="#{daySlotForResourceKind.slot.label}" />
               </center>
               </rich:column>
              
               <rich:column>
               <center>
               <s:fragment
               rendered="#{resourceAllocationController.getDateNotPassedAlready(allocEachDay.onDate, daySlotForResourceKind)}">
              
               <!-- Resource Already Booked -->
               <s:fragment rendered="#{daySlotForResourceKind.booked}">
               <h:outputText value="#{daySlotForResourceKind.title}" />
               </s:fragment>
              
               <!-- Resouce Not Already Booked -->
               <s:fragment rendered="#{!daySlotForResourceKind.booked}">
               <!-- This booking is Booking the resource -->
               <s:fragment
               rendered="#{bookingController.isBookedOnto(allocEachResource.resource.kind, allocEachDay, daySlotForResourceKind.slot)}">
               <a4j:commandButton styleClass="booked" id="cancelBookOnto"
               value="#{messages.general_button_cancel}" immediate="true"
               action="#{bookingController.cancelBookOnto(allocEachResource.resource.kind, allocEachDay, daySlotForResourceKind.slot)}"
               eventsQueue="eventsQueue" requestDelay="500" />
               </s:fragment>
               <!-- This booking is not Booking the resource so allow it to be (re)booked -->
               <s:fragment rendered="#{bookingController.isBookable(allocEachResource.resource.kind, allocEachDay, daySlotForResourceKind.slot)}">
               <s:fragment
               rendered="#{!bookingController.isBookedOnto(allocEachResource.resource.kind, allocEachDay, daySlotForResourceKind.slot)}">
               <a4j:commandButton id="bookOnto" value="#{messages.general_button_book}"
               immediate="true"
               action="#{bookingController.bookOnto(allocEachResource.resource.kind, allocEachDay, daySlotForResourceKind.slot)}"
               eventsQueue="eventsQueue" requestDelay="500"
               rendered="#{!daySlotForResourceKind.booked}" />
               </s:fragment>
               </s:fragment>
               </s:fragment>
               </s:fragment>
              
               <s:fragment
               rendered="#{!resourceAllocationController.getDateNotPassedAlready(allocEachDay.onDate, daySlotForResourceKind)}">
               <h:outputText styleClass="faded" value="#{messages.allocation_slot_passed}" />
               </s:fragment>
               </center>
               </rich:column>
               </rich:columnGroup>
               </rich:dataTable>
               </h:panelGrid>
               </rich:panel>
              
               </rich:dataGrid>
              
               </rich:panel>
              
               </rich:dataGrid>
              
               </s:fragment>
               </center>
               </a4j:outputPanel>
               </a4j:outputPanel>