Project

General

Profile

Wt::Auth::AuthWidget and bootstrap3

Added by Emeric Poupon over 9 years ago

Hello,

In order to properly style a form (I heavily used the integration example from the widget gallery), I just switched from bootstrap2 to bootstrap3.

My whole application is working fine, the only problem is the AuthWidget that is now badly styled.

Is there anything special I have to do? Is it supposed to work?

Best Regards,

Emeric


Replies (8)

RE: Wt::Auth::AuthWidget and bootstrap3 - Added by Alex V over 9 years ago

Hi Emeric,

the source code for Wt has the layout of these widgets in this location

https://github.com/kdeforche/wt/tree/master/src/xml

if you copy this entry from the bootstrap_theme

<message id="Wt.Auth.template.login">

and put it into one of your resource files, you will be able to edit it to alter the styling of the bootstrap 3 theme.

I've attached a template that at least changes the username and password to be styled the same way as an example.

if you fix up all the styling, please post it back here I'm sure others could benefit from it.

Alex.

xml.xml (995 Bytes) xml.xml

RE: Wt::Auth::AuthWidget and bootstrap3 - Added by Mohamed Samir over 9 years ago

hi, may I ask where to put the xml you provided ?

RE: Wt::Auth::AuthWidget and bootstrap3 - Added by Wim Dumon over 9 years ago

You put it in an xml file and load it as a WMessageResourceBundle

RE: Wt::Auth::AuthWidget and bootstrap3 - Added by Mohamed Samir over 9 years ago

thanks wim, I figured it out, but it's kind of hard doing this, this way.

don't you think that Wt in a whole needs a visual UI designer ?

RE: Wt::Auth::AuthWidget and bootstrap3 - Added by Brane D over 9 years ago

I have the same problem. But if i use the xml file alex provided, nothing changes here. How can i call a WMessageResourceBundle and where do i have to call it?

RE: Wt::Auth::AuthWidget and bootstrap3 - Added by Emeric Poupon over 9 years ago

Please note the initial problem has been corrected : http://redmine.webtoolkit.eu/issues/3582

RE: Wt::Auth::AuthWidget and bootstrap3 - Added by Mark Travis about 3 years ago

I'm running in to this issue right now. I'd like the form to be centered on the page.

When I look at the generated html/css in Safari (via Inspector), it looks like the "span8 offset2" is over-riding anything I do. That's bootstrap v2.

I set the theme to bootstrap v3 in the initialization. And I can set the master WContainerWidget using various v3 styles.

However, I tried the following for AuthWidget, and it still wants to stay over to the left of the screen per the span8 offset2 instruction.

authWidget->setStyleClass(".col-xs-6 .col-xs-offset-3");
authWidget->setStyleClass(".form-control width:75%");

I see in \wt\build\src\BootstrapTheme_xml.C the following around line 58: (Version 4.5.0)
"\r\n"
" \r\n"
" \r\n"
" ${tr:Wt.Auth.login-form-title}\r\n"
" ${tr:Wt.Auth.login-form-info}\r\n"
"\r\n"

RE: Wt::Auth::AuthWidget and bootstrap3 - Added by Mark Travis about 3 years ago

I fixed it by over-riding it in my companion css file with the following:

.Wt-auth-login {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
float: left;
margin-left: 25%;
width: 75%;
}

    (1-8/8)