How Do I apply custom styles in a GWT project that uses GWT-Bootstrap

Question

I am using a GWTBootstrap Modal for my project, the problem is that it's width is too narrow for my liking.

I inspected the styles that it gets with firebug and saw this

.modal {
background-clip: padding-box;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 6px 6px 6px 6px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
left: 50%;
margin: -250px 0 0 -280px;
outline: medium none;
position: fixed;
top: 50%;
width: 560px;
z-index: 1050;
}

I went to the Webapp/css directory and made the following changes to the bootstrap.min.css

.modal {
width : 960px;
max-height : 960px;
}

But it gets overwritten by the gwt compiler.

Next I referred to this Created a css file custom-overrides.css

.modal {
    width : 960px;
    max-height : 960px;
}

and imported it like <stylesheet src="/custom-overrides.css" /> in my gwt.xml That doesn't work either, eclipse warns me that the file got changed or deleted upon compilation.

I have also tried making the same change in the UIBinder file where I create the modal.

<ui:style>
    .modal{
        width : 960px;
    max-height : 960px;
    }
</ui:style>

That doesn't work either. I'm baffled, what should I do to get my styles to be applied?

Answer 1

It's a twitter bootstrap issue: the modal is not responsive.

This should be fixed in Bootstrap 3.0.

About solutions, as @mit said, it will work, but I have to warn you: it's not a good practice unless you know exactly what you're doing.

I'll suggest you to add an ID to your modal, and write the CSS specific for it. This will evict mess with other modals. As ID is more specific, you will not need to use !important also.

Answer 2

All 3 solutions should work.

1. You can override the bootstrap.min.css but you have to do this in the gwt-bootstrap library itself because as you found out it get's overwritten when you compile your app.
2. You can also include a custom-override.css stylesheet but you have to make sure that it also overrides the .modal styles from the original bootstrap file. You can ensure that by adding !important to the overwritten css styles (i..e width : 960px !important;)
3. If you want to override the .modal class in your UiBinder file you have to use the @external annotation:

Something like this:

<ui:style>
    @external .modal;
    .modal{
        width : 960px;
        max-height : 960px;
    }
</ui:style>

But you might also have to add the !important rule to the styles