CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-datetimepicker
WoShiNiBaBa
WoShiNiBaBa

Reputation: 267

CSS issue in Bootstrap dateime picker

I'm trying to use bootstrap datetime picker for users to select dates, but it's giving me a hard time.

enter image description here

When I select a month, the layout doesn't look right.

enter image description here

UPDATE

 <div class="col-md-10  formMargin" style="text-align: right; " role="search">
      <form>
        <input class="searchPlace" id="city" name="city" autocomplete="off" >
            <span class="searchPrice">
               <div class="form-control  form-background-color searchPrice2" style="">  <span >Price</span> </div>
               <div class="selectBox"> 
                   <select class="form-control   custom-dropdownHome">
                      <option label=" "></option>  
                       <option>Free</option>
                    </select>
               </div> 
            </span>

        <div class="input-group date" id="eventDatePicker_0"    style="height:50px;  height: 50px;padding-right: 0px; opacity: 1; width: 14%;  vertical-align: bottom; display: inline-block;  ">

         <input style="width: 60%; padding: 0px; padding-left: 10px; padding-top: 5px;background:transparent;border:none;box-shadow: none; "  placeholder="Date" class="form-control"  type="text"  >
         <span class=" input-group-addon" style="background:transparent;border:none;box-shadow:none;padding-top: 10px; padding-right: 0px;">
              <span class="glyphicon glyphicon-calendar"></span> 
         </span>

       </div> 
        </form>
     </div>

CSS Code:

.formMargin form{
    margin-bottom: 0px;
    display: inline-block;
    width: 100%;
}
.searchPlace{

    color: black;
    height: 50px;
    font-size: 17px;
    background: rgba(255,255,255,1);
    padding-left: 1%;
    border: none;
    vertical-align: bottom;
    width: 15%;
}
.searchPrice{
    display: inline-block; vertical-align: bottom;width: 13%;
}
.selectBox{
    border:0px;height:50px;width:70%; background:white;box-shadow: none;display:inline-block;float:right;
}
.date{
    font-size:17px;
    //float:right;
    opacity:0.8;
    padding:5px;

}

I thank you in advance for your help!

Upvotes: 1

Views: 106

Answers (1)

WoShiNiBaBa
WoShiNiBaBa

Reputation: 267

Found the problem.

I changed .table in my own css file.

table { 
    border-spacing: 20px;
    border-collapse: separate;
}

Now it's working. Thanks for all the help.

Upvotes: 1

Related Questions