Search code examples
htmlcsstwitter-bootstrapyesod

Yesod CSS lucius

I have made a table in my hamlet file:

<table>
$forall ivlist <- y
    <tr>
      $forall iv <- ivlist
        <td>^{fvInput iv}

and its respective css in lucius file:

td {
    width:1em;
    height:1em;
}

The CSS was also generated as expected,but the output was different. When I change the height and width to some higher value the change was visible, but when I change it to sum lower value it no longer decreases.

Here is the image of the generated table

Image-table

I couldn't change the column width.I wanted to make it square. But i don't know what should be done. I am using a static bootstrap.css file and also each cell is a input. I think the problem should be due to some default values in bootstrap. but I couldn't find what should be changed. I have tried few changes like changing width and modifying the bootstrap.css file, but I didn't get the required results.

input[type="range"] {
  display: block;
  width: 100%;
}

In short how do I modify the cell width? What should I be modifying to see the changes in the width of the table?

Solution

  • I got it. It was simple. The change was to be made to the input tag. So I added the following to my lucius file

    input {
    width:3em;
}

    which was allowing me to control the width.