CODEWITHSUNDEEP
cssjquery-mobile
Anuj.T
Anuj.T

Reputation: 1628

How to remove space between the jquery mobile grid?

I am using multiple jQuery Mobile grids in the page and I want to remove the space between the grid.

<div class="ui-grid-a">
    <div class="ui-block-a">
        <a href="#" data-corners="false" data-icon="alert" data-iconpos="top" data-role="button" onclick="click()">Button 1</a>
    </div>
    <div class="ui-block-b">
        <a href="#" data-corners="false" data-icon="star" data-iconpos="top" data-role="button" onclick="click()">button 2 </a>
    </div>
    <div class="ui-block-a">
        <a href="#" data-corners="false" data-icon="location" data-iconpos="top" data-role="button" onclick="click()">Button 3</a>
    </div>
    <div class="ui-block-b">
        <a href="#" data-corners="false" data-icon="info" data-iconpos="top" data-role="button" onclick="click()">button 4 </a>
    </div>
</div>

Check this demo here

It shows spaces between the buttons, but I need that button to cover all the space. I only want changes for this grid, as there are multiple grids on the page.

Upvotes: 0

Views: 1120

Answers (2)

Anuj.T
Anuj.T

Reputation: 1628

Okay i got to solution as i wanted with help of @Suresh's answer.

.no-margin-grid .ui-grid-a [class*=ui-block-]>.ui-btn, .ui-grid-a [class*=ui-block-]>.ui-select,  .ui-grid-a [class*=ui-block-]>.ui-checkbox,  .ui-grid-a [class*=ui-block-]>.ui-radio,  .ui-grid-a [class*=ui-block-]>button.ui-btn-inline,  .ui-grid-a [class*=ui-block-]>button.ui-btn-icon-notext
{
margin:0px;
}

just adding .no-margin-grid custom class to css and defining extra div.

<div class="no-margin-grid">
    <div class="ui-grid-a">
        <div class="ui-block-a">
        <a href="#" data-corners="false" data-icon="alert" data-iconpos="top" data-          role="button" onclick="click()">Button 1</a>
        </div>
        <div class="ui-block-b">
        <a href="#" data-corners="false" data-icon="star" data-iconpos="top" data-role="button" onclick="click()">button 2 </a>
        </div>
        <div class="ui-block-a">
        <a href="#" data-corners="false" data-icon="location" data-iconpos="top" data-role="button" onclick="click()">Button 3</a>
        </div>
        <div class="ui-block-b">
        <a href="#" data-corners="false" data-icon="info" data-iconpos="top" data-role="button" onclick="click()">button 4 </a>
        </div>
     </div>
</div>

DEMO

Upvotes: 0

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

As I mentioned in my comment, Update your CSS like below and target based on the parent class.

 .ui-grid-a [class*=ui-block-]>.ui-btn, .ui-grid-a [class*=ui-block-]>.ui-select,  .ui-grid-a [class*=ui-block-]>.ui-checkbox,  .ui-grid-a [class*=ui-block-]>.ui-radio,  .ui-grid-a [class*=ui-block-]>button.ui-btn-inline,  .ui-grid-a [class*=ui-block-]>button.ui-btn-icon-notext
{
margin:0px;
}

DEMO

Upvotes: 1

Related Questions